Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Search: Indices Overview page] Expandable code blocks are missing aria label or role #196339

Open
L1nBra opened this issue Oct 15, 2024 · 4 comments
Assignees
Labels
defect-level-3 Moderate UX disruption or potentially confusing impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Project:Accessibility Team:Search WCAG A WCAG AA

Comments

@L1nBra
Copy link

L1nBra commented Oct 15, 2024

Description
All accessible elements should be announced correctly for the users using assistive technology - to understand what element is active for them, what they can do with it.

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

Steps to reproduce

1.Navigate to code editor while using only keyboard by pressing Tab key.
2.Press TAB key.
3.Press Enter to expand code block.
4.Observe screen reader announcement

UI elements + html
Image

NVDA Speech Viewer
Image

Actual Result

  • Code block is in focus and announced as "clickable", following whole code announcement. Missing announcement that code editor was expanded.

Expected Result

  • Word clickable is not announced, but instead code editor element should be announced for the user to understand what element is active at the moment. Also announcement that code editor was expanded has to be made.

Notes:
Same when expanded with code blocks in sections:

  • Install a client;
  • Configure your client;
  • Test your connection;
  • Build your first search query.
    Only the difference is that they are not interactive when collapsed. Same behavior (announcement) when expanded.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

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

Screen reader: NVDA

WCAG or Vendor Guidance (optional)

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

@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 15, 2024
@L1nBra L1nBra added WCAG A WCAG AA Team:Search defect-level-3 Moderate UX disruption or potentially confusing labels Oct 15, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 15, 2024
@L1nBra L1nBra added the impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. label Oct 17, 2024
@L1nBra
Copy link
Author

L1nBra commented Oct 18, 2024

Same behavior observed on

  • Indices -> Pipelines page.
    When user is in Add an inference pipeline 4 step, Review your pipeline configuration code block information is instantly announced upon reaching it with keyboard navigation. No mentioning that it is a code block. And if user expands it then it is announced as "clickable dialog
    clickable" following the code.

NVDA Speech Viewer
Image

UI elements
Image

@daveyholler
Copy link
Contributor

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

@L1nBra L1nBra changed the title [Stateful: Indices Overview page] Expandable code blocks are missing aria label or role [Search: Indices Overview page] Expandable code blocks are missing aria label or role Nov 7, 2024
@sphilipse sphilipse self-assigned this Nov 14, 2024
@sphilipse
Copy link
Member

This is inherent to the EUI code block component and not something we can directly fix. I'll ask the EUI team if they have space to take this item and can prioritize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
defect-level-3 Moderate UX disruption or potentially confusing impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Project:Accessibility Team:Search WCAG A WCAG AA
Projects
None yet
Development

No branches or pull requests

5 participants