Document how to use accessible content with the auro-loader

[blackfalcon]

General Support Request

A user is not made aware of how a11y can be addressed with this element

Support request

Update documentation

Possible Solution

Update the docs to represent a case where a user can place content between the tags and that this content is not displayed to the screen, but picked up by screen readers.

Context

https://github.com/AlaskaAirlines/auro-button/issues/109#issuecomment-829674057

[geoffrich]

This is definitely necessary, I wasn't aware of this. It's a little weird that it only works because the component isn't rendering a slot, so it has nowhere to put the text passed in.

I'd be in favor of adding an explicit slot to the component, so that this is an explicit part of the API. That way it will get picked up by the generated API docs as well. Otherwise, there's a risk that in future we add a slot to this component for another reason, and anyone already passing content between the tags for alternative text could break.

[blackfalcon]

Ok so, I totally forgot that there is already a default string in the element

But this does not negate the opportunity to open this up into a public API. But the lack of this content is not causing the issue with the loading button UI.

[geoffrich]

Yeah, I had seen that. But it's display: none when reduced-motion is not enabled, so it's not read out to screen readers.

[blackfalcon]

[blackfalcon]

See this related issue

• https://github.com/AlaskaAirlines/auro-loader/issues/16