Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

• Add discriminating information to the label of the "Edit in Stackblitz" and "Copy to clipboard" buttons of examples, to know exactly what they correspond to, like proposed in the PR Docs: Improve label of copy/stackblitz buttons for accessibility twbs/bootstrap#40820
• Use example shortcode for basic examples instead of back-quotes, to be able to pass a discriminating label for the "Copy to clipboard" button, like proposed in the PR Use example shortcode for basic examples layout similar to back-quote… twbs/bootstrap#40829

Motivation and context

All examples have some "Copy to clipboard" and "Edit on Stackblitz" buttons with the same label, which is not accessible, all over the documentation.

Description

• Manage the mechanism to add correct aria-labels in all example components [OUDS] docs:Add the mechanics to be able to put labels on the copy and edit buttons in code examples #3159

• Add buttonLabel parameter in documentation pages and replace all triple backticks by Code component ==>Sub-issues below:

• Homepage [OUDS] Add a11y labels to copy/stackblitz buttons on homepage #3281

• Docsref Example buttons aria-label: helpers and a bit more #3176

• Dual mode

Getting Started

• Introduction
• Migration from Boosted
• Download
• Contents
• Browsers & devices
• Accessibility
• Sass
• JavaScript
• Optimize
• [NA] Contribute
• Webpack
• Parcel
• Vite
• RTL
• [NA] Component versionning
• [NA] Migration

Foundation

• [NA] Approach
• [NA] Options
• Tokens
• [NA] Color palette
• Color modes
• CSS variables
• Reboot Example buttons aria-label: helpers and a bit more #3176
• Content > Typography
• Images
• Figures
• Component
• Form validation

Layout

• Breakpoints
• Containers Example buttons aria-label: helpers and a bit more #3176
• Grid
• Columns
• Gutters
• Utilities
• Z-index
• CSS Grid
• Form layout

Components

• Badges
• Breadcrumb
• Bullet list
• Buttons
• Checkbox [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Chips
• Divider Example buttons aria-label: helpers and a bit more #3176
• Icon
• Links
• Password input [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Radio button [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Select input feat(lib): Add Select input component #3256
• Switch [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Tags Example buttons aria-label: helpers and a bit more #3176
• Text area [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Text input [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288

Utilities

• API
• Aspect ratio
• Background
• Border
• Color & background Example buttons aria-label: helpers and a bit more #3176
• Colored link Example buttons aria-label: helpers and a bit more #3176
• Color
• Display
• Flex
• Float
• Interaction
• Object fit
• Opacity
• Overflow
• Position
• Shadow
• Sizing
• Spacing
• Stack Example buttons aria-label: helpers and a bit more #3176
• Stretched link Example buttons aria-label: helpers and a bit more #3176
• Text
• Text truncation Example buttons aria-label: helpers and a bit more #3176
• Vertical align
• Visibility
• Visually hidden Example buttons aria-label: helpers and a bit more #3176
• Z-index