🎨 Palette: Improve LanguageSwitcher accessibility#9
Conversation
Replaced `<span>` tags with `<button>` elements in `LanguageSwitcher.tsx` to improve semantic HTML and accessibility. Added `aria-label`s to provide more context for screen reader users, applied keyboard focus styles and hover styles to improve usability for keyboard users, and set `aria-hidden="true"` on the separator. Also added visual feedback for the currently selected language. Also resolved a couple of minor TypeScript and linting issues in `GmapsButton.tsx` and `NetworkItem.tsx` that were discovered during the build process. Co-authored-by: Twinber <5513621+Twinber@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
💡 What: Replaced
<span>tags with semantic<button>elements in theLanguageSwitchercomponent. Added focus styles, active state styling, and proper ARIA labels. The text separator/was also hidden from screen readers.🎯 Why: To improve accessibility for screen reader and keyboard users.
<span>elements withonClickhandlers are not easily focusable or actionable via the keyboard, and lack context for assistive technologies.📸 Before/After: The visual layout is mostly unchanged, but the selected language is now bolded, hover states have a slight background, and the keyboard focus indicator is now clearly visible.
♿ Accessibility: Added
aria-label,aria-current="true",aria-hidden="true", and native focus styles viafocus-visible.(Bonus: Cleaned up a couple of small TypeScript errors in
GmapsButton.tsxandNetworkItem.tsxthat were preventing a clean build).PR created automatically by Jules for task 17612824646479395733 started by @Twinber