Repository navigation
Conversation
Panel's aria-labelledby referenced an id Selector never rendered, and Panel didn't even forward the prop to the DOM. Give each Selector a matching id and have Panel accept/render aria-labelledby so tab/tabpanel associations work for screen readers, including items only reachable via the "More" overflow tab.
zigzagdev
requested review from
DianaSuvorova,
dyesin,
hualf1995 and
lijim
as code owners
October 19, 2026 00:37
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.
Motivation
Screen reader users rely on aria-labelledby to hear which tab a given tabpanel belongs to.
Because an attribute pointed at an id nobody rendered, and Panel wasn't even wiring the prop through to the DOM, every
BottomNavigationinstance was silently broken for assistive technology, with no visible symptom for sighted users.So, this change restores that association so the component actually meets the accessibility contract its
role="tabpanel"markup implies.Description
BottomNavigation's Panel rendered
aria-labelledbypointing at an id string built from the tab's title, but Selector never actually rendered an element with that id.On top of that, Panel itself did not even accept an
aria-labelledbyprop, so nothing reached the DOM at all.As a result, the tab and tabpanel association was unconditionally broken for screen readers.
So, this fix makes Selector accept and render an id prop, makes Panel accept and render aria-labelledby, and has
BottomNavigationassign each tab a stable id so every panel'saria-labelledbypoints at whichever tab actually controls it, including items only reachable through the More overflow tab.A regression test was added confirming every rendered tabpanel references an id that actually exists in the document.
Scope
Patch (Bug Fix)