feat(ui-tabs): TabPanel shouldn't always recieve focus #2312
+159
−22
Conversation
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
|
git-nandor
force-pushed
the
INSTUI-4878_tabpanel_focus_issue
branch
from
313b5b4 to
dbdb065
Compare
ToMESSKa
requested changes
Dec 18, 2025
git-nandor
force-pushed
the
INSTUI-4878_tabpanel_focus_issue
branch
from
dbdb065 to
8c4e5cf
Compare
balzss
force-pushed
the
INSTUI-4878_tabpanel_focus_issue
branch
from
8c4e5cf to
c85cc9f
Compare
balzss
approved these changes
Dec 23, 2025
Contributor
balzss
left a comment
balzss
left a comment
There was a problem hiding this comment.
the code looks good, I've slightly updated the documentation wording and some of the examples to adhere to our own recommendation about tabIndex
ToMESSKa
requested changes
Dec 23, 2025
packages/ui-tabs/src/Tabs/README.md
Outdated
| </Tabs.Panel> | ||
| <Tabs.Panel renderTitle="Disabled Tab" isDisabled> | ||
| {lorem.paragraphs()} | ||
| <Tabs.Panel renderTitle="Disabled Tab" isDisabled tabIndex={0}> |
Contributor
There was a problem hiding this comment.
What is the point of setting the tabIndex to 0 when the panel is disabled? It will never be 0.
packages/ui-tabs/src/Tabs/README.md
Outdated
Comment on lines
253
to
289
| </Tabs.Panel> | ||
| <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled> | ||
| {lorem.paragraphs()} | ||
| <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled tabIndex={0}> |
Contributor
There was a problem hiding this comment.
What is the point of setting the tabIndex to 0 when the panel is disabled? It will never be 0.
packages/ui-tabs/src/Tabs/README.md
Outdated
Comment on lines
32
to
34
| </Tabs.Panel> | ||
| <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled> | ||
| {lorem.paragraphs()} | ||
| <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled tabIndex={0}> |
Contributor
There was a problem hiding this comment.
What is the point of setting the tabIndex to 0 when the panel is disabled? It will never be 0.
balzss
force-pushed
the
INSTUI-4878_tabpanel_focus_issue
branch
from
c85cc9f to
c2b8253
Compare
…s control (defaults to 0 for backward compatibility)
ToMESSKa
approved these changes
Dec 23, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
INSTUI-4878
Summary
The component was hardcoding
tabindex="0"on all panels.According to WCAG guidelines, this should only be set when panels don't contain focusable elements, otherwise it creates unnecessary tab stops.
Adds optional
tabIndexprop toTabs.Panelto allow proper WCAG-compliant focus management.Developers can now set
tabIndex={-1}for panels with focusable content ortabIndex={null}to omit the attribute entirely.Changes
tabIndexprop toTabs.Panelto allow proper WCAG-compliant focus managementtabIndex?: number | nullprop (defaults to0for backwards compatibility)Test plan
On the documentation page, verify the correct focus handling of Tabs.Panel.
Co-Authored-By: 🤖 Claude