fix(Tabs): add ARIA attributes #4970
Conversation
This change adds ARIA attributes to `<Tab>` and `<TabContent>` to better describe their relationship. Fixes carbon-design-system#4968.
|
Deploy preview for the-carbon-components ready! Built with commit 7d0fbf7 https://deploy-preview-4970--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 7d0fbf7 |
|
Deploy preview for carbon-components-react ready! Built with commit 7d0fbf7 https://deploy-preview-4970--carbon-components-react.netlify.com |
| @@ -122,6 +127,7 @@ export default class Tab extends React.Component { | |||
|
|
|||
| render() { | |||
| const { | |||
| id, | |||
There was a problem hiding this comment.
Should we auto-generate this id if they don't supply one?
There was a problem hiding this comment.
Agreed that auto-generation is desirable, but couldn't see a way for <TabContent> generation code to get such auto-generated ID.
There was a problem hiding this comment.
Definitely understand, this is where some of our context experiments have taken us to help coordinate registering these ids.
There was a problem hiding this comment.
Right that we need some improvements in this area, I expect other approaches like render-props take into account for that.
| @@ -177,7 +184,8 @@ export default class Tab extends React.Component { | |||
| onKeyDown(evt); | |||
| }} | |||
| role="presentation" | |||
| selected={selected}> | |||
| selected={selected} | |||
| aria-controls={`${id}__panel`}> | |||
There was a problem hiding this comment.
Should this be on the a that has role="tab"?
| @@ -158,6 +164,7 @@ export default class Tab extends React.Component { | |||
|
|
|||
| return ( | |||
| <li | |||
| id={id} | |||
There was a problem hiding this comment.
Should this be on the a that has role="tab"?
|
@asudoh I'm not sure why but the changes are causing two new DAP violations: |
Co-Authored-By: emyarod <[email protected]>
asudoh
dismissed
joshblack’s stale review
All the review comments from the reviewer have been addressed or not adequate to put in this PR's scope.
|
Good catch @abbeyhrt! Fixed. |
|
@joshblack Just in case you have further comments. |
This change adds ARIA attributes to `<Tab>` and `<TabContent>` to better describe their relationship. Fixes carbon-design-system#4968.
This change adds ARIA attributes to
<Tab>and<TabContent>to better describe their relationship.Fixes #4968.
Changelog
New
aria-controlsto<Tab>.aria-labelledbyto<TabContent>.Testing / Reviewing
Testing should make sure React tabs component is not broken.