EuiStepsHorizontal tooltip

[AnnaKuhir]

Is it possible for us to get rid of the tooltip when hovering over the step button? (attached screenshot)

Since I did not find a prop that could provide us with this

Thanks!

[cee-chen]

It looks like that OS tooltip is coming from the title attribute on the button. It might be worth investigating the accessibility of the title attr and if it causes screenreaders to duplicate readouts and prefer an EuiScreenReaderOnly if so. CC @1Copenut for thoughts

[cchaos]

This component has already undergone rigourous a11y testing which was done in this PR: #4135

The title attribute helps users understand what the indicators above the step name mean. They exist only on long pause of the element and only serves to duplicate understanding into a full sentence.

@AnnaKuhir Can you explain why you would need this removed?

[AnnaKuhir]

This component has already undergone rigourous a11y testing which was done in this PR: #4135

The title attribute helps users understand what the indicators above the step name mean. They exist only on long pause of the element and only serves to duplicate understanding into a full sentence.

@AnnaKuhir Can you explain why you would need this removed?

We are developing a web application that needs internationalization. The title attribute, as I understand it, is generated under the hood (that is, it takes the step number: "Step 1" (for example), then the title of the step: "Completed step 1" and, if we have already passed this step, adds "is completed" at the end "). As a result, we get "Step 1: Completed step 1 is completed". And if I can translate the title of the step into some language, then "Step 1" and "is completed" can't.
I may not get rid of this tooltip, but in this case, it would be a solution to be able to change the text of the tooltip, that is, the value of the title attribute in the button

[cee-chen]

Would providing i18n tokens for the title strings also solve your use case?

[cchaos]

These should already all have i18n tokens: https://github.com/elastic/eui/blob/main/src/components/steps/step_strings.tsx

[cee-chen]

Whoops, totally missed that, thanks Caroline! @AnnaKuhir, you should be able to translate all text in the tooltip using your i18n library of choice.

[1Copenut]

Thank you for the ping on this issue. After talking with Constance, Caroline and Dave, the original question seems well served by adding i18n tokens to the title strings.

Long-term, it would be best if vendors built keyboard functionality to show title text as they do when users hover over a link or button with a mouse. I found open issues for Chrome, Firefox, and WebKit, so there's interest if not bandwidth to make that change:

• Chrome - Issue 829352: Make the title attribute visible on keyboard focus
• Firefox - tabbing to element (focusing it by keyboard) should bring tooltip (contents of title attribute) up
• WebKit - [Bug 61732] - [GTK] Add support for tooltips triggered by keyboard

I'm also going to add an EUI backlog ticket for exploring swapping the browser title tooltip for our EUI Tooltip component. I'll reference this ticket in the description so we keep the narratives linked.

[AnnaKuhir]

@constancecchen @cchaos @1Copenut thanks for your help!

[AnnaKuhir]

Whoops, totally missed that, thanks Caroline! @AnnaKuhir, you should be able to translate all text in the tooltip using your i18n library of choice.

Could you describe how you see the use of i18n tokens for title translation? Even if we use the useEuiI18n function, it still just returns a string to us, right? And I expect that I can somehow pass this string to the EuiStepsHorizontal component to overwrite the button title. But the title of the button is defined in the EuiStepsHorizontal component and depends only on the status, that is, I can hardly overwrite it in any way

[cee-chen]

You can check out our I18n EuiContext example for how translating our processed tokens works at a very basic level.

If you want to take a look at how using a larger library like react-intl might work, check out Kibana's i18n_service and i18n_eui_mappings files. Hope that helps!

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.