elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.7k stars 8.12k forks source link

Accessibility - Cannot fully use keyboard to select and scroll on a Dashboard Text/Markdown panel #186559

Open rseldner opened 2 months ago

rseldner commented 2 months ago

Kibana version: 8.13.4 & 8.14.0

Elasticsearch version: 8.13.4 & 8.14.0

Browser version: Chrome - Version 126.0.6478.62 (Official Build) (x86_64)

Browser OS version: MacOS 13.6.7 (22G720)

Original install method: Elastic Cloud (ESS) and Elastic Cloud Enterprise (ECE)

Describe the bug: Text/Markdown panels lack the ability to focus on the element to scroll accessed with a keyboard.

Per EUI Guide (link), it seems it is missing tabindex for keyboard accessibility.

Consider adding a tabIndex for keyboard accessibility

Add a prop tabIndex=0 to the EuiResizableContainer if it is a fixed height or has a lot of content. This ensures keyboard users can set focus on the container and scroll to the bottom using arrow keys.

This is needed to meet accessibility requirements outlined by Section 508/WCAG 2.0:

Steps to reproduce:

  1. Add a Text Panel to a dashboard with the sufficient text and dimensions that would require scrolling to see the full content
  2. Use the keyboard to attempt to bring this element into focus to scroll with the keyboard

It is possible to scroll if you first click on the element, but you cannot do this with the keyboard alone.

Expected behavior: Element should be scrollable when only using a keyboard.

Screenshots (if relevant):

GIF illustrating how we can click on the element then scroll with the keyboard, BUT cannot tab to the element to then scroll Kapture 2024-06-20 at 09 38 14

elasticmachine commented 2 months ago

Pinging @elastic/kibana-visualizations (Team:Visualizations)

elasticmachine commented 2 months ago

Pinging @elastic/kibana-presentation (Team:Presentation)