[Button]: accessibility issues related to the component
- 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
Assessment
This issue has not been assessed yet.