[ColumnsConfigurationModal]: accessibility issues related to the component

[mari-shakhanava]

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.

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".

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

Case №4 [FIXED]

Description

"Configure columns" modal does not have accessible name, so screen reader pronounces it just as "dialog".

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.

Actual result

Screen reader pronounces it just as "dialog"

Expected result

Provide an accessible name for the dialog using aria-labelledby attribute by referring to the "Configure columns" heading.

Failed SC: 4.1.2 Name, Role, Value (Level A)

Case №5

Description

Several accordions ("Pinned to the left", "Pinned to the right" and "Not pinned") in "Configure columns" modal do not have accessible states and roles, so screen reader pronounces them just as "clickable" and the appropriate 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) with launched screenreader.
2. Use T key to navigate to table.
3. Use the Tab key to navigate to [Open columns configuration modal] button.
4. Go through accordions with "Tab" key and try to collapse/expand them.

Actual result

Screen reader pronounces accordions just as "clickable" and the appropriate name without their roles and states.

Expected result

Their roles and states should be pronounced by screen reader as well (like "button" and "expanded"). https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Failed SC: 4.1.2 Name, Role, Value (Level A)

Case №6 [FIXED]

Description

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

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) with launched screenreader.
2. Use T key to navigate to table.
3. Use the Tab key to navigate to [Open columns configuration modal] button.
4. Open the dots menu (with "Clear all"/"Select all" buttons);
5. Try to close it via "Esc" button or via activating any button.

Actual result

The dropdown menu is not closed after activating any nested button, after pressing "Esc" key the whole modal is closed.

Expected result

Dropdown menu should be closed after pressing "Esc" button on keyboard.

Failed SC: 4.1.2 Name, Role, Value (Level A)