epam / epam/UUI

[Button]: accessibility issues related to the component

Open
#1,492 0 comments 0 reactions 0 assignees View on GitHub
A11y bug
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Case №1
### Description
Mobile view: "x" Close and "Done" buttons in "Person" dialog are not available using keyboard

### Precondition
Screen Reader is **OFF** or **ON**

### Steps to Reproduce
1. Open [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component in mobile view.
2. Use the `Tab` key to navigate to Picker combobox, press Enter key to expand it > "Person" dialog with options is opened.
3. Use the `Tab` key to navigate to "Done" button and observe.
4. Use the `Shift`+`Tab` key to navigate to "x" Close button and observe.

### Actual Result
"x" Close and "Done" buttons in "Person" dialog are not available using keyboard, so "Person" dialog cannot be closed from the keyboard and focus is trapped in "Person" dialog.

https://github.com/epam/UUI/assets/57751283/c0a423c1-e743-4e68-bf2b-1d5716e52b2d

### Expected Result
"x" Close and "Done" buttons in "Person" dialog should be reachable and operable using keyboard.
**Failed WCAG Checkpoint:** 2.1.1 Keyboard (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
2.1.2 No Keyboard Trap (Level A) https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html

## Case №2 moved to [2719](https://github.com/epam/UUI/issues/2719) ticket, case №1
### Precondition
Screen Reader is **OFF** or **ON**

### Steps to Reproduce
1. Proceed [Button](https://uui.epam.com/documents?id=button&mode=doc&skin=UUI3_loveship&category=components) component.
2. Use `Tab` key to navigate to Picker combobox, press `Enter` key to expand it.
3. Enter any symbol, e.g., "p" in Search field > [x] clear button in Search field is displayed.
4. Use the `Tab` key to navigate to [x] clear button and observe.

### Actual Result
[x] clear button in Search field is not available using keyboard.

https://github.com/epam/UUI/assets/57751283/07e4f874-c5bb-4f7f-88c3-2f3b5bd37b90

### Expected Result
[x] clear button in Search field should be focusable using `Tab` key from the keyboard, should have visible focus indicator when focused, and should have informative accessible name, e.g., "Clear". After activating [x] clear button focus should be set to Search field and screen reader should announce status message, e.g., "Cleared text".

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.