[Stateful: Home page] Not accessible element, showing number of active API keys, via keyboard

[L1nBra]

Description User can create new API keys and the number of created (active) keys is shown on the page. However, for the user using only keyboard, screen reader - this number is inaccessible and the uses who cannot see, won't be able to see/understand how many active API keys he/she already has.

Preconditions Stateful Home page (Overview) is opened.

Steps to reproduce

1.Navigate to New button while using only keyboard by pressing Tab key. 2.Press Enter. 3.Navigate to the Name input field. 4.Fill in any name (Test). 5.Navigate to Create API key button. 6.Press Enter key. 7.Press Esc key. 8.Refresh the page (pressing F5). 9.Navigate to active API keys element using only keyboard.

Active API keys number

Actual Result

• Active API keys number gets updated, but the user can only see it visually. It cannot be reached via keyboard.

Expected Result

• For the user it should be understandable that changes happened and the user should be able not only to see them but also access in different ways. Either user can navigate to the number using keyboard, screen reader and hear it as well or at least user should be informed about the change with a message which would be pronounced for user or user could access it and understand about changes.

Notes When creating new API key, number on the Overview page only changes if user refreshes the page. Without refresh - it stays 0.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

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

WCAG or Vendor Guidance (optional)

• Understanding SC 2.1.1: Keyboard (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)

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

[elasticmachine]

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

[L1nBra]

Blocked by EUI issue #8064

[L1nBra]

Same behavior observed on

• Indices Overview page

UI elements

[alexwizp]

@cee-chen / @bhavyarm, could you please validate this issue? I'm not sure if the badge should be keyboard accessible. On the other hand, I think it might make sense to move active API keys inside the badge. However, this is more of a design question rather than an a11y one.

[alexwizp]

Just see how it looks in screenreader. I think we should read 0 + active API keys together

https://github.com/user-attachments/assets/da727d98-c36b-4142-91e0-723dbaf9d328

[cee-chen]

Agreed, I would suggest adding an <span aria-label="0 active API keys"> wrapper around the actual text so that it reads more smoothly to screen readers.

I think the number is intentionally inside the badge as a design decision, so it's just a question of smoothing over that design decision for screen readers.