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