epam / epam/UUI

[Badge]: accessibility issues related to the component

Open
#1,463 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
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

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.