WCAG Accessibility and Truncated Text
Sep 01, 2022
In a couple of the components, Button Stack and Tabs, longer text labels are truncated and then appended with "...". There are a couple of issues with this approach.
1) The "..." is three period characters and not an ellipsis, therefore JAWS screen reader will read each character "dot dot dot".
2) Sometimes when the labels are truncated, they become difficult to understand. I also have an example, attached, which replaces the missing characters "ty" with "..." and therefore is replace with three characters rather than the two missing.
I think both of these components could be improved by adding an aria-label to the buttons that includes the full, intended label that the author has written in the authoring tool.
I think they should also be improved for non-visually impaired users, and display the full title of the button on :hover and :focus.