More context for copy and StackBlitz buttons for screen readers

[julien-deramond]

In our examples, we have a section where the corresponding source code is displayed (e.g. https://boosted.netlify.app/docs/5.1/components/accordion/#example). In this section, we can have up to two buttons to copy the source code in the clipboard and a try-it button that creates a reproduction environment in StackBlitz.

Those two buttons have no context for screen readers so they are displayed as a list of "Copy button", "Copy button", "Copy button", etc.

The purpose of this issue is to enhance this behavior to make them more accessible by providing some context for those buttons. It will probably have an impact on how the example shortcode is built.

It would be better to provide such an enhancement directly in Bootstrap to have their feedback as well.

[MewenLeHo]

@julien-deramond: is this issue still needed? Especially after twbs/bootstrap#37498

[julien-deramond]

The idea at the time was to provide some context in the title to differenciate the copy buttons in the page (and StackBlitz edit buttons). Seems to be different than what's been done in the Bootstrap PR. Do you think it would bring some value for screen readers users? If not, you can close this issue.

[MewenLeHo]

For screen readers users I think it's good.
But we may need it for users with others disabilities, like people using voice command for instance.
Any opinion @Aniort?