[Badge]: 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
Listbox options in "In Progress" dropdown are not available using keyboard
### Precondition
Screen Reader is **ON** OR **OFF**
### Steps to Reproduce
1. Open [Badge](https://uui.epam.com/documents?id=badge&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to the "In Progress" dropdown.
3. Press `Space`/`Enter` key to expand the listbox.
4. Try to navigate through the items using `Down`/`Up` arrows
5. Try to close listbox using `Escape` key.
### Actual Result
Dropdown options in "In Progress" dropdown are not available using keyboard.
https://github.com/epam/UUI/assets/57751283/209a0de2-6c0b-4f13-a771-8920b908ee44
### Expected Result
Pressing `Up`/`Down` should move the visual focus to the Previous/Next option. Pressing `Escape` key on displayed listbox should close the listbox and move focus to the combobox.
**Reference for implementation:** https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
**Failed WCAG Checkpoint:** 2.1.1 Keyboard (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
## Case №2
### Description
Non-interactive text badges are focusable using `Tab` key from the keyboard - iOS only.
### Precondition
Screen Reader is **OFF** OR **ON**
### Steps to Reproduce
1. Open [Badge](https://uui.epam.com/documents?id=badge&mode=doc&skin=UUI4_promo&category=components) component.
2. Use the `Tab` key to navigate to each non-interactive text badge and observe.
### Actual Result
Non-interactive text badges are focusable using `Tab` key from the keyboard.
https://github.com/epam/UUI/assets/57751283/09068b66-0c85-4e94-bf6a-e7e3fbed27a2
### Expected Result
Only interactive elements should be focusable using `Tab` key from the keyboard.
**Failed WCAG Checkpoint:** 2.4.3 Focus Order (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
Contributor guide
Assessment
This issue has not been assessed yet.