[Security:Rules:Detection Rules: MITRE ATT&CK® Coverage] Rules legend panel is not tabbable on MITRE ATT&CK® Coverage page

[bhavyarm]

Description
Rules legend panel is not tabbable on MITRE ATT&CK® Coverage page.

Preconditions
Security -> Rules-> MITRE ATT&CK® coverage page is open and Kibana has some rules

Steps to reproduce

1. Open MITRE ATT&CK® coverage page
2. Try to tab into Rules legends panel
3. Notice you cannot tab into that panel

Screen.Recording.2024-12-20.at.12.34.27.PM.mov

Kibana Version: 8.17.0

OS: OX X

Browser: Chrome latest

WCAG or Vendor Guidance (optional)

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

Related to: https://github.com/elastic/kibana-team/issues/1280

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[alexwizp]

@bhavyarm I agree that this issue seems important. While addressing the following issues https://github.com/elastic/security-team/issues/8616, we tried to make the container scrollable for keyboard users, which provides better access to the inner data.

On the other hand, I’m not sure if we should enable tab navigation for each item. Unfortunately, arrow navigation is currently only partially supported by EUI (limited to certain tables). If we activate tab navigation for this container, it might become problematic to exit the area, as users would need to press the Tab key many times.

@cee-chen jfyi

[bhavyarm]

@mgadewoll for your inputs as Cee doesn't work with us anymore :) Thanks!

[mgadewoll]

@bhavyarm @alexwizp I guess the question is what this element should do.

Looking at this I see it uses EuiFacetButton (I believe it's this file)
And here it changes the default button element to a span and it does not provide any onClick behavior or otherwise custom ARIA attributes either, meaning it's not interactive.

Based on this I'd think it's intended to be not interactive and then I'd say it does not need a tab stop. It's perceivable as regular content node in browse mode. The default underline on hover is confusing for a non-interactive element though, this could be overridden on Kibana side.

FYI, I also noticed that the heading hierarchy is kind of messy on this page 😅
We start with h1 and then go to h4 and h5 🎢

[alexwizp]

@bhavyarm / @mgadewoll let me plz summarise a bit our plan here:

1. even considering that the element is effectively interactive—since we display a tooltip when it is highlighted—we definitely do not want to make it accessible via the Tab key. This would complicate overall navigation on the page.
2. regarding the hierarchy of headings, I see no need for an h4 heading. I would reccomend replace it with a text.

[mgadewoll]

1. even considering that the element is effectively interactive—since we display a tooltip when it is highlighted—we definitely do not want to make it accessible via the Tab key. This would complicate overall navigation on the page.
2. regarding the hierarchy of headings, I see no need for an h4 heading. I would reccomend replace it with a ** text.**

---

1. It's only showing the title tooltip because it's (mis)using the EuiFacetButton which adds that title 😅 But in any case I agree, that a tab stop would not be useful here but rather complicate/confuse default navigation.

2. I would agree, that the legend doesn't need to be a heading. Imho, it could be if we want it to be discoverable/navigable via headings but it's subjective and would require user testing to know if that's actually helpful.
   For the rest of the page the heading levels need to be adjusted to pass expected rules though.