fix(a11y): disambiguate "Go back" aria-labels across app - #295
Merged
Conversation
Three components previously shared aria-label="Go back", causing Playwright strict-mode collisions and poor screen-reader disambiguation: - window-controls titlebar back/forward (permanently disabled history nav) - sidebar tag-detail drilldown back button - journal date-breadcrumb back button (dead component, defensive fix) Rename the always-rendered titlebar pair to "Browser back"/"Browser forward" so they no longer collide with the drilldown. Relabel the dead date-breadcrumb BackButton to "Journal back" defensively. Tag-detail view keeps "Go back" — it's now the sole owner of that label, which matches the existing tags-rename-delete.e2e.ts selector cleanly. Verified: - pnpm typecheck:web passes - renderer unit tests (window-controls.test.tsx) 5/5 pass - tags-rename-delete.e2e.ts 2/2 pass - sidebar-window-controls.e2e.ts 4/4 pass
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.
What
Rename the titlebar history nav and journal breadcrumb back-buttons so they no longer share
aria-label="Go back"with the sidebar tag-detail drilldown.Why
Three unrelated components rendered buttons with identical
aria-label="Go back":Because the titlebar is always mounted, opening the tag drilldown produced two DOM nodes matching
button[aria-label="Go back"]. This is a strict-mode trap for Playwright (page.locator(...).click()would throw) and is bad a11y — screen readers announce identical labels for semantically distinct actions.How
window-controls.tsx→"Browser back"/"Browser forward"on the titlebar history pair.date-breadcrumb.tsx→"Journal back"on its internalBackButton(minimal one-line change; component is dead code today, but renaming defensively prevents the trap if wired up later).window-controls.test.tsx) and e2e test (sidebar-window-controls.e2e.ts) to the new labels.tag-detail-view.tsxkeeps"Go back"— it's now the sole owner of that label, which matches the existingtags-rename-delete.e2e.tsselector cleanly with no filter hacks.Type
fix— bug fix (a11y + test flake)Test plan
window-controls.test.tsx5/5 passtags-rename-delete.e2e.ts2/2 pass (drilldown selector now uniquely matches)sidebar-window-controls.e2e.ts4/4 pass (new titlebar labels resolve)pnpm typecheck:webpassespnpm exec eslintclean on touched source filesNotes for reviewer
tag-detail-view.tsx— it keeps the short"Go back"label, which is now unambiguous.DateBreadcrumbis currently unused (siblingJournalBreadcrumbreplaced it); I did the minimal one-line rename rather than deleting the component, since cleanup is out of scope.:not([disabled])filter removal was needed intags-rename-delete.e2e.ts— the current file doesn't carry one.Checklist