[OUDS] docs: Manage "Copy to clipboard" and "Edit on Stackblitz" buttons labels for accessibility

[hannahiss]

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:

Root

• Homepage [OUDS] Add a11y labels to copy/stackblitz buttons on homepage #3281
• Docsref Example buttons aria-label: helpers and a bit more #3176

Getting Started

• Getting Started > Introduction
• Getting Started > Download
• Getting Started > Contents
• Getting Started > Browsers devices
• Getting Started > Accessibility
• Getting Started > Contribute

Customize

• Customize > custom libraries
• Customize > Options
• Customize > Color palette
• Customize > Color modes

Layout

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

Content

• Content > Reboot Example buttons aria-label: helpers and a bit more #3176
• Content > Typography

Forms

• Forms > Overview
• Forms > Text input [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Forms > Password input [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Forms > Text area [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Forms > Select input feat(lib): Add Select input component #3256
• Forms > Checkbox [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Forms > Radio buttons [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Forms > Switch [OUDS] Add a11y labels to copy/stackblitz buttons on forms components #3288
• Forms > Validation

Components

• Components > Badges
• Components > Breadcrumb
• Components > Bullet list
• Components > Buttons
• Components > Chips
• Components > Links
• Components > Tags Example buttons aria-label: helpers and a bit more #3176

Helpers

• Helpers > Clearfix Example buttons aria-label: helpers and a bit more #3176
• Helpers > Color background Example buttons aria-label: helpers and a bit more #3176
• Helpers > Colored links Example buttons aria-label: helpers and a bit more #3176
• Helpers > Divider Example buttons aria-label: helpers and a bit more #3176
• Helpers > Position Example buttons aria-label: helpers and a bit more #3176
• Helpers > Ratio Example buttons aria-label: helpers and a bit more #3176
• Helpers > Stacks Example buttons aria-label: helpers and a bit more #3176
• Helpers > Stretched link Example buttons aria-label: helpers and a bit more #3176
• Helpers > Text truncation Example buttons aria-label: helpers and a bit more #3176
• Helpers > Visually hidden Example buttons aria-label: helpers and a bit more #3176

Utilities

• Utilities > API
• Utilities > Background
• Utilities > Borders
• Utilities > Colors
• Utilities > Display
• Utilities > Flex
• Utilities > Float
• Utilities > Interactions
• Utilities > Object fit
• Utilities > Opacity
• Utilities > Overflow
• Utilities > Position
• Utilities > Shadows
• Utilities > Sizing
• Utilities > Spacing
• Utilities > Text
• Utilities > Vertical align
• Utilities > Visibility
• Utilities > Z-index

Extend

• Extend > Approach
• Extend > Icons

About

• About > Team
• About > License
• About > Translations
• About > Cookies

Migrations

• Migrations > Migration
• Migrations > Migration from Boosted