🎨 Palette: Add ARIA labels to settings toggle buttons - #256
Conversation
- Added `aria-label` and `aria-pressed` to the 'Show Password' toggle button. - Added `aria-label` to the 'Copy API Token' button. - Added `aria-label` and `aria-pressed` to the 'Show API Key' Groq key toggle button. - Added descriptive `aria-label`s to multiple 'Refresh' models/connection buttons. - Created UX journal entry highlighting the importance of screen reader labels for icon-only toggles. Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
|
👋 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. |
- Added `aria-label` and `aria-pressed` to the 'Show Password' toggle button. - Added `aria-label` to the 'Copy API Token' button. - Added `aria-label` and `aria-pressed` to the 'Show API Key' Groq key toggle button. - Added descriptive `aria-label`s to multiple 'Refresh' models/connection buttons. - Created UX journal entry highlighting the importance of screen reader labels for icon-only toggles. Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
- Added `aria-label` and `aria-pressed` to the 'Show Password' toggle button. - Added `aria-label` to the 'Copy API Token' button. - Added `aria-label` and `aria-pressed` to the 'Show API Key' Groq key toggle button. - Added descriptive `aria-label`s to multiple 'Refresh' models/connection buttons. - Created UX journal entry highlighting the importance of screen reader labels for icon-only toggles. Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
- Added `aria-label` and `aria-pressed` to the 'Show Password' toggle button. - Added `aria-label` to the 'Copy API Token' button. - Added `aria-label` and `aria-pressed` to the 'Show API Key' Groq key toggle button. - Added descriptive `aria-label`s to multiple 'Refresh' models/connection buttons. - Created UX journal entry highlighting the importance of screen reader labels for icon-only toggles. Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
1 participant
🎨 Palette: Add ARIA labels to settings toggle buttons
💡 What: Added dynamic
aria-labels (andaria-pressedwhere stateful) to multiple icon-only toggle buttons in the Settings tabs (AccountSettingsTab.vueandAISettingsTab.vue), such as the 'Show password', 'Show API key', 'Copy API Token', and various model/connection 'Refresh' buttons.🎯 Why: Icon-only buttons often rely on
titletooltips for visual feedback. However, screen reader support for thetitleattribute is inconsistent, rendering these actions effectively invisible or ambiguous for assistive technologies. Adding explicit ARIA labels makes these common actions accessible.♿ Accessibility: Ensures that users relying on screen readers are aware of the exact action an icon-only button performs (and its current toggled state if applicable).
📚 Journal: Created a new journal entry in
.Jules/palette.mdnoting this recurring pattern and best practice for this component system.PR created automatically by Jules for task 2649610552921316315 started by @endlessblink