[A11y]: clickable elements inside controls are not available from keyboard

[NatalliaAlieva]

Case №1

Description

The clear button [x] inside certain controls is not accessible via keyboard navigation. This issue is observed in the following components: Date Picker, Range Date Picker, Picker Input, Search Input, Tag, Text Input, Time Picker.

The reproduction steps below are provided for the Date Picker component as an example.

Steps to Reproduce

1. Open Date Picker component.
2. Select any date.
3. Use Tab/Shift+Tab key to navigate to the field with selected date.
4. Use Tab/Shift+Tab key to navigate to the [x] button.

Actual result

[x] button is not accessible from the keyboard.

Screen.Recording.2025-01-09.at.21.56.36.mov

Expected result

[x] (remove date) button in the Date Picker should be accessible from the keyboard, should have visible focus indicator and should have accessible name, e.g., Remove date.

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

Case №2

Description

Clickable icons (onIconClick) inside certain controls are not accessible via keyboard navigation. This issue is observed in the following components: Badge, Picker Input, Search Input, Tag, Text Input.

The reproduction steps below are provided for the Badge component as an example.

Steps to Reproduce

1. Open Badge component.
2. Navigate to the Property Explorer tab.
3. In the icon property select any icon.
4. Set onIconClick = callback.
5. Use Tab/Shift+Tab key to navigate to the badge.
6. Use Tab/Shift+Tab key to navigate to the clickable icon.

Actual result

The clickable icon is not accessible via keyboard navigation.

Screen.Recording.2025-01-09.at.21.55.10.mov

Expected result

The clickable icon should be accessible from the keyboard, should have visible focus indicator and should have accessible name, e.g., Action Icon

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

Note

For all components not described in the steps, a video demonstrating the issue is attached in the comments.

Case №3

Description

In the Picker Input component, users cannot navigate into the selected values using a keyboard.

Steps to Reproduce

1. Open Picker Input component.
2. Select any English level(s).
3. Use Tab/Shift+Tab key to navigate to the field with selected value(s).

Actual result

Selected items are not accessible via keyboard navigation in the Picker Input.

Screen.Recording.2025-01-15.at.11.07.55.mov

Expected result

Users should be able to navigate into the selected values using keyboard navigation and interact with them.

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

[NatalliaAlieva]

1. Range Date Picker — [Clear Button Issue]

Screen.Recording.2025-01-09.at.21.57.22.mov

2. Picker Input — [Icon Click Issue], [Clear Button Issue]

Screen.Recording.2025-01-09.at.21.59.04.mov

3. Search Input — [Icon Click Issue], [Clear Button Issue]

Screen.Recording.2025-01-09.at.22.01.45.mov

4. Tag — [Icon Click Issue], [Clear Button Issue]

Screen.Recording.2025-01-09.at.22.04.08.mov

5. Text Input — [Icon Click Issue], [Clear Button Issue]

Screen.Recording.2025-01-09.at.22.10.34.mov

6. Time Picker — [Clear Button Issue]

Screen.Recording.2025-01-09.at.22.12.06.mov