carbon-design-system / carbon-addons-iot-react

A collection of React components shared between IBM Maximo Asset Monitor (Watson IoT), IBM Maximo Visual Inspection, and Graphite products.
https://carbon-design-system.github.io/carbon-addons-iot-react/
Apache License 2.0
96 stars 78 forks source link

[Table] provide default aria-labels, fix accessibility violations listed in storybook #1437

Open tay1orjones opened 4 years ago

tay1orjones commented 4 years ago

Describe the bug

From Internal Watson-IoT/pal-tracking#338 from @JordanWSmith15

Graphite storybook: https://pages.github.ibm.com/maximo-app-framework/graphite/react/storybook/?path=/story/components-%E2%98%A2-table--datasource-table

In the Knobs section, at the bottom, enable the "View Manager Dropdown" checkbox Go to the "Accessibility" tab to scan Result: 4 violations These violations are not reproducible in the IoT data table, because they are caused by a combination of knobs that are not reproducible there. However, these issues cannot be fixed in Graphite, as they are coming from the IoT table Screen Shot 2020-03-23 at 10 14 00 AM

tay1orjones commented 4 years ago

My response from the internal issue:

It looks like the a11y errors change based on when you open the a11y tab. On initial render without interacting with the table, the following 2 items are listed:

  1. Buttons must have discernible text image
  2. All cells in a table element that use the headers attribute must only refer to other cells of that same table image

I see four items if I open the column picker first and then select the a11y addon tab. It looks like we're just not providing sensible defaults for some of these elements. Carbon provides props for much of the ARIA items. We'll need to dig in to make sure, but I think these are easily resolvable.

tay1orjones commented 4 years ago

We also can investigate the meaning of Critical, Serious, and Minor labels and how they correspond to WCAG AA vs AAA or similar.