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

[ColumnsConfigurationModal]: accessibility issues related to the component #2365

Open mari-shakhanava opened 1 week ago

mari-shakhanava commented 1 week ago

Case №1

Description

[CLEAR] button in search input is not available using keyboard

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.
  4. Use the Tab key to navigate to the search input and type anything.
  5. Use the Tab key to navigate to [CLEAR] button.

Actual result

[CLEAR] button in the search input is not available using keyboard.

https://github.com/epam/UUI/assets/70166849/85b22f37-fb2e-4152-9e02-83c4860722af

Expected result

[CLEAR] button in the search input should be available using Tab key from the keyboard and should have a clear visible focus indicator.

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

Case №2

Description

Impossible to reorder items in the list of columns using keyboard.

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.
  4. Try to reorder items in the list of columns using keyboard.

Actual result

The items are not accessible via keyboard. 2024-06-17_09h57_10

Expected result

The items should be accessible via keyboard.

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

Case №3

Description

Several items do not have accessible name and as a result screen reader pronounces them just as "button" without any information about the goal of the button.

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.
  4. Use the Tab key to navigate to [...] and [Pin column] buttons and note the announcement.

Actual result

The button is announced without accessible name just as "button".

config-columns-modal-1 config-columns-modal-2

Expected result

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