[Stateful: Indices Overview page] Inaccurate navigation and checking for radio buttons

[L1nBra]

Description According to ARIA Authoring Practices Guide, focus should be on the checked radio button when the user reaches radio group while navigating using only keyboard. Also, user should move from one to another radio button when pressing up/down/left/right arrow keys. As of now, because all the time first radio button in the group receives focus, even if it is not checked, and common navigation is not working for it, it may cause confusion and could potentially lead users to unintentionally change their selection without checking all checkboxes which exist in the group.

Preconditions Stateful Indices Overview page is opened. Cloud ID radio button is checked.

Steps to reproduce

1.Navigate to Manage button using only keyboard by pressing Tab key. 2.Press Tab key. 3.Observe radio buttons. 4.Move between radio buttons while pressing up, down (left, right) arrow keys. 5.Observe radio buttons.

Gif showing issue

UI elements

Actual Result

• Focus is on the first radio button Elasticsearch Endpoint, pressing up/down arrow keys scroll down the page, pressing left/right arrows do nothing. Similar behavior when navigating from down to top while pressing Shift + Tab and if Elasticsearch Endpoint radio button is checked - focus is on Cloud ID radio button not on the checked one.

Expected Result

• Focus should go to the checked radio button, in this case Cloud ID. Pressing up/down/left/right arrow keys focus should move to another radio button and it should become checked while the other unchecked.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.101 (Official Build) (64-bit)

WCAG or Vendor Guidance (optional)

• Understanding SC 2.4.3: Focus Order (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)
• Understanding SC 2.1.1: Keyboard (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)

Relevant ARIA spec: Radio Group Pattern(https://www.w3.org/WAI/ARIA/apg/patterns/radio/)

Related to: https://github.com/elastic/search-team/issues/8256

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[L1nBra]

Similar to issue #195190 But this also has no action when pressing up/down/left/right arrow key - so registered as separate.

[daveyholler]

@radhapolisetty I've added this to the Search Experiences team project

[L1nBra]

Similar behavior observed on

• Connectors -> New connector page for radio buttons when adding Customized connector

UI elements

• Web Crawlers -> View Crawler -> Scheduling page for radio buttons.

UI elements