Skip to content

fix(web): say which page is current, not just colour it - #91

Open
42-v wants to merge 1 commit into
mainfrom
fix/ui-aria-current
Open

fix(web): say which page is current, not just colour it#91
42-v wants to merge 1 commit into
mainfrom
fix/ui-aria-current

Conversation

@42-v

@42-v 42-v commented Aug 26, 2026

Copy link
Copy Markdown
Owner

UI plan item A5, the half that needs no new strings.

The nav already knew. isActive(link.to) picks the highlight at all three link sites, and the result was expressed entirely as a background tint and a text shade — so a screen-reader user tabbing the navigation heard the same thing on every entry and could not tell which page they were on. WCAG 1.3.1: what presentation conveys has to be available programmatically too.

aria-current="page" now comes from the same call that picks the colour, so the two cannot disagree. Bound to undefined rather than "false" on inactive links — aria-current="false" is a value assistive technology reads and then ignores, which is noise where absence is the correct signal.

Site Where
desktop nav loop App.vue:57
signed-out sign-in link App.vue:82
mobile nav loop App.vue:123

The gate pairs them rather than checking a list of links: any element whose appearance consults isActive must also bind aria-current. That holds the fourth nav entry somebody adds, which a component test of the three that exist today would not. Mutation-verified — removing the binding from any one site fails it by name:

web/src/App.vue: an element decides its appearance from isActive() but binds no
aria-current, so the current page is signalled by colour alone.

Not in this PR: the skip link and <main id tabindex>, the other half of A5. That needs common.skipToContent across 38 locales, which is the one new string in the whole UI plan and an owner decision (#297).

Verified: 749 web tests pass; pnpm lint clean; branches 707/715 → 713/721, the new ternaries all covered; statements unchanged.

fix(web): say which page is current, not just colour it

The nav already knew. isActive(link.to) picks the highlight at all three link
sites, and the result was expressed entirely as a background tint and a text
shade -- so a screen-reader user tabbing the navigation heard the same thing on
every entry and could not tell which page they were on. WCAG 1.3.1: what
presentation conveys has to be available programmatically too.

aria-current="page" now comes from the same call that picks the colour, so the
two cannot disagree, and it is bound to undefined rather than "false" on the
inactive links -- aria-current="false" is a value assistive technology reads and
then ignores, which is noise where absence is the correct signal.

The gate pairs them rather than checking a list of links: any element whose
appearance consults isActive must also bind aria-current. That holds the fourth
nav entry somebody adds, which a component test of the three that exist today
would not. Mutation-verified against each site.

Coverage moves 707/715 to 713/721 branches -- the new ternaries, all covered.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant