fix(accessibility): improve ARIA attributes and keyboard navigation across UI components - #123
Conversation
…cross UI components Addresses #103 - accessibility-pass - Add proper ARIA labels and roles to interactive components - Improve keyboard navigation and focus management - Enhance screen reader support for data views and wizards - Fix color contrast and semantic markup issues Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 21aef3bc0c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| return ( | ||
| <div class="wl-analyticsChart"> | ||
| <div class="wl-analyticsChart" role="img" aria-label={`Field analytics chart showing ${metrics.length} fields`}> |
There was a problem hiding this comment.
For screen-reader users, role="img" makes this entire subtree a single image whose accessible name is only “Field analytics chart showing N fields”; the descendant field names, population percentages, uniqueness rates, and distinct counts are treated as image contents rather than readable data. Since the surrounding screen does not expose those per-field metrics elsewhere, remove the image role or provide an alternative that includes every metric.
Useful? React with 👍 / 👎.
|
|
||
| return ( | ||
| <div class="wl-card"> | ||
| <div class="wl-card" role="region" aria-label="Migration progress dashboard" aria-live="polite"> |
There was a problem hiding this comment.
While a push is processing, DataPushScreen updates nowTs every second, changing the elapsed and ETA text inside this region even when no records have completed. Applying aria-live="polite" to the whole dashboard therefore produces continuous announcements or an ever-changing announcement queue for screen-reader users; restrict the live region to a throttled status/progress message rather than the per-second dashboard.
Useful? React with 👍 / 👎.
|
|
||
| return ( | ||
| <div class="wl-relationshipTree"> | ||
| <div class="wl-relationshipTree" role="tree" aria-label="Object relationship tree"> |
There was a problem hiding this comment.
When assistive technology encounters this container, it expects owned treeitem elements and tree keyboard navigation, but every node below it remains a plain div containing a checkbox and there are no arrow-key handlers anywhere in this component. This exposes a tree with no semantic items while focus still advances using ordinary Tab behavior; either retain list/group semantics for the checkbox UI or add proper treeitems and the corresponding keyboard model.
Useful? React with 👍 / 👎.
1 participant
Summary
Addresses #103 - accessibility-pass
🤖 Generated with Claude Code