bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Docs: Improve label of copy/stackblitz buttons for accessibility

Open hannahiss opened this issue 1 year ago • 1 comments

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

hannahiss avatar Sep 12 '24 09:09 hannahiss

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.

mdo avatar Apr 09 '25 06:04 mdo