search

epam / UUI

React-based components and accelerators library built by EPAM Systems.
https://uui.epam.com/
MIT License
160 stars 61 forks source link

[Data Table]: accessibility issues related to the component #2320

Open mari-shakhanava opened 3 weeks ago

mari-shakhanava commented 3 weeks ago

Case №1

Description

Open columns configuration modal button has no accessible name.

Steps to Reproduce

  1. Open Data Table component with 'showColumnsConfig={true}', 'allowColumnsReordering={true}' props or Demo (Filtered table) (https://uui.epam.com/demo?id=table).
  2. Use T key to navigate to table.
  3. Use the Tab key to navigate to [Open columns configuration modal] button and note the announcement.

Actual result

2024-06-05_16h08_27

Expected result

Open columns configuration modal button should be announced with accessible name that clearly describes its purpose.

Failed WCAG Checkpoint: 4.1.2 Name, Role, Value (Level A) https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Case №2

Description

Keyboard navigation via Tab key does not work for interactive columns. Interactive columns in filtered table are not accessible via keyboard (it is impossible to navigate to columns' names via "Tab" key). Note: Alternative navigation via shortcut "t" + arrows works as expected.

Steps to Reproduce

  1. Open Data Table component with filtersConfig passed as prop or Demo (Filtered table) (https://uui.epam.com/demo?id=table).
  2. Use the Tab key to navigate to [Open columns configuration modal] button and note the announcement.

Actual result

https://github.com/epam/UUI/assets/70166849/dbcd343d-1ce6-4899-8b7f-d86f8eea711c

Expected result

Table's header should be accessible as well, because the majority of columns are interactive (there should be an opportunity to turn on sorting, to open filter dropdown without using a mouse).

Example of the correct behavior (navigation to sortable columns' names and visible focus): https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/

Case №3

Description

When User navigates via keyboard inside dropdown menus, there is no opportunity to navigate outside it via keyboard (focus traps within dropdown list).

Steps to Reproduce

  1. Open Data Table component with filtersConfig passed as prop or Demo (Filtered table) (https://uui.epam.com/demo?id=table).
  2. Open filter dropdown.
  3. Try to close it via "Esc" button.

Actual result

https://github.com/epam/UUI/assets/70166849/9d9496af-4ba4-4105-9782-a59ce07cfef5

Expected result

Pressing Esc key on any element of displayed listbox should close the listbox and move focus to the combobox.

Failed WCAG Checkpoint: 2.1.1 Keyboard (Level A) https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Case №4

Description

When User selects sorting direction in dropdown menu for any column, then there is no information about it for screen reader.

Steps to Reproduce

  1. Open Data Table component with filtersConfig passed as prop or Demo (Filtered table) (https://uui.epam.com/demo?id=table).
  2. Open filter dropdown.
  3. Select either "Sort ascending" or "Sort descending" item and note the announcement.

Actual result

table-sort There is no difference for screen reader either sorting item is selected or not.

Expected result

It should be clear for screen reader if any sorting direction is selected.

Case №5

Description

The Data Table does not have accessible name.

Steps to Reproduce

  1. Open Data Table component or Demo (Filtered table) (https://uui.epam.com/demo?id=table).
  2. Use T key to navigate to table and note the announcement.
  3. Use the Tab key to navigate to [Open columns configuration modal] button and note the announcement.

Actual result

2024-06-24_12h29_01 table-name

The table does not have accessible name. Aria-label is missed.

Expected result

The table has accessible name.

Example of the correct behavior: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/table/

Success Criterion 4.1.2 Name, Role, Value (level A).