docs(a11y): clickable-elements accessibility audit [Phase 2e]#635
Merged
barach6662001-bit merged 1 commit intomainfrom Apr 24, 2026
Merged
docs(a11y): clickable-elements accessibility audit [Phase 2e]#635barach6662001-bit merged 1 commit intomainfrom
barach6662001-bit merged 1 commit intomainfrom
Conversation
Audit-only PR — adds docs/accessibility/clickable-elements-audit.md
catalogues every remaining clickable non-semantic UI pattern in
frontend/src so the rest of the Phase 2 paydown can be sequenced
from cheapest/safest to riskiest, with no surprises.
No runtime code, no tests, no routes, no API calls, no business logic
are changed by this PR. The repository has no Markdown linter
configured (verified — no markdownlint / remark config under repo
root or under frontend/), so no additional CI step is needed.
Method
------
ripgrep across frontend/src for every pattern that Phases 2b/2c/2d
each removed:
* <div onClick> / <li onClick> / <span onClick> / <section onClick>
* inline style={{cursor: 'pointer'}}
* CSS module .x { cursor: pointer; } paired with non-semantic
wrappers
* AntD <List.Item onClick=...> patterns
* AntD <Table onRow={...onClick...}> patterns
* role="button" without tabIndex / onKeyDown
* tabIndex without a meaningful role
* nested interactive controls inside clickable cards/rows
Each hit was then manually verified by reading the surrounding JSX,
so well-styled real <button> / <a> / <NavLink> elements are NOT
flagged as debt — they are listed in a "False positives" section
so a future audit does not re-flag them.
Findings (8 total)
------------------
0 high, 5 medium, 3 low.
Medium:
1. WarehousesList — AntD Table.onRow with clickable-row class
2. NotificationBell — AntD List.Item onClick + inline cursor
3. CommandPalette — AntD List.Item onClick + inline cursor
(keyboard-driven UI; highest user-impact remaining finding)
4. legacy components/dashboard/OperationsTimeline.tsx — AntD
List.Item onClick (verify-then-delete; appears to be dead code)
5. theme/global.css — duplicated/conflicting .clickable-row rules
Low:
6. FieldStatusCard — clickable <div> rows on the v1 dashboard
(the last plain <div onClick> row in the codebase)
7. legacy components/dashboard/AlertsPanel.tsx — already
accessible but appears to be dead code (cleanup candidate)
8. design-system/primitives/Surface — interactive prop has no
enforced a11y contract
Recommended execution order
---------------------------
Phase 2f — FieldStatusCard rows (lowest risk; reuses 2b/2d pattern)
Phase 2g — WarehousesList + theme/global.css cleanup
Phase 2h — NotificationBell AntD List.Item template
Phase 2i — CommandPalette listbox/option model
Phase 2j — legacy components/dashboard/* dead-code cleanup
Phase 3 — Surface primitive contract hardening
Each finding documents: component name, file path + line numbers,
the exact pattern found, the user impact, the recommended fix
(often with two viable directions and a recommendation between
them), the risk level (low / medium / high) and the suggested
follow-up phase.
Validation
----------
git status → only docs/accessibility/ added (no code touched)
no markdown linter → no extra CI step needed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 2e — Clickable elements accessibility audit (audit-only)
This PR adds one Markdown file and changes no runtime code.
docs/accessibility/clickable-elements-audit.mdcatalogues every remaining clickable non-semantic UI pattern infrontend/srcso the rest of the Phase 2 a11y paydown (#629 FieldCard / #632 OperationsTimeline / #633 UpcomingPanel) can be sequenced from cheapest/safest to riskiest, with no surprises.Method
ripgrep across
frontend/srcfor every pattern Phases 2b / 2c / 2d each removed (<div onClick>, inlinecursor: pointer, AntDList.Item onClick, AntDTable.onRow,role="button"without keyboard wiring,tabIndexwithout a role, nested interactives), then manually verified each hit by reading the surrounding JSX so well-styled real<button>/<a>/<NavLink>are not flagged as debt — those land in a "False positives" appendix so a future audit does not re-flag them.Summary
Medium (5):
WarehousesList(AntD Table.onRow) ·NotificationBell(AntD List.Item) ·CommandPalette(AntD List.Item, keyboard-driven UI — highest user-impact remaining) · legacycomponents/dashboard/OperationsTimeline.tsx(verify-then-delete, appears to be dead code) ·theme/global.css(duplicated.clickable-rowrules).Low (3):
FieldStatusCardrows (the last plain<div onClick>row in the codebase) · legacycomponents/dashboard/AlertsPanel.tsx(already accessible but appears dead) ·design-system/primitives/Surface(interactiveprop has no enforced a11y contract).For each finding the doc records: component, exact file path + line numbers, the pattern, the user impact, the recommended fix (often with two viable directions and a recommendation between them), risk level, and suggested follow-up phase.
Recommended execution order
FieldStatusCardrows (lowest risk; reuses Phase 2b/2d pattern verbatim).WarehousesListrow navigation +theme/global.csscleanup (bundled).NotificationBellAntD List.Item (establishes the AntD-List.Item template).CommandPalettelistbox / option model (highest user-impact remaining; sequenced last among AntD work because it requires the widest test surface).components/dashboard/*dead-code cleanup (deletion-only).Surfaceprimitive contract hardening (low-priority; closes the footgun before any consumer adoptsinteractive={true}).Constraints (from spec)
docs/accessibility/clickable-elements-audit.mdaddedValidation
git statusafter the change shows onlydocs/accessibility/added (verified — no.tsx/.ts/.css/.scssmodifications).markdownlint,remark-lintor similar in root orfrontend/package.json; no.markdownlint*/.remarkrc*files), so no additional CI step is required.