[EuiBetaBadge] Improved the accessibility experience of EuiBetaBadge component

[alexwizp]

Closes: #7791

Summary

Remove role=button for cases when the user doesn't provide an onClick or href attribute. In that mode, the component only shows the tooltip

[cee-chen]

The role=button attribute does not look correct for this case because, in fact, the user did not pass href or onClick attributes.

Just to confirm my understanding of this role, it only applies for click events? I assumed it was there because the tooltip applies a focus event (the tooltip shows on keyboard focus). Is that not sufficient for a button role?

[alexwizp]

@cee-chen, it's a good question. In my understanding, no, and it's in line with what we already have in EuiIconTip.
Actually, this component behaves like a regular tooltip, whose main event is an action on hover. Adding tabIndex for opening it via the keyboard does not make it a button. On the other hand, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role things are not so straightforward.

@dave-gus, do you have any ideas here?

[cee-chen]

Ooo actually the MDN link is super helpful, I probably should have just looked that up first! Thank you Alexey!

Note: If using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and define event handlers for click and keydown events

The tooltip triggers do not have click/keydown handles, only focus, so IMO that does qualify them as not fully buttons. Let's go ahead and make this change. Also great point that EuiIconTip doesn't behave this way!

[cee-chen]

🚀 Thanks again for the amazing a11y discussions and contributions Alexey!

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7805/
• Storybook: https://eui.elastic.co/pr_7805/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: c4c1a72

History

• 💚 Build #2072 succeeded 75dab22
• 💔 Build #2071 failed 1953c20
• 💔 Build #2070 failed 280bfc2