docs(spinners): improve buttons examples accessibility

[ffoodd]

Description

Moving the status role around to ensure it can be useful.

Motivation & Context

The button examples in spinners documentation are really weird regarding accessibility, since the status role is applied on hidden empty elements.

@patrickhlauke we may have a few sentences to add, for example mentioning how a live region works—mainly that it should already be in the DOM and only feed and shown on-demand? The current statement feels very short:

For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38632--twbs-bootstrap.netlify.app/docs/5.3/components/spinners/#buttons

[patrickhlauke]

we may have a few sentences to add, for example mentioning how a live region works—mainly that it should already be in the DOM and only feed and shown on-demand?

It will depend on a few factors, mainly how authors will implement these spinners. It would be nice to have an actual working example of a spinner that appears after a particular action, spins for a while, then disappears again, as that would then provide a good example of how authors should use it in practice (and give us something to test as well)