Docs: Improve label of copy/stackblitz buttons for accessibility

site/content/docs/5.3/components/accordion.md

@@ -25,7 +25,7 @@ To render an accordion that's expanded by default:
 - add the `.show` class on the `.accordion-collapse` element.
 - drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.
 
-{{< example >}}
+{{< example button_label="standard accordion example">}}
 <div class="accordion" id="accordionExample">
   <div class="accordion-item">
     <h2 class="accordion-header">
@@ -70,7 +70,7 @@ To render an accordion that's expanded by default:
 
 Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
 
-{{< example class="bg-body-secondary" >}}
+{{< example class="bg-body-secondary" button_label="flush accordion example">}}
 <div class="accordion accordion-flush" id="accordionFlushExample">
   <div class="accordion-item">
     <h2 class="accordion-header">
@@ -109,7 +109,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco
 
 Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened.
 
-{{< example >}}
+{{< example button_label="always opened accordion example">}}
 <div class="accordion" id="accordionPanelsStayOpenExample">
   <div class="accordion-item">
     <h2 class="accordion-header">

site/content/docs/5.3/components/alerts.md

@@ -38,7 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th
 
 We use the following JavaScript to trigger our live alert demo:
 
-{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}}
+{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" button_label="JavaScript example to trigger our live alert demo">}}
 
 ### Link color
 
@@ -152,30 +152,32 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}}
+{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" button_label="CSS variables for Alerts" >}}
 
 ### Sass variables
 
-{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
+{{< scss-docs name="alert-variables" file="scss/_variables.scss" button_label="Sass variables for Alerts" >}}
 
 ### Sass mixins
 
 {{< deprecated-in "5.3.0" >}}
 
-{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
+{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" button_label="Sass mixins for Alerts" >}}
 
 ### Sass loops
 
 Loop that generates the modifier classes with an overriding of CSS variables.
 
-{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
+{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" button_label="Sass loops for Alerts" >}}
 
 ## JavaScript behavior
 
 ### Initialize
 
 Initialize elements as alerts
 
+<span class="d-none" id="btnLabel0">alerts' initialization example</span>
+
 ```js
 const alertList = document.querySelectorAll('.alert')
 const alerts = [...alertList].map(element => new bootstrap.Alert(element))
@@ -189,7 +191,7 @@ See the [triggers](#triggers) section for more details.
 
 ### Triggers
 
-{{% js-dismiss "alert" %}}
+{{% js-dismiss "alert" 1 %}}
 
 **Note that closing an alert will remove it from the DOM.**
 

site/layouts/shortcodes/example.html

@@ -8,6 +8,7 @@
     * show_markup: if the markup should be output in the HTML - default: `true`
     * show_preview: if the preview should be output in the HTML - default: `true`
     * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
+    * button_label: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: ""
 */ -}}
 
 {{- $id := .Get "id" -}}
@@ -16,6 +17,7 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
+{{- $button_label := .Get "button_label" | default "" -}}
 
 {{- $content := .Inner -}}
 
@@ -31,10 +33,10 @@
       <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
         <small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
         <div class="d-flex ms-auto">
-          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
+          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try{{- if not (eq $button_label "") }} {{ printf "%s" $button_label }} {{- end }} on StackBlitz">
             <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
           </button>
-          <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+          <button type="button" class="btn-clipboard mt-0 me-0" title="Copy{{- if not (eq $button_label "") }} {{ printf "%s" $button_label }} {{- end }} to clipboard">
             <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
           </button>
         </div>

site/layouts/shortcodes/js-docs.html

@@ -1,12 +1,16 @@
 {{- /*
-  Usage: `js-docs name="name" file="file/_location.js`
+  Usage: `js-docs name="name" file="file/_location.js button_label="label"`
 
   Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"`
   comments in the docs.
+
+  Optional parameters:
+    * button_label: label to apply to complete 'Copy to clipboard' button - default: ""
 */ -}}
 
 {{- $name := .Get "name" -}}
 {{- $file := .Get "file" -}}
+{{- $button_label := .Get "button_label" | default "" -}}
 
 {{- /* If any parameters are missing, print an error and exit */ -}}
 {{- if or (not $name) (not $file) -}}
@@ -38,7 +42,7 @@
         {{- $file -}}
       </a>
       <div class="d-flex ms-auto">
-        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy{{- if not (eq $button_label "") }} {{ printf "%s" $button_label }} {{- end }} to clipboard">
           <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
         </button>
       </div>

site/layouts/shortcodes/scss-docs.html

@@ -1,16 +1,18 @@
 {{- /*
-  Usage: `scss-docs name="name" file="file/_location.scss"`
+  Usage: `scss-docs name="name" file="file/_location.scss" button_label="label"`
 
   Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"`
   comments in the docs.
 
   Optional parameters:
     * strip-default: Remove the ` !default` flag from variable assignments - default: `true`
+    * button_label: label to apply to complete 'Copy to clipboard' button - default: ""
 */ -}}
 
 {{- $name := .Get "name" -}}
 {{- $file := .Get "file" -}}
 {{- $strip_default := .Get "strip-default" | default "true" -}}
+{{- $button_label := .Get "button_label" | default "" -}}
 
 {{- /* If any parameters are missing, print an error and exit */ -}}
 {{- if or (not $name) (not $file) -}}
@@ -51,7 +53,7 @@
         {{- $file -}}
       </a>
       <div class="d-flex ms-auto">
-        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy{{- if not (eq $button_label "") }} {{ printf "%s" $button_label }} {{- end }} to clipboard">
           <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
         </button>
       </div>