[EuiStat] Description containing focusable elements causes accessibility tests to fail

[cjcenizal]

In https://github.com/elastic/kibana/pull/115121, I'm planing an EuiIconTip inside the description of EuiStat:

This causes our accessibility tests to fail:

   │ VIOLATION
   │   [aria-hidden-focus]: Ensures aria-hidden elements do not contain focusable elements
   │     Help: https://dequeuniversity.com/rules/axe/4.0/aria-hidden-focus?application=axeAPI

I believe this is due to https://github.com/elastic/eui/blob/master/src/components/stat/stat.tsx#L118, introduced in https://github.com/elastic/eui/pull/3693. From reading the discussion on that PR I couldn't follow the reasoning behind this decision -- maybe it was made in error? Either way, can we update this component to support arbitrary, focusable elements being passed to description?

[1Copenut]

Thank you for raising awareness on this issue @cjcenizal. Looking at your image, it appears the tooltip icons are focusable, and that's the source of the problem. I'm looking at the EuiStat component for ways to remove this error.

[cjcenizal]

Thank you for looking into this @1Copenut! That's correct, those EuiIconTip instances are focusable (and need to be), so it seems like EuiStat needs some adjustment to support this.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.