Conversation
- Add `aria-label`, `aria-pressed`, and `aria-live` to icon-only buttons and stateful toggles in `TimeControls`, `SearchWidget`, and `PayloadInspector`. - Add focus-visible states with `outline-none` and `ring` styling to ensure proper keyboard navigation. - All changes maintain existing design system tokens and keep logic modifications to zero. Co-authored-by: d3mocide <136547209+d3mocide@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. |
🎨 Palette: UX and Accessibility Polish
💡 What: Added essential accessibility attributes (
aria-label,aria-pressed,aria-live) and keyboard focus indicators (focus-visible) to several key UI widgets.🎯 Why: Icon-only buttons (like Play/Pause, Close, Clear Search) were completely invisible to screen readers, and interactive stateful toggles (playback speeds and lookback durations) did not communicate their active states properly to assistive technologies. Keyboard navigation lacked visual clarity. This fulfills my mission as "Palette" to ensure "Accessibility is not optional".
📸 Before/After: See the
verification.pngattached to the test script output.♿ Accessibility:
TimeControls.tsx: Screen readers now announce "Play playback" / "Pause playback", and speed/duration toggles announce their state (aria-pressed).SearchWidget.tsx: The clear search ("X") button now has anaria-label, and the results dropdown hasaria-labelandaria-live="polite"to announce content updates.PayloadInspector.tsx: The close button now has anaria-label.focus-visiblering (usinghud-greenorair-accent) for keyboard users.PR created automatically by Jules for task 15812693002069179834 started by @d3mocide