🎨 Palette: [UX improvement] Make safety checklist accessible#69
Conversation
Added role="checkbox", aria-checked state, and specific keyboard focus-visible styling to the custom checklist buttons to improve accessibility and keyboard navigation. Co-authored-by: DhaatuTheGamer <90041791+DhaatuTheGamer@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. |
💡 What: Added proper semantic attributes (
role="checkbox",aria-checked) and explicit keyboard focus styling (focus-visible:ring-primary,focus-visible:ring-offset-2) to the custom interactive checklist buttons in theSafetyChecklistcomponent.🎯 Why: Custom form controls built with standard elements like
<button>lack inherent meaning to assistive technologies. Without these attributes, screen reader users might not understand they are interacting with a checklist or what the state of each item is. Furthermore, without explicit focus styles, keyboard users struggle to navigate through the brutalist design system where default browser outlines are often suppressed or insufficient against thick borders.📸 Before/After: The component functions exactly as before for mouse users, but keyboard navigation now clearly highlights the focused item with the application's primary accent color.
♿ Accessibility:
role="checkbox"for semantic screen reader interpretation.aria-checked={isChecked}to dynamically announce state changes.PR created automatically by Jules for task 3767621967309354006 started by @DhaatuTheGamer