[Stateful: Home page] Space bar key activates incorrect element.

[L1nBra]

Description Same type elements should have consistent behavior. As of now, some buttons, links for the user using keyboard and pressing Space bar key behaves the same way as pressing Enter key (opens new window, or browser tab), while others don't activate any action, but the page scrolls down.

Preconditions Stateful Home page (Overview) is opened.

Steps to reproduce

1.Using only keyboard Navigate to the link Learn more about Elastic Stack licenses. 2.Press Space key (space bar).

Link

Actual Result

• Webpage scrolls down (scroll bar on the right moves down).

Expected Result

• When pressing space bar element gets activated the same way as pressing Enter key - new window opens, or nothing should happen.

Notes Same behavior with elements:

• Learn more
• Explore Search Applications
• Explore Behavioral Analytics
• Tutorials
• Notebooks & Examples
• Learn how to structure role descriptions (link in Create an API key dialog)
• Learn how to structure role metadata (link in Create an API key dialog)

Important: for the elements below, this behavior happens when navigating with keyboard, while pressing Tab key. First time button gets focus visible and bold underline under the text appears - press space bar (if you press Tab key while focus is on the button and only then spacebar - it works the same way as Enter key (correctly)).

• Create API index
• Crawl Url
• Create a connector
• Browse clients

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]

Added few elements to which the same behavior applies.

[alexwizp]

@L1nBra I think this is a somewhat deeper issue. Yes, there is indeed a certain difference in the behavior of the browser when pressing the spacebar on Button elements and A(link) elements. This is actually what we see in your screenshot.In the case of a link, pressing the spacebar scrolls the page, while in the case of a button, the onClick event is triggered.

I would say this could be discussed in the context of EUI. But I don't think it's something we should update.

@cee-chen what do you think?

[cee-chen]

Yeah, this behavior is inherent to how <a> vs <button> behaviors work at a browser level, and changing it would have far-reaching impacts. I don't love the idea of EUI interfering with how browsers natively handle links.

[alexwizp]

Not an issue, correct browser behaviour