🎨 Palette: Add ARIA labels and focus states to TaskRow actions - #242
🎨 Palette: Add ARIA labels and focus states to TaskRow actions#242endlessblink wants to merge 1 commit into
Conversation
💡 What: Added `aria-label`s to the icon-only buttons in `TaskRow.vue` (Focus, Timer, Edit) and added `:focus-within` to the `.task-row__actions` container to make it visible and interactable when navigating via keyboard. 🎯 Why: Icon-only buttons without accessible labels are difficult for screen-reader users to understand. Additionally, action buttons that appear only on mouse hover were inaccessible to keyboard-only users who could not "hover" over the row to reveal them. 📸 Before/After: Visual changes were verified using Playwright. Hover behavior and tab navigation correctly display the actions now. ♿ Accessibility: Improved screen reader support for action buttons and enabled full keyboard operability for task row actions. 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. |
1 participant
🎨 Palette: Add ARIA labels and focus states to TaskRow actions
💡 What: Added
aria-labels to the icon-only buttons inTaskRow.vue(Focus, Timer, Edit) and added:focus-withinto the.task-row__actionscontainer to make it visible and interactable when navigating via keyboard.🎯 Why: Icon-only buttons without accessible labels are difficult for screen-reader users to understand. Additionally, action buttons that appear only on mouse hover were inaccessible to keyboard-only users who could not "hover" over the row to reveal them.
📸 Before/After: Visual changes were verified using Playwright. Hover behavior and tab navigation correctly display the actions now.
♿ Accessibility: Improved screen reader support for action buttons and enabled full keyboard operability for task row actions.
PR created automatically by Jules for task 14270894971952815582 started by @endlessblink