cengage
A11y: Docs examples -- duplicate IDs
There are a few a11y issues with some of the examples in the docs. These should be quick fixes just to the docs pages, not to the components themselves.
-
We have a few pages in the docs that have some duplicate IDs, so are throwing a11y errors. Pages include: -- Combobox -- Radio buttons -- Select -- Nav Tabs -- Search
-
On the Tables example we have some inputs without labels. These should be given (visually hidden) labels.
-
On the Cards page, we have an image without an alt attribute.
-
Some examples on the IconButtons page need adjusting. Under the sections sizes, shapes, and full-width there are a few examples that have the aria-label placed on the icon instead of on the button itself.
1Violations is still appears for:
- Navtabs>background-color
- Select>disabled
See Screencast : http://somup.com/c3611xvV6V
Thanks!
@Uditsingh67 Both of these things are expected and not a bug.
- NavTabs is just an example so it's okay that the contrast is not right.
- We expect the disabled state to not have sufficient contrast.
The a11y issues mentioned above are for the documentation site, not for storybook.
Hi @silvalaura Can you please share URLs for : Pages include: -- Combobox -- Radio buttons -- Select -- Nav Tabs -- Search
Hi @silvalaura Can you please share URLs for : Pages include: -- Combobox -- Radio buttons -- Select -- Nav Tabs -- Search
All those pages can be found in our documentation site: https://next--upbeat-sinoussi-f675aa.netlify.app/ -- Combobox: https://next--upbeat-sinoussi-f675aa.netlify.app/api/combobox/ -- Radio buttons: https://next--upbeat-sinoussi-f675aa.netlify.app/api/radio/ -- Select: https://next--upbeat-sinoussi-f675aa.netlify.app/api/select/ -- Nav Tabs: https://next--upbeat-sinoussi-f675aa.netlify.app/api/nav-tabs/ -- Search: https://next--upbeat-sinoussi-f675aa.netlify.app/api/search/
The issue is fixed: Pages include: -- Combobox : PASS -- Radio buttons : PASS -- Select : PASS -- Nav Tabs : PASS -- Search : PASS