Truncating text on a button component

[colabottles]

For what version of Nuxt UI are you suggesting this?

v2.x

Description

About using truncated text on interactive elements, in this case, buttons. e.g., https://ui.nuxt.com/components/button#truncate. Accessibility-wise, it is a concern.

Truncating text with ellipsis is not an acceptable solution because the text that is truncated is still not readable by a screen reader. Instead, wrapping the text to the next line fixes the original layout issue while ensuring that the text is readable.

I would recommend to fix this and suggest hyphenating words that are long or button text that overflows the button.

This could cause issues not only with screen readers but also has the potential to cause Reflow and break Text Resize and also for users that need wider text spacing as well, this could fail Text Spacing.

Additional context

Refer to: https://yatil.net/blog/text-overflow-ellipsis-harmful

[benjamincanac]

Why not just add an aria-label to your truncated Button? 🤔

[colabottles]

Why not just add an aria-label to your truncated Button? 🤔

Because using aria-label isn't the fix-all that people think it is (in this case it can lead to over-engineering).

The button text will still be read and the aria-label will be read. Screen reader users don't need to be read duplicated text. They want the button text to be read and that's it.

E.g., You put an aria-label on the button and realize it still reads the text, which leads a developer to try and hide the button text from screen readers.

That in turn, turns into impact somewhere else in some screen readers/user agent combination or removing what is needed out of the accessibility tree. Then more aria is dumped in the code to try and fix the broken aria earlier on. Over-engineering.

Button text doesn't need to be a sentence or a few words anyway. There are other ways to get to the user what the function of a button is without having a ton of text on the button.