-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(TabBar): accessibility improvements for TabBar & Tab #1468
feat(TabBar): accessibility improvements for TabBar & Tab #1468
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the code looks good - could you add tests to cover the new scenarios. You can use add e2e if you can, but it might be easier to add unit tests for these new scenarios.
Also add a storybook story for the overflow scenario.
The storybook story is already included here, Do you suggest to add a separate one for the overflow ? |
Yes, I mean to add a story for the overflow scenario
|
ah ok .. yeah then that's fine. No need to add anything. |
🚀 Deployed on https://pr-1468--dhis2-ui.netlify.app |
aa28c70
to
4841273
Compare
Implements LIBS-557
Description
TabBar has role="tablist"
Tab has role="tab"
selected
prop maps toaria-selected
disabled
prop maps toaria-disabled
TabBar acts as a composite component, a user can tab to TabBar
A user can use left/right arrow keys to move between Tab components.
Pressing the left/right arrow keys will cycle back to the first or last tab, ensuring continuous navigation.
Moving to a Tab activates it.
Tab components with overflowing labels displays a Tooltip with full label on hover and focus.
Known issues
When pressing the Tab key the focus go to the first
Tab
component regardless of theselected
prop.Tabs with
disabled
prop can be tabbed into.Checklist