🎨 Palette: Improve accessibility of TabBar and SaveRow components#20
🎨 Palette: Improve accessibility of TabBar and SaveRow components#20bobdivx wants to merge 1 commit into
Conversation
- Added `role="tablist"`, `role="tab"`, and `aria-selected` to `TabBar.tsx`. - Wrapped dynamic messages in `SaveRow.tsx` with `aria-live="polite"` and `role="status"`. - Added `aria-busy` to the save button in `SaveRow.tsx`. Co-authored-by: bobdivx <6737167+bobdivx@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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the accessibility of the SaveRow and TabBar components by implementing ARIA roles, live regions, and updating documentation. Feedback recommends further improving the TabBar by adding standard keyboard navigation and accessible names to meet WAI-ARIA standards. Additionally, for SaveRow, it is suggested to use role="alert" for error messages and include aria-atomic="true" to ensure complete status updates are announced by screen readers.
|
|
||
| return ( | ||
| <div class={`${rail} ${className}`}> | ||
| <div role="tablist" class={`${rail} ${className}`}> |
There was a problem hiding this comment.
Using role="tablist" and role="tab" is a great start for accessibility, but it also triggers expectations for standard keyboard interaction patterns. To be fully compliant with WAI-ARIA standards, the component should handle arrow keys to move focus between tabs and implement a "roving tabindex" (where only the active tab is focusable via the Tab key). Without these behaviors, screen reader users may find the component confusing as it doesn't behave like a standard tab widget. Additionally, a tablist should ideally have an accessible name via aria-label or aria-labelledby.
| ) : ( | ||
| <span /> | ||
| )} | ||
| <div aria-live="polite" role="status"> |
There was a problem hiding this comment.
To improve the accessibility of the status message, consider adding aria-atomic="true" so that the entire message is announced by screen readers when it updates. Additionally, while role="status" is appropriate for general updates, using role="alert" for error messages ensures they are announced assertively to the user. Note that role="status" has an implicit aria-live="polite", so that attribute can be omitted if the role is static.
| <div aria-live="polite" role="status"> | |
| <div role={isError ? "alert" : "status"} aria-atomic="true"> |
1 participant
💡 What: Added proper ARIA roles and live regions to the
TabBarandSaveRowcomponents.🎯 Why: To improve accessibility for screen reader users by properly announcing tab selections and dynamic save statuses.
♿ Accessibility:
TabBar: Screen readers will now understand the element is a list of tabs, identify individual tabs, and announce which one is currently selected.SaveRow: Screen readers will politely announce dynamic success or error messages after an action, and understand when the button is busy saving.PR created automatically by Jules for task 13492829624903235005 started by @bobdivx