Accessibility: text-transform affects the accessible name

[mkrause]

By default we won't set an aria-label on things like buttons and rely on the text content instead. We also use text-transform: uppercase to visually display the text as all-caps.

It turns out that text-transform also affects the accessible name. This leads to some issues where, for example, a screen reader would read "Call Us" as " Call U.S." instead.

As a possible fix, we could consider to automatically apply an aria-label to these elements with the untransformed name. This would override the text content:

Note that this is only possible if we have a string label available. If the consumer gives us an arbitrary ReactNode, then this won't work. In such cases, either the consumer would need to manually set an aria-label, or we could consider an alternative approach with a hidden element and an aria-labelledby="some-id" attribute.