Docs: Improve label of copy/stackblitz buttons for accessibility
Description
⚠️ 🚧 DRAFT 🚧⚠️ Just testing for now
Added discriminating information to the label of the "Edit in Stackblitz" and "Copy to clipboard" buttons of examples, to know exactly what they correspond to.
This is a first version to validate the principle, with an example on Accordion component, before doing it everywhere (huge work).
I also have to check if it is possible to propose something for the copy buttons outside of the example shortcode (like in Getting started) which are not implemented the same way.
Motivation & Context
All "Edit in Stackblitz" and "Copy to clipboard" buttons had the same labels, making it impossible to do the difference between the examples.
Type of changes
- [x] Bug fix (non-breaking change which fixes an issue)
Checklist
- [x] I have read the contributing guidelines
- [x] My code follows the code style of the project (using
npm run lint) - [x] My change introduces changes to the documentation
- [x] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] All new and existing tests passed
Live previews
Related issues
Asked while discussing in #40766
Is this strictly necessary? Feels like this is going to be a lot, and I'm concerned it also will put a strain on work with #41251 and more.