[PickerInput]: accessibility issues related to the component

[NatalliaAlieva]

Case №1

Description

Mobile: Focus doesn't move to the opened dialog after Picker combobox opening.

Precondition

Screen Reader (TalkBack on Android) is ON

Steps to Reproduce

1. Open Button component.
2. Use the swipe gesture to navigate to Picker combobox, double tap to expand it > "Person" dialog with options is opened, observe the focus placement.

Actual Result

When Picker combobox is activated focus doesn't move to the opened dialog with options.

Button.Mobile.only.Focus.doesn.t.move.to.the.opened.dialog.after.Picker.combobox.opening.mp4

NOTE: reproducible using Bluetooth keyboard.

Expected Result

When Picker combobox is activated, focus should be set to the "x" Close button in opened dialog with options. Screen reader should announce the role "dialog", name "Person" and currently focused Close button.
Failed WCAG Checkpoint: 2.4.3 Focus Order (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Case №2 - moved to 2719 ticket, case №1

Description

[CLEAR] button in single select combobox is not available using keyboard

Precondition

Screen Reader is OFF or ON

Steps to Reproduce

1. Proceed Picker Input component.
2. Use the Tab key to navigate to the Single select combobox and select any option.
3. Use the Tab key to navigate to [CLEAR] button.

Actual Result

[CLEAR] button in expanded single select combobox is not available using keyboard.

Picker.Input.Clear.button.in.single.select.combobox.is.not.available.using.keyboard.mp4

NOTE: Reproducible for [SELECT ALL] button of "Persons" comboboxes in Search positions section, "Start type city name for search" and "Custom toggler" comboboxes in Picker toggler configuration and options section.

Expected Result

[CLEAR] button in expanded single select combobox should be available using Tab key from the keyboard and should have a clear visible focus indicator.

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

Case №3

Description

When "Persons" combobox in Lazy list section is opened, pressing Tab key moves focus to the beginning of the page

Precondition

Screen Reader is ON or OFF

Steps to Reproduce

1. Proceed Picker Input component.
2. Use the Tab key to navigate to "Persons" combobox in Lazy list section and press Enter key to expand listbox.
3. Press the Tab key and observe the focus placement.

Actual Result

Pressing Tab key moves focus to the beginning of the page. (Note - not reproduced in Safari )

Picker.Input.When.Persons.combobox.in.Lazy.list.section.is.opened.pressing.TAB.key.moves.focus.to.the.beginning.of.the.page.mp4

Expected Result

Pressing Tab key should close listbox and set focus either to the next focusable element on a page or on collapsed "Persons" combobox.
NOTE: applicable to all comboboxes that do not have TAB-focusable elements in listbox.

Failed WCAG Checkpoint: Focus Order (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Case №4

Description

Opened listbox can be closed using Esc key only if focus is placed in Search field

Precondition

Screen Reader is OFF or ON

Steps to Reproduce

1. Proceed Picker Input component.
2. Use the Tab key to navigate to the combobox and press Enter key to expand it.
3. Use the Tab key to navigate to [Show only selected] switch, press Esc key and observe.
4. Use the Tab key to navigate to [Clear All] button, press Esc key and observe.
5. Use Shift+Tab key to navigate to Search field, press Esc key and observe.

Actual Result

Opened listbox can be closed using Esc key only if focus is placed in Search field.

Picker.Input.Opened.listbox.can.be.closed.using.Esc.key.only.if.focus.is.placed.in.Search.field.mp4

Expected Result

Pressing Esc key on any element of displayed listbox should close the listbox and move focus to the combobox.

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

Case №5

Description

Once a list option is selected, it is not possible to deselect it or select another option using the keyboard for pickers w/o search

Precondition

Screen Reader is OFF or ON

Steps to Reproduce

1. Proceed Picker Input component.
2. Use the Tab key to navigate to the Person combobox in Search positions section and press Enter key to expand it.
3. Use the down arrow key to navigate to any option, press Esc key to select it.
4. Use the down arrow key to focus another option and observe.

Actual Result

When any list option is selected, it is not possible to move keyboard focus to another option or deselect selected option from the keyboard.

Picker.Input.Once.a.list.option.is.selected.it.is.not.possible.to.deselect.it.or.select.another.option.using.the.keyboard.mp4

Expected Result

After selecting any list option keyboard focus should remain on this option, pressing Enter key from the keyboard should unselect/select it, pressing down/up arrow key should move focus to next/previous option.

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

Case №6

Description

It is not possible to select parent item option from the tree list using keyboard

Precondition

Screen Reader is OFF or ON

Steps to Reproduce

1. Proceed Picker Input component.
2. Use the Tab key to navigate to the Flatten search results combobox and press Enter key to expand it.
3. Use the down arrow key to navigate to any parent item option, press Esc key to select it and observe.

Actual Result

Selecting parent item option is possible only using mouse. When any parent item option is focused, it is not possible to select it, pressing Enter key expand it.

Picker.Input.It.is.not.possible.to.select.parent.item.option.from.the.tree.list.using.keyboard.mp4

Expected Result

All functionality, including parent item option selection should be available using keyboard only.
Failed WCAG Checkpoint: 2.1.1 Keyboard (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Case №7 - verified

Description

Incorrect focus order after opening and closing dialog, focus is not trappen in dialog

Precondition

Screen Reader is ON or OFF

Steps to Reproduce

1. Proceed Picker Input component.
2. Use the Tab key to navigate to "Click to open" button.
3. Press Enter key to activate "Click to open" button and observe the focus placement.
4. Use the Tab key to navigate through interactive elements in dialog and observe the focus placement.
5. Use the Tab key to navigate to "Cancel" button, press Enter key and observe the focus placement.

Actual Result

After opening the dialog focus dosen't move to the dialog, after closing dialog focus doesn't return to the triggered element, focus is not trapped in dialog.

Picker.Input.Incorrect.focus.order.after.opening.and.closing.dialog.focus.is.not.trappen.in.dialog.mp4

Expected Result

After opening the dialog focus should move to the dialog, after closing dialog focus should return to the triggered element "Click to open" button, focus should be trapped in dialog.
Failed WCAG Checkpoint: 2.4.3 Focus Order (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Case №8 - fixed

Description

An inappropriate aria-haspopup attribute.

Precondition

Screen Reader is ON or OFF

Steps to Reproduce

1. Open PickerInput component.
2. Inspect any example with DevTool.
3. Find aria-haspopup attribute.

Actual Result

Picker Input has aria-haspopup="true" attribute.

Expected Result

Picker Input opens a dialog after activation. Therefore, the corresponding ARIA attribute should be aria-haspopup="dialog".

Failed WCAG Checkpoint: 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

[mari-shakhanava]

Case №9

Description

When User search for any not suitable for any item text in the "Search" field in dropdown with launched NVDA, then "No records found" search result message is displayed, but it is not announced by screen reader.

Precondition

Screen Reader is ON

Steps to Reproduce

1. Open PickerInput component.
2. Type any not suitable for any item text in the "Search" field;
3. Note the announcement.

Actual Result

https://github.com/user-attachments/assets/743c21ea-4d81-4cbb-9325-ca23c93117ba
"No records found" search result message is not announced.

Expected Result

The status message about search result should be announced.

Failed SC:
4.1.3 Status Messages (Level AA)

Case №10

Description

Listbox items are not semantically grouped, which prevents screen readers from conveying group information and position of items within the group.

Precondition

Screen Reader is ON

Steps to Reproduce

1. Open PickerInput component.
2. Using keyboard navigate through items in dropdown menu via keyboard;;
3. Note the announcement.

Actual Result

The screen reader only announces the label of the currently focused item. It does not announce information about the item's group, its position within the group, or the group name.

Expected Result

Screen reader should pronounce serial number of focused item and total amount of items in group (e.g. 1 of ...)as well as the listbox/group name

This behavior is recommended by ARIA practices:
https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/

Failed WCAG checkpoints:
1.3.1 Info and Relationships (Level A)

Case №11

Description

While trying to navigate through PickerInput dropdown list with launched NVDA, then despite the dropdown is opened the focus goes to next elements under it.

Precondition

Screen Reader is ON

Steps to Reproduce

1. Open PickerInput component.
2. Using keyboard navigate through items in dropdown menu via keyboard (with launched NVDA tool);
3. Note the announcement.

Actual Result

2025-07-09_11h44_46.mp4

Focus goes under the dropdown.

Expected Result

It should be possible to interact with dropdown, navigate through items (e.g., via pressing arrow keys) and select.
Note: If NVDA is not launched the behavior is correct.