epam / epam/UUI

[PickerInput]: accessibility issues related to the component

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

Description

## Case №1

### Description
With NVDA enabled, keyboard navigation in PickerInput (**selectionMode: 'single'**) does not work correctly: it is not possible to navigate through the dropdown options or select them, and the screen reader does not announce the available options.

### Precondition
Screen Reader is ON

### Steps to Reproduce
1. Open [PickerInput (selectionMode: 'single')](https://uui.epam.com/documents?id=pickerInput&mode=doc&category=components&theme=loveship#:~:text=Property%20Explorer-,Picker%20Input,-Picker%20Input%20is) component.
2. Using keyboard navigate through items in dropdown menu via keyboard (with launched NVDA tool);
3. Note the announcement.

### Actual Result

https://github.com/user-attachments/assets/88d70cca-62c6-472e-ba76-4b30b6377fc4

### Expected Result
It should be possible to interact with dropdown, navigate through items (e.g., via pressing arrow keys) and select. Currently, this **works correctly for the multiselect** PickerInput, but not for selectionMode: 'single'.
_Note: If NVDA is not launched the behavior is correct._

### Environment
* UUI version: 6.4.4

## Case №2

### Description
PickerInput with Lazy Data Source announces incorrect item position to screen reader.
Related to: [Case #10](https://github.com/epam/UUI/issues/1506) (Listbox items are not semantically grouped — partially fixed).

After the fix for Case 10, the screen reader now correctly announces item position within a listbox (e.g., "1 of 20"). However, for PickerInput backed by a LazyDataSource (lazy-loaded/paginated lists), the total count used for the announcement is calculated from the current batch size rather than the actual total number of items.
As a result, the announced position resets relative to each newly loaded batch:

- Batch 1: "1 of 20", "2 of 20", …, "20 of 20"
- After scroll/next batch: "21 of 40", "22 of 40", …, "40 of 40"
- After next batch: "41 of 60", …

This gives the user a false impression of the total list size and makes navigation confusing.

### Precondition
1. Screen Reader is ON (e.g., NVDA + Chrome, or VoiceOver + Safari)
2. A page with [PickerInput backed by LazyDataSource](https://uui.epam.com/documents?id=pickerInput&mode=doc&category=components&theme=loveship#pickerInput-LazyPickerInput:~:text=Lazy%20list,-You%20can%20achieve) is open

### Steps to Reproduce
1. Open a PickerInput with a LazyDataSource that returns paginated results (batch size e.g. 20).
2. Enable a screen reader (NVDA + Chrome or VoiceOver + Safari).
3. Open the picker dropdown.
4. Navigate through items using ↓ / ↑ keyboard keys — note the announced position ("X of Y").
5. Scroll down to trigger loading of the next batch.
6. Continue keyboard navigation — note the announced total has changed to reflect only the accumulated loaded items, not the real total.

### Actual Result

https://github.com/user-attachments/assets/5541487a-55f1-49ae-b861-364f609a9420

Currently aria-setsize is set to the count of loaded items, which is incorrect and misleading.
Failed WCAG checkpoints:
[1.3.1 Info and Relationships (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships)

## Expected Result
The aria-setsize attribute on listbox option elements should reflect either:

- The actual **total count of** items (if returned by the API response as totalCount)
- Or -1 if the total is unknown at load time, per [WAI-ARIA specification](https://www.w3.org/TR/wai-aria-1.1/#aria-setsize:~:text=in%20the%20set.-,If%20the%20total%20number%20of%20items%20is%20unknown%2C%20authors%20SHOULD%20set%20the%20value%20of%20aria%2Dsetsize%20to%20%2D1,-.):

> "If the total number of items is unknown, set aria-setsize to -1."

## Environment
* UUI version: 6.4.4

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.