🎨 Palette: Add ARIA labels to icon-only close buttons#58
Conversation
What: Added `aria-label` attributes to icon-only close (`×`) buttons and remove dependency buttons. Also applied linter and formatter changes across the frontend JavaScript. Why: Icon-only buttons without `aria-label` are inaccessible to screen readers, making it difficult for users relying on assistive technologies to understand their function. Accessibility: Improved keyboard and screen reader accessibility by ensuring interactive elements have descriptive labels. Co-authored-by: tachyon-beep <544926+tachyon-beep@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. |
![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: 1d9382591f
ℹ️ 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".
| const canReusePositions = | ||
| cyNodes.length > 0 && | ||
| cyNodes.every((n) => Object.prototype.hasOwnProperty.call(previousPositions, n.data.id)); | ||
| cyNodes.length > 0 && cyNodes.every((n) => Object.hasOwn(previousPositions, n.data.id)); |
There was a problem hiding this comment.
In this checkout, uv run pytest tests/api/test_graph_api.py -q now fails in TestGraphFrontendContracts.test_topology_change_reuses_positions_only_when_all_nodes_have_positions because that contract test still asserts the previous Object.prototype.hasOwnProperty.call(...) guard. Since this formatter change rewrites the guarded position-reuse check without updating the frontend contract, the Python test suite is left red for any normal validation run even though the accessibility-only change should not break tests.
Useful? React with 👍 / 👎.
…sertion What: Added `aria-label` attributes to icon-only close (`×`) buttons and remove dependency buttons. Also applied linter and formatter changes across the frontend JavaScript, and updated a Python test that was asserting on the exact string of a linted JS line (`Object.prototype.hasOwnProperty.call` -> `Object.hasOwn`). Why: Icon-only buttons without `aria-label` are inaccessible to screen readers, making it difficult for users relying on assistive technologies to understand their function. Fixing the test ensures CI passes after automatic frontend linting. Accessibility: Improved keyboard and screen reader accessibility by ensuring interactive elements have descriptive labels. Co-authored-by: tachyon-beep <544926+tachyon-beep@users.noreply.github.com>
1 participant
💡 What:
Added
aria-labelattributes to various icon-only close buttons (×) and remove dependency buttons throughout the dashboard interface.Also applied standard frontend linting (
pnpm lint:fix) and formatting (pnpm format).🎯 Why:
Buttons that rely solely on visual icons without descriptive text are inaccessible to screen readers. This change ensures that all users can identify and interact with these elements correctly.
📸 Before/After:
(Visuals remain unchanged, but assistive technologies will now announce "Close system health detail" instead of just "times" or "button".)
♿ Accessibility:
aria-label="Close system health detail"to the System Health panel close button.aria-label="Close file detail"to the File Detail close button.aria-label="Clear filter"to the scan source clear filter button.aria-label="Remove dependency"to the dependency remove button.aria-label="Close workflow diagram"to the Workflow Modal close button.PR created automatically by Jules for task 7917932403963802340 started by @tachyon-beep