search

elastic / eui

Elastic UI Framework 🙌
https://eui.elastic.co/
Other
49 stars 839 forks source link

EuiStepsHorizontal tooltip #5621

Closed AnnaKuhir closed 2 years ago

AnnaKuhir commented 2 years ago

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!

image

cee-chen commented 2 years ago

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 commented 2 years ago

This component has already undergone rigourous a11y testing which was done in this PR: https://github.com/elastic/eui/pull/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 commented 2 years ago

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 commented 2 years ago

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

cchaos commented 2 years ago

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

cee-chen commented 2 years ago

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 commented 2 years ago

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:

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 commented 2 years ago

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

AnnaKuhir commented 2 years ago

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 commented 2 years ago

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[bot] commented 2 years ago

👋 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[bot] commented 2 years ago

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