[Stateful: Home page] Unclear grouping in Create an API key dialog

[L1nBra]

Description
All information is clear and understandable for the user on the webpage. When it is a group of elements, it should be clear what elements are inside the group and on which active element of the group (f.e.: 1 of 3) user is at the moment. It is especially important for the users using only keyboard, assistive technology.

Preconditions
Stateful Home page (Overview) is opened.
Use Screen Reader (NVDA).

Steps to reproduce

1.Navigate to New button while using only keyboard by pressing Tab key.
2.Press Enter.
3.Navigate while pressing Tab key to Name field.
4.Observe Screen reader announcement.

UI element Name input field

NVDA speech viewer

Actual Result

• Setup button text is being announced with word grouping, then Name field information.

Expected Result

• Either
  a)no grouping announcement in Screen reader
  or
  b)if all elements below Setup button are grouped (Name, User, Expires radio buttons, input field for days) - then it should be clearly defined as group and when navigating to the element inside the group it should clearly state on which element of the group user is at the moment (f.e.: 1 of 5).

Notes:
In Create an API key dialog when user navigates to Setup button while pressing Tab key on the keyboard, button is announced as expanded, but no information that it is in any group.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

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

Screen reader: NVDA

WCAG or Vendor Guidance (optional)

• Understanding SC 1.3.1: Info and Relationships (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)

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

[elasticmachine]

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

[alexwizp]

@L1nBra could you please revalidate that issue. It was probably fixed within #196133

[L1nBra]

Upon further investigation it was understood that the correct behavior should be like this:
when user navigates to the first element inside a group/region - firstly group/region details are announced and then the element itself on which user is at the moment (in this case when user navigates to Name field, firstly he/she hears region announcement, then the Name edit field - which is correct). When user press Tab to navigate to another field in group/region - then only the field is announced (without a group/region details).

Rechecked - working correctly.

NVDA Speech Viewer