fix(a11y): unique names for repeated nav landmarks - #4692
Open
AKnassa wants to merge 1 commit into
Open
Conversation
axe landmark-unique (moderate): same-type landmarks need distinguishable names. Story matrices rendered several navs with identical default labels — fixed by passing distinct labels through existing props (Layout, Pagination, TabList, Toolbar, ToolbarEdgeCompensation, TablePagination stories). Component fix: useTablePagination position=both emitted two navs with one name from a single hook call — they now interpolate the label into distinct top/bottom names via new en.json keys; single-position names stay byte-identical. label config documented in doc.mjs. Baseline: -8 entries. Verified: 43/43 pagination + 147/147 wider slice tests, core typecheck, eslint clean, axe audit exit 0 (0 new, 13 resolved) across all six components. Part of facebook#4681.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
AKnassa
marked this pull request as ready for review
August 4, 2026 01:49
AKnassa
requested review from
cixzhang,
ejhammond,
humbertovirtudes and
imdreamrunner
as code owners
August 4, 2026 01:49
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.
Part of #4681 (weekly a11y scan). Clears all 8
landmark-uniquebaseline entries (Layout, Pagination, TabList x2, TablePagination x2, Toolbar, ToolbarEdgeCompensation).What this does
Same-type landmarks need distinguishable accessible names. The flagged stories render several
<nav>landmarks with identical default labels; one case is a real component gap. Both get fixed at the level they belong to.What changed
aria-label={'Tabs (' + size + ')'}). No component behavior changes.useTablePagination, packages/core): withposition='both', one hook call rendered two navs sharing one name, which a story cannot fix. The two navs now get distinct names by interpolating the label into two new i18n keys:"{label} (top)"and"{label} (bottom)". Single-position accessible names stay byte-identical. New keys live in en.json only (fr-FR stays a sparse demo catalog); the base key's translator note now points at the suffix templates.labelconfig is now in the doc.mjs (EN and dense variants), including the position='both' naming contract.Judgment call, stated plainly
The "(top)" / "(bottom)" suffix wording is a choice. Alternatives considered: standalone non-interpolated keys (loses the consumer-supplied label), or suffixing only one nav (asymmetric announcements). Interpolated templates keep consumer labels differentiated and translatable as a unit. Happy to reword if you prefer different suffixes.
Verification
43/43 pagination plugin tests (the old test asserting two same-named navs is rewritten, plus a consumer-label interpolation test), 147/147 across the wider pagination/Pagination/i18n slice, core typecheck, eslint clean, and the repo's axe audit with
--fail-on-newacross all six components: exit 0, "0 new, 13 resolved".