docs:Add a mechanism to specify aria-labels on the copy and edit buttons in code examples

[hannahiss]

Description

For all the examples buttons in the doc, add a new parameter buttonLabel to all code display components (Example , Code, JsDocs, ScssDocs) to manage the aria-labels of the buttons. The tooltip content remains "Copy to clipboard" and "Edit on Stackblitz":

• For JsDocs component, as an aria-label for the "Copy to clipboard button", use:
  • "Copy buttonLabel JS to clipboard", if buttonLabel is provided
  • If not provided, "Copy name JS to clipboard" on the button, where name is a parameter provided to identify the relevant section of the document to display
• For ScssDocs component, as an aria-label for the "Copy to clipboard button", use:
  • "Copy buttonLabel SCSS to clipboard", if buttonLabel is provided
  • If not provided, "Copy name SCSS to clipboard" on the button, where name is a parameter provided to identify the relevant section of the document to display
• For Code component, as an aria-label for the "Copy to clipboard button", use:
  • "Copy buttonLabel code to clipboard", if buttonLabel is provided
  • If not provided, "Copy filepath code to clipboard" on the button, where filpath is a parameter provided to identify the file to display
  • If not provided, "Copy code to clipboard"
• For Example component, as an aria-label for the "Copy to clipboard button", use:
  • "Copy buttonLabel code to clipboard", if buttonLabel is provided
  • If not provided, "Copy code to clipboard"
  • ==> same logic for the "Edit on Stackblitz" button

Add an example in docsref

Motivation & Context

All the buttons of examples have the same label, either "Copy to clipboard" or "Edit in Stackblitz", which is not right for accessibility.

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-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues