fix(web): role=button + aria-label on search result rows (#700)#808
Merged
fix(web): role=button + aria-label on search result rows (#700)#808
Conversation
Search results were rendered as bare <div> with tabindex=0 only, so screen readers announced them as anonymous "group" landmarks and keyboard users couldn't tell from the focus ring whether a row was interactive. The row already had click + Enter/Space handlers wiring it as a button — only the role and accessible name were missing. Add role="button" + a dynamic aria-label assembled from filename, line range, non-default namespace, and relative age — the same pattern that .home-source-item already uses (app.js:1703). Pin the contract with a source-scan test in test_web_a11y.py so neither attribute can drop silently. Mutation-validated: removing role= or aria-label= each fail their own test. Scope: search results only. Source detail chunk cards and Timeline rows ship in separate PRs; the umbrella (#702) explicitly notes the fix can land incrementally. Refs #700, umbrella #702. Co-Authored-By: Claude <[email protected]>
This was referenced May 5, 2026
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
Summary
Search result rows (
.result-item) are rendered as bare<div>withtabindex="0"only — screen readers announce them as anonymous "group" landmarks, and keyboard users can't tell from the focus ring whether a row is interactive. The row already hadclick+Enter/Spacehandlers wiring it as a button; the role and accessible name were the only thing missing.This PR fixes the search results surface only — first of three split PRs against #700. Source detail chunk cards and Timeline rows ship separately. The umbrella tracker (#702) explicitly notes the fix can land incrementally.
Changes
app.js_buildResultItem— addrole="button"+ dynamicaria-labelassembled from filename, line range, non-default namespace, and relative age. Same pattern.home-source-itemalready uses (app.js:1703).tests/test_web_a11y.py— new source-scan pin test so neither attribute can drop silently. Mutation-validated: removing either line fails its own test.Why this surface, this scope
.selected, opens detail) —role="button"is the right semantic, notrole="listitem".aria-labelis generated from the same data already on the row, so no new server data or i18n keys are needed..result-checkboxkeeps its native semantics (compound widget); same ashome-source-itemprecedent.Out of scope
app.js:3650.chunk-card) — separate PR.timeline.js:188.timeline-item) — separate PR.#results-listrole="list"— skipped because children are buttons, not listitems.Test plan
uv run pytest packages/memtomem/tests/test_web_a11y.py— new pin test passes.role=oraria-label=each fail their own test.uv run ruff check packages/memtomem/src packages/memtomem/testsclean.uv run pytest packages/memtomem/tests/test_i18n.py packages/memtomem/tests/test_web_routes.py— adjacent web tests still pass.Refs #700, umbrella #702.
🤖 Generated with Claude Code