Closed alexwizp closed 3 months ago
Option 1 should already be fully achievable via ...rest
spread, e.g. <EuiBetaBadge role="presentation" />
or even role={undefined}
.
Option 2 should not be necessary as the tab itself is not rendering a beta badge directly, it's using an append
or prepend
API where the consumer is rendering <EuiBetaBadge />
themselves and needs to apply the correct role
type. Example:
https://codesandbox.io/p/sandbox/holy-surf-4cj9kk?file=%2Fdemo.js%3A30%2C7
I will note that if these tabs are using the toolTipContent
prop on EuiBetaBadge and isn't just rendering text/icons, then something else needs to be done because that tooltip will not be keyboard accessible. We'll need to add a toolTipContent
/toolTipProps
on the entire EuiTab component/object.
@cee-chen Thank you for your answer. I've checked the EUI code, and I have a quick question about the role=button
attribute. Not sure that we need it for that case. The element is not actually a button/link, and I'm considering removing the attribute. If you're okay with this change, I can create a PR to remove it.
role="button"
and tabIndex={0}
is meant to be there for scenarios where tooltipContent
exists, so that keyboard users can tab to it to trigger the tooltip. I had previously thought the button role was helpful to indicate tab-ability, is that not correct? If not, I'm fine removing it.
Related to: https://github.com/elastic/observability-dev/issues/3410
We have an issue with using
EuiBetaBadge
withinEuiTab
. The AXE plugin triggers a problem:interactive controls must not be nested.
I need your guidance on how to correctly use
EuiBetaBadge
withinEuiTab
. I couldn't find a good way to fix this with the existing API. Here are my thoughts on how we can address it:EuiBetaBadge
props to allow overriding therole="button"
attribute.EuiTab
API to includebetaBadgeProps
. This would allow us to handle it more natively, similar to how it's done with EuiCards and EuiKeyPadMenuItems.I vote for option number 2