From 6fc3ed5c07206af6c5f788c6b14c1f7c4a05ad62 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 11 Sep 2024 12:16:07 +0200
Subject: [PATCH 1/2] Temp commit with a beginning of a solution...

---
 site/content/docs/5.3/components/accordion.md | 2 +-
 site/layouts/shortcodes/example.html          | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index 8b22686ad50f..8895341d1437 100644
--- a/site/content/docs/5.3/components/accordion.md
+++ b/site/content/docs/5.3/components/accordion.md
@@ -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" buttons_labels="flush accordion example">}}
 <div class="accordion accordion-flush" id="accordionFlushExample">
   <div class="accordion-item">
     <h2 class="accordion-header">
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 5b398e6814fc..a985e022fe3e 100644
--- a/site/layouts/shortcodes/example.html
+++ b/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`
+    * buttons_labels: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: ""
 */ -}}
 
 {{- $id := .Get "id" -}}
@@ -16,10 +17,14 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
+{{- $buttons_labels := .Get "buttons_labels" | default "" -}}
 
 {{- $content := .Inner -}}
 
 <div class="bd-example-snippet bd-code-snippet">
+  {{- if eq $buttons_labels "" }}toto{{ else }} {{ $buttons_labels }} {{- end }}
+  {{- if not (eq $buttons_labels "") }} {{ $buttons_labels }} {{- end }}
+
   {{- if eq $show_preview true }}
   <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{ $content }}
@@ -31,10 +36,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 eq $buttons_labels "" }} it{{ else }} {{ $buttons_labels }} {{- 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 eq $buttons_labels "" }} {{ else }} {{ $buttons_labels }} {{- end }}to clipboard">
             <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
           </button>
         </div>

From 6da0b87ce423f35e90379f89eba45d0b3946e839 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Thu, 12 Sep 2024 10:55:19 +0200
Subject: [PATCH 2/2] Improve label of copy/stackblitz buttons for
 accessibility, make an example with Accordion

---
 site/content/docs/5.3/components/accordion.md |  6 +++---
 site/layouts/shortcodes/example.html          | 11 ++++-------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index 8895341d1437..7b3af3d0901b 100644
--- a/site/content/docs/5.3/components/accordion.md
+++ b/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 buttons_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" buttons_labels="flush accordion example">}}
+{{< example class="bg-body-secondary" buttons_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 buttons_label="always opened accordion example">}}
 <div class="accordion" id="accordionPanelsStayOpenExample">
   <div class="accordion-item">
     <h2 class="accordion-header">
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index a985e022fe3e..1a8124b600e9 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -8,7 +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`
-    * buttons_labels: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: ""
+    * buttons_label: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: ""
 */ -}}
 
 {{- $id := .Get "id" -}}
@@ -17,14 +17,11 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
-{{- $buttons_labels := .Get "buttons_labels" | default "" -}}
+{{- $buttons_label := .Get "buttons_label" | default "" -}}
 
 {{- $content := .Inner -}}
 
 <div class="bd-example-snippet bd-code-snippet">
-  {{- if eq $buttons_labels "" }}toto{{ else }} {{ $buttons_labels }} {{- end }}
-  {{- if not (eq $buttons_labels "") }} {{ $buttons_labels }} {{- end }}
-
   {{- if eq $show_preview true }}
   <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{ $content }}
@@ -36,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 {{- if eq $buttons_labels "" }} it{{ else }} {{ $buttons_labels }} {{- end }} 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 eq $buttons_label "" }} it{{ else }} {{ $buttons_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 {{- if eq $buttons_labels "" }} {{ else }} {{ $buttons_labels }} {{- end }}to clipboard">
+          <button type="button" class="btn-clipboard mt-0 me-0" title="Copy {{- if eq $buttons_label "" }} {{ else }} {{ $buttons_label }} {{- end }}to clipboard">
             <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
           </button>
         </div>