🎨 Palette: [UX improvement] Modal accessibility for anchor tags#102
🎨 Palette: [UX improvement] Modal accessibility for anchor tags#1020m364 wants to merge 1 commit into
Conversation
Added keyboard accessibility to anchor tags used as buttons (the 'OSINT' sitrep trigger). - Bound 'Spacebar' key events in JavaScript to prevent default scrolling and trigger the modal. - Added `role="button"` and `aria-haspopup="dialog"` to the anchor tags in HTML so screen readers properly identify them. - Documented findings in `.Jules/palette.md`.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What:
Added
role="button"andaria-haspopup="dialog"to the#sitrep-btn<a>elements across the site. Added akeydownlistener inmodal.jsthat allowsSpacebarto trigger theopenModalfunction while preventing the page from scrolling down.🎯 Why:
The 'OSINT' button acts as a modal trigger but uses an anchor tag
<a>withhref="#". Native anchor tags only trigger on theEnterkey. Keyboard users and screen readers expect button-like elements to also respond to theSpacebarkey. Without ARIA roles, screen readers announce it merely as a link to nowhere, rather than a button that opens a dialog.📸 Before/After:
Before: Pressing
Spacebarwhile focused on the 'OSINT' link scrolled the page down. Screen readers announced "link, OSINT".After: Pressing
Spacebaropens the Situation Report modal. Screen readers announce "button, OSINT, has popup dialog".♿ Accessibility:
role="button"aria-haspopup="dialog"Spacebarto open the modal (withe.preventDefault())PR created automatically by Jules for task 11921853009120948636 started by @0m364