-
Notifications
You must be signed in to change notification settings - Fork 1
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
Tabs technical design NDS-187 #5
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.
Great stuff. My only real concerns are about the value
prop.
accepted/0003-component-tabs.md
Outdated
|
||
### Tab | ||
|
||
`<Tab>` extends the `React.ComponentPropsWithRef<'button'>` interface with `role="tab"`, `aria-selected="true/false"` and `aria-controls="tab-ID"` (an autogenerated unique prefix might be needed to support the case were there are multiple tab components rendered at the same time and share tab names) attributes. The values for `aria-selected` and `aria-controls` should be calculated using the state delivered by the `Tabs` wrapper |
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.
Implementation note: we probably want https://wwnorton.atlassian.net/browse/NDS-22 to be done before we finalize this since the autogenerated ids should be generated by that solution.
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.
LGTM! Thanks for all your work on this.
I'm going to merge it but thought of one question that we can resolve during implementation: what should happen if the <TabList>
or <TabPanels>
containers aren't included? I assume they're required for styling.
For instance:
<Tabs>
<Tab>Cats</Tab>
<Tab>Dogs</Tab>
<Tab>Horses</Tab>
<TabPanel>Cats content</TabPanel>
<TabPanel>Dogs content</TabPanel>
<TabPanel>Horses content</TabPanel>
</Tabs>
Formatted file on https://github.com/wwnorton/design-system-rfcs/blob/tabs-juan/accepted/0003-component-tabs.md