Badge is inaccessible for keyboard, screen reader users

[L1nBra]

Description Badge, containing information which can change, is not accessible for the user using only keyboard, screen reader. The user who cannot see, won't be able to see/understand what information is present on the badge.

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.

Environment

• Windows 11 Pro
• Chrome Version 129.0.6668.70 (Official Build) (64-bit)
• Screen Reader NVDA
• Cloud, QA environment

Proposed solution

Element should be defined with using attributes: role, name, value, for user to be able to access it.

and it should be imported as per Elastic UI component for badge demo code snippet:

import React, { Fragment, useState } from 'react';
import {
  EuiBadge,
  EuiFlexItem,
  EuiFlexGroup,
  EuiSpacer,
  EuiSwitch,
  EuiText,
  EuiTitle,
} from '@elastic/eui';
...

WCAG or Vendor Guidance (optional)

• WCAG 2.1.1 Success Criteria(https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)
• WCAG 4.1.2 Success Criteria(https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)

Screenshots or Trace Logs

Badge on the webpage + html used to define it

Created from Stateful Search issue #195209

[cee-chen]

@L1nBra We need more clarification as to what you mean by "inaccessible". If the badge is not an interactive element/button and isn't clickable, then it's fully expected it's not reachable via just keyboard alone. Screen reader users however should fully be able to navigate to via standard screen reader navigation methods.

CC @alexwizp - any chance you can step in and help triage as to whether this is an issue in EUI?