From 812153ea9b394a775feedd74aafea8a24a2e4170 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Mon, 5 Dec 2022 11:40:33 +0100
Subject: [PATCH 01/23] Try to add code-sniffer to pa11y-ci

---
 build/.pa11yci.json                           |  7 +-
 site/assets/js/code-examples.js               |  4 +-
 site/content/docs/5.2/components/navbar.md    |  7 +-
 site/content/docs/5.2/components/offcanvas.md |  2 +-
 .../docs/5.2/components/orange-navbar.md      |  2 +-
 site/content/docs/5.2/components/toasts.md    | 32 ++++---
 .../docs/5.2/examples/cards-rtl/index.html    | 72 ++++++++--------
 .../docs/5.2/examples/cards/index.html        | 72 ++++++++--------
 site/content/docs/5.2/forms/checks-radios.md  | 86 +++++++++----------
 site/content/docs/5.2/forms/overview.md       |  1 +
 site/layouts/shortcodes/example.html          |  4 +-
 site/layouts/shortcodes/placeholder.html      |  2 +-
 12 files changed, 144 insertions(+), 147 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index fec193bd6e..d5c968e6c5 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -1,5 +1,5 @@
 {
-  "standard": "WCAG2AA",
+  "standard": "WCAG2AAA",
   "level": "error",
   "defaults": {
     "chromeLaunchConfig": {
@@ -12,10 +12,11 @@
       ["pa11y-ci-reporter-html", {"destination": ".pa11y", "includeZeroIssues": true}]
     ],
     "runners": [
-      "axe"
+      "axe",
+      "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar",
+    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index 07962695b4..f657a2c80f 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -22,8 +22,8 @@
   const btnHtml = [
     '<div class="bd-code-snippet">',
     '   <div class="bd-clipboard">',
-    '      <button type="button" class="btn-clipboard">',
-    '        <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
+    '      <button type="button" class="btn-clipboard" title="Copied to clipboard">',
+    '        <svg class="bi" aria-hidden="true" focusable="false"><use xlink:href="#clipboard"/></svg>',
     '      </button>',
     '   </div>',
     '</div>'
diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md
index dd2244f33e..75a90da7a2 100644
--- a/site/content/docs/5.2/components/navbar.md
+++ b/site/content/docs/5.2/components/navbar.md
@@ -127,7 +127,7 @@ The `.navbar-brand` can be used to contain most elements, but an anchor works be
 
 ### Nav
 
-Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
+Navbar navigation links build on our `.nav` options with their own modifier class and require the use of toggler classes for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
 
 Add the `.active` class on `.nav-link` to indicate the current page.
 
@@ -271,6 +271,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
       <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
+    <button class="btn btn-primary btn-inverse" type="submit">Search</button>
   </form>
 </nav>
 {{< /example >}}
@@ -279,10 +280,10 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 {{< example >}}
 <nav class="navbar navbar-dark bg-dark">
-  <form class="container-fluid justify-content-start align-items-center">
+  <div class="container-fluid justify-content-start align-items-center">
     <button class="btn btn-primary btn-inverse me-2" type="button">Main button</button>
     <button class="btn btn-sm btn-primary btn-inverse" type="button">Smaller button</button>
-  </form>
+  </div>
 </nav>
 {{< /example >}}
 
diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md
index 61d6ce5dcb..3c772f6036 100644
--- a/site/content/docs/5.2/components/offcanvas.md
+++ b/site/content/docs/5.2/components/offcanvas.md
@@ -13,7 +13,7 @@ toc: true
 Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
 
 - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
-- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
+- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
 - When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
 - Similar to modals, only one offcanvas can be shown at a time.
 
diff --git a/site/content/docs/5.2/components/orange-navbar.md b/site/content/docs/5.2/components/orange-navbar.md
index 36bfdb8f86..39f55d1965 100644
--- a/site/content/docs/5.2/components/orange-navbar.md
+++ b/site/content/docs/5.2/components/orange-navbar.md
@@ -221,7 +221,7 @@ Even though you should use the Master or Small logo, you can still replace it by
 {{< callout warning >}}
 You should consider having a **responsive SVG logo**. In order to do so, you may set up a responsive rendering into your SVG, [as we do with the Master logo]({{< docsref "/about/brand#orange-logo" >}}).
 
-If you do not intend to use your own SVG, you should explore the DOM solution and therefore do as if you had a [title on one or two lines]({{< ref "#global-header-with-title" >}}).
+If you do not intend to use your own SVG, you should explore the DOM solution and therefore do as if you had a [title on one or two lines]({{< ref "#with-title" >}}).
 {{< /callout >}}
 
 <div class="bd-example p-0">
diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.2/components/toasts.md
index 8277811944..3ae9621991 100644
--- a/site/content/docs/5.2/components/toasts.md
+++ b/site/content/docs/5.2/components/toasts.md
@@ -200,23 +200,21 @@ Building on the above example, you can create different toast color schemes with
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
 
 {{< example stackblitz_add_js="true" >}}
-<form>
-  <div class="mb-3">
-    <label for="selectToastPlacement">Toast placement</label>
-    <select class="form-select mt-2" id="selectToastPlacement">
-      <option value="" selected>Select a position...</option>
-      <option value="top-0 start-0">Top left</option>
-      <option value="top-0 start-50 translate-middle-x">Top center</option>
-      <option value="top-0 end-0">Top right</option>
-      <option value="top-50 start-0 translate-middle-y">Middle left</option>
-      <option value="top-50 start-50 translate-middle">Middle center</option>
-      <option value="top-50 end-0 translate-middle-y">Middle right</option>
-      <option value="bottom-0 start-0">Bottom left</option>
-      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
-      <option value="bottom-0 end-0">Bottom right</option>
-    </select>
-  </div>
-</form>
+<div class="mb-3">
+  <label for="selectToastPlacement">Toast placement</label>
+  <select class="form-select mt-2" id="selectToastPlacement">
+    <option value="" selected>Select a position...</option>
+    <option value="top-0 start-0">Top left</option>
+    <option value="top-0 start-50 translate-middle-x">Top center</option>
+    <option value="top-0 end-0">Top right</option>
+    <option value="top-50 start-0 translate-middle-y">Middle left</option>
+    <option value="top-50 start-50 translate-middle">Middle center</option>
+    <option value="top-50 end-0 translate-middle-y">Middle right</option>
+    <option value="bottom-0 start-0">Bottom left</option>
+    <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
+    <option value="bottom-0 end-0">Bottom right</option>
+  </select>
+</div>
 <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
   <div class="toast-container p-3" id="toastPlacement">
     <div class="toast">
diff --git a/site/content/docs/5.2/examples/cards-rtl/index.html b/site/content/docs/5.2/examples/cards-rtl/index.html
index 0d6d30df59..43791d4806 100644
--- a/site/content/docs/5.2/examples/cards-rtl/index.html
+++ b/site/content/docs/5.2/examples/cards-rtl/index.html
@@ -72,15 +72,15 @@ <h3 class="card-title">عنوان</h3>
             <p class="card-text fw-bold mb-4">شرح</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                <a href="#" aria-label="مفضل">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                <a href="#" aria-label="يشارك">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -155,15 +155,15 @@ <h3 class="card-title">عنوان</h3>
             <p class="card-text fw-bold mb-4">شرح</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                <a href="#" aria-label="مفضل">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                <a href="#" aria-label="يشارك">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -238,15 +238,15 @@ <h3 class="card-title">عنوان</h3>
             <p class="card-text fw-bold mb-4">شرح</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                <a href="#" aria-label="مفضل">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                <a href="#" aria-label="يشارك">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -323,15 +323,15 @@ <h3 class="card-title">عنوان</h3>
               <p class="card-text fw-bold mb-4">شرح</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                  <a href="#" aria-label="مفضل">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                  <a href="#" aria-label="يشارك">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -359,7 +359,7 @@ <h2>بطاقات موضحة باللون الأسود</h2>
       </div>
       <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -368,7 +368,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title mb-3">عنوان</h3>
@@ -378,7 +378,7 @@ <h3 class="card-title mb-3">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -388,7 +388,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -399,22 +399,22 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
               <p class="card-text fw-bold mb-4">شرح</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                  <a href="#" aria-label="مفضل">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                  <a href="#" aria-label="يشارك">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -425,7 +425,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -442,7 +442,7 @@ <h2>بطاقات على الأسود</h2>
       </div>
       <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
@@ -451,7 +451,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title mb-3">عنوان</h3>
@@ -461,7 +461,7 @@ <h3 class="card-title mb-3">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
@@ -471,7 +471,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
@@ -482,22 +482,22 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
               <p class="card-text fw-bold mb-4">شرح</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                  <a href="#" aria-label="مفضل">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                  <a href="#" aria-label="يشارك">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -508,7 +508,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
diff --git a/site/content/docs/5.2/examples/cards/index.html b/site/content/docs/5.2/examples/cards/index.html
index f5e46155b9..9595f83fc4 100644
--- a/site/content/docs/5.2/examples/cards/index.html
+++ b/site/content/docs/5.2/examples/cards/index.html
@@ -71,15 +71,15 @@ <h3 class="card-title">Title</h3>
             <p class="card-text fw-bold mb-4">Caption</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Favorite">
+                <a href="#" aria-label="Favorite">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Share">
+                <a href="#" aria-label="Share">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -154,15 +154,15 @@ <h3 class="card-title">Title</h3>
             <p class="card-text fw-bold mb-4">Caption</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Favorite">
+                <a href="#" aria-label="Favorite">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Share">
+                <a href="#" aria-label="Share">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -237,15 +237,15 @@ <h3 class="card-title">Title</h3>
             <p class="card-text fw-bold mb-4">Caption</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Favorite">
+                <a href="#" aria-label="Favorite">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Share">
+                <a href="#" aria-label="Share">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -322,15 +322,15 @@ <h3 class="card-title">Title</h3>
               <p class="card-text fw-bold mb-4">Caption</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Favorite">
+                  <a href="#" aria-label="Favorite">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Share">
+                  <a href="#" aria-label="Share">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -358,7 +358,7 @@ <h2>Cards outlined on black</h2>
       </div>
       <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">Title</h3>
@@ -367,7 +367,7 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title mb-3">Title</h3>
@@ -377,7 +377,7 @@ <h3 class="card-title mb-3">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">Title</h3>
@@ -387,7 +387,7 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">Title</h3>
@@ -398,22 +398,22 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">Title</h3>
               <p class="card-text fw-bold mb-4">Caption</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Favorite">
+                  <a href="#" aria-label="Favorite">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Share">
+                  <a href="#" aria-label="Share">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -424,7 +424,7 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">Title</h3>
@@ -441,7 +441,7 @@ <h2>Cards on black</h2>
       </div>
       <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">Title</h3>
@@ -450,7 +450,7 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title mb-3">Title</h3>
@@ -460,7 +460,7 @@ <h3 class="card-title mb-3">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">Title</h3>
@@ -470,7 +470,7 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">Title</h3>
@@ -481,22 +481,22 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">Title</h3>
               <p class="card-text fw-bold mb-4">Caption</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Favorite">
+                  <a href="#" aria-label="Favorite">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="Share">
+                  <a href="#" aria-label="Share">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -507,7 +507,7 @@ <h3 class="card-title">Title</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">Title</h3>
diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.2/forms/checks-radios.md
index eb2ec52b2a..cd9cbd6692 100644
--- a/site/content/docs/5.2/forms/checks-radios.md
+++ b/site/content/docs/5.2/forms/checks-radios.md
@@ -363,26 +363,24 @@ Drop borders using `.btn-no-outline`, too.
 Star rating system is built on top of radios. Simply add `.star-rating` to a `<fieldset>` element to use predefined glyphs and compose your star rating system with as much stars as needed.
 
 {{< example >}}
-<form>
-  <fieldset class="star-rating">
-    <legend class="visually-hidden">Results relevance</legend>
+<fieldset class="star-rating">
+  <legend class="visually-hidden">Results relevance</legend>
 
-    <input type="radio" id="terrible" name="rating" value="1" class="visually-hidden">
-    <label for="terrible" title="Terrible"></label>
+  <input type="radio" id="terrible" name="rating" value="1" class="visually-hidden">
+  <label for="terrible" title="Terrible"></label>
 
-    <input type="radio" id="bad" name="rating" value="2" class="visually-hidden">
-    <label for="bad" title="Bad"></label>
+  <input type="radio" id="bad" name="rating" value="2" class="visually-hidden">
+  <label for="bad" title="Bad"></label>
 
-    <input type="radio" id="mixed" name="rating" value="3" class="visually-hidden">
-    <label for="mixed" title="Mixed"></label>
+  <input type="radio" id="mixed" name="rating" value="3" class="visually-hidden">
+  <label for="mixed" title="Mixed"></label>
 
-    <input type="radio" id="good" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good" title="Good"></label>
+  <input type="radio" id="good" name="rating" value="4" class="visually-hidden" checked>
+  <label for="good" title="Good"></label>
 
-    <input type="radio" id="excellent" name="rating" value="5" class="visually-hidden">
-    <label for="excellent" title="Excellent"></label>
-  </fieldset>
-</form>
+  <input type="radio" id="excellent" name="rating" value="5" class="visually-hidden">
+  <label for="excellent" title="Excellent"></label>
+</fieldset>
 {{< /example >}}
 
 ### Sizes
@@ -390,26 +388,24 @@ Star rating system is built on top of radios. Simply add `.star-rating` to a `<f
 Star ratings come with a smaller variant: `.star-rating-sm`.
 
 {{< example >}}
-<form>
-  <fieldset class="star-rating star-rating-sm">
-    <legend class="visually-hidden">Results relevance</legend>
+<fieldset class="star-rating star-rating-sm">
+  <legend class="visually-hidden">Results relevance</legend>
 
-    <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
-    <label for="terrible2" title="Terrible"></label>
+  <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
+  <label for="terrible2" title="Terrible"></label>
 
-    <input type="radio" id="bad2" name="rating" value="2" class="visually-hidden">
-    <label for="bad2" title="Bad"></label>
+  <input type="radio" id="bad2" name="rating" value="2" class="visually-hidden">
+  <label for="bad2" title="Bad"></label>
 
-    <input type="radio" id="mixed2" name="rating" value="3" class="visually-hidden">
-    <label for="mixed2" title="Mixed"></label>
+  <input type="radio" id="mixed2" name="rating" value="3" class="visually-hidden">
+  <label for="mixed2" title="Mixed"></label>
 
-    <input type="radio" id="good2" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good2" title="Good"></label>
+  <input type="radio" id="good2" name="rating" value="4" class="visually-hidden" checked>
+  <label for="good2" title="Good"></label>
 
-    <input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
-    <label for="excellent2" title="Excellent"></label>
-  </fieldset>
-</form>
+  <input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
+  <label for="excellent2" title="Excellent"></label>
+</fieldset>
 {{< /example >}}
 
 ### Dark variant
@@ -417,26 +413,24 @@ Star ratings come with a smaller variant: `.star-rating-sm`.
 Add `.star-rating-dark` to the `.star-rating` for a dark variant.
 
 {{< example class="bg-dark" >}}
-<form>
-  <fieldset class="star-rating star-rating-dark">
-    <legend class="visually-hidden">Results relevance</legend>
+<fieldset class="star-rating star-rating-dark">
+  <legend class="visually-hidden">Results relevance</legend>
 
-    <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
-    <label for="terrible3" title="Terrible"></label>
+  <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
+  <label for="terrible3" title="Terrible"></label>
 
-    <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
-    <label for="bad3" title="Bad"></label>
+  <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
+  <label for="bad3" title="Bad"></label>
 
-    <input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
-    <label for="mixed3" title="Mixed"></label>
+  <input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
+  <label for="mixed3" title="Mixed"></label>
 
-    <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good3" title="Good"></label>
+  <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
+  <label for="good3" title="Good"></label>
 
-    <input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
-    <label for="excellent3" title="Excellent"></label>
-  </fieldset>
-</form>
+  <input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
+  <label for="excellent3" title="Excellent"></label>
+</fieldset>
 {{< /example >}}
 
 ### Disabled
@@ -445,6 +439,8 @@ Make star ratings look inactive inside or outside a form by adding the `disabled
 
 {{< example >}}
 <fieldset class="star-rating" disabled>
+  <legend class="visually-hidden">Rated 3 stars out of 5</legend>
+
   <input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
   <label for="terrible4" title="Terrible"></label>
 
diff --git a/site/content/docs/5.2/forms/overview.md b/site/content/docs/5.2/forms/overview.md
index 2d0edb5d18..fadf867f89 100644
--- a/site/content/docs/5.2/forms/overview.md
+++ b/site/content/docs/5.2/forms/overview.md
@@ -143,6 +143,7 @@ Use the `.is-required` class on `label` to add a `*` symbol after it.
 {{< example >}}
 <form>
   <fieldset>
+    <legend class="visually-hidden">Required fields inside fieldset example</legend>
     <div class="mb-3">
       <label for="requiredTextInput" class="form-label is-required">Required input</label>
       <input type="text" id="requiredTextInput" class="form-control" placeholder="Required input" required>
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 071fbc2590..26dc59c474 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -33,10 +33,10 @@
         <small class="font-monospace text-muted 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">
-            <svg class="bi" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
+            <svg class="bi" aria-hidden="true" focusable="false"><use xlink:href="#lightning-charge-fill"/></svg>
           </button>
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
-            <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
+            <svg class="bi" aria-hidden="true" focusable="false"><use xlink:href="#clipboard"/></svg>
           </button>
         </div>
       </div>
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index efa3f3b3ec..8f00b101c7 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -12,7 +12,7 @@
 */ -}}
 
 {{- $grays := $.Site.Data.grays -}}
-{{- $default_color := (index $grays 5).hex -}} <!--Boosted mod: 5 instead of 2-->
+{{- $default_color := (index $grays 8).hex -}} <!--Boosted mod: 8 instead of 2-->
 {{- $default_background := (index $grays 3).hex -}} <!--Boosted mod: 3 instead of 5-->
 
 {{- $title := .Get "title" | default "Placeholder" -}}

From 9108d61aa5bfd83ff5e29381b80af9dcdfba8dc8 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 18 Jan 2023 17:12:20 +0100
Subject: [PATCH 02/23] fix

---
 site/content/docs/5.2/customize/color-modes.md | 6 +++---
 site/content/docs/5.2/customize/color.md       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md
index ffc63cb16f..64bd823588 100644
--- a/site/content/docs/5.2/customize/color-modes.md
+++ b/site/content/docs/5.2/customize/color-modes.md
@@ -11,7 +11,7 @@ added: "5.3"
 
 **Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
 
-Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#sass-usage). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
+Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#usage). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
 
 ## Example
 
@@ -256,7 +256,7 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc
 
 ### Variables
 
-Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#sass-usage) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
+Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#usage) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
 
 {{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
 
@@ -268,6 +268,6 @@ CSS variables for our dark color mode are partially generated from dark mode spe
 
 ### Sass mixin
 
-Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#sass-usage) for more details.
+Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#usage) for more details.
 
 {{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
diff --git a/site/content/docs/5.2/customize/color.md b/site/content/docs/5.2/customize/color.md
index 6521a7dce3..6a8f460650 100644
--- a/site/content/docs/5.2/customize/color.md
+++ b/site/content/docs/5.2/customize/color.md
@@ -498,7 +498,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
 These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
 
 {{< example >}}
-<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle">
+<div class="p-3 text-emphasis bg-primary-subtle border border-primary-subtle">
   Example element with utilities
 </div>
 {{< /example >}}

From 83359ef60b72c4fd9c60ae63556c1b53cca53ed7 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 21 Mar 2023 13:40:28 +0100
Subject: [PATCH 03/23] Change because of losing `position: absolute`

---
 build/.pa11yci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index a3999a265a..472e329958 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .table-swatches, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar",
+    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .table-swatches, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden",
     "ignore": [
       "color-contrast"
     ]

From 172f8a28855c38cc5008851092a7129e45bd2307 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 11 Apr 2023 10:12:38 +0200
Subject: [PATCH 04/23] fix(review)

---
 build/.pa11yci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index 472e329958..c7cb7a14b9 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -1,5 +1,5 @@
 {
-  "standard": "WCAG2AAA",
+  "standard": "WCAG2AA",
   "level": "error",
   "defaults": {
     "chromeLaunchConfig": {

From 4ca39a3fb41e264bf33e68eab5147c8f5a28045c Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Thu, 13 Apr 2023 13:16:26 +0200
Subject: [PATCH 05/23] .

---
 site/content/docs/5.3/layout/containers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/layout/containers.md b/site/content/docs/5.3/layout/containers.md
index fc461763c8..97dcaf733d 100644
--- a/site/content/docs/5.3/layout/containers.md
+++ b/site/content/docs/5.3/layout/containers.md
@@ -23,7 +23,7 @@ The table below illustrates how each container's `max-width` compares to the ori
 
 See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
 
-Please note that we apply an extra-padding on our containers (see [our mixins](#mixins))
+Please note that we apply an extra-padding on our containers (see [our mixins](#sass-mixins))
 
 {{< bs-table "table" >}}
 |  | Extra small<div class="fw-normal">&lt;480px</div> | Small<div class="fw-normal">&ge;480px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;1024px</div> | X-Large<div class="fw-normal">&ge;1280px</div> | XX-Large<div class="fw-normal">&ge;1440px</div> |

From a94e6d558508f5e2a9ab49d11a931b2efeeac356 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 25 Apr 2023 18:48:49 +0200
Subject: [PATCH 06/23] .

---
 build/.pa11yci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index c7cb7a14b9..530469efd4 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .table-swatches, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden",
+    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden",
     "ignore": [
       "color-contrast"
     ]

From 7549e72276a144550dc95568a25742bf9639226d Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 26 Apr 2023 09:09:30 +0200
Subject: [PATCH 07/23] .

---
 scss/_variables.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index be392791b8..891f0eef5b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -342,13 +342,13 @@ $theme-colors: (
 // scss-docs-end theme-colors-map
 
 // scss-docs-start theme-text-variables
-$primary-text-emphasis:   $primary !default; // Boosted mod: instead of `shade-color($primary, 60%)`
-$secondary-text-emphasis: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 60%)`
+$primary-text-emphasis:   null !default; // Boosted mod: instead of `shade-color($primary, 60%)`
+$secondary-text-emphasis: null !default; // Boosted mod: instead of `shade-color($secondary, 60%)`
 $success-text-emphasis:   null !default; // Boosted mod: instead of `shade-color($success, 60%)`
 $info-text-emphasis:      null !default; // Boosted mod: instead of `shade-color($info, 60%)`
 $warning-text-emphasis:   null !default; // Boosted mod: instead of `shade-color($warning, 60%)`
 $danger-text-emphasis:    null !default; // Boosted mod: instead of `shade-color($danger, 60%)`
-$light-text-emphasis:     $light !default; // Boosted mod: instead of `$gray-700`
+$light-text-emphasis:     null !default; // Boosted mod: instead of `$gray-700`
 $dark-text-emphasis:      null !default; // Boosted mod: instead of `$gray-700`
 // scss-docs-end theme-text-variables
 

From bc35bf4f3bbc2f00763df7e2d9729544c01e287d Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Thu, 27 Jul 2023 14:25:18 +0200
Subject: [PATCH 08/23] Fix CI

---
 build/.pa11yci.json                           |  2 +-
 scss/_variables.scss                          |  2 +-
 site/assets/scss/_content.scss                |  2 +-
 site/content/docs/5.3/components/navbar.md    |  5 ++-
 site/content/docs/5.3/customize/color.md      |  2 +-
 .../docs/5.3/examples/download-app/index.html | 32 ++++++++-----------
 .../content/docs/5.3/examples/grid/index.html |  7 ++--
 .../docs/5.3/examples/masonry/index.html      |  2 +-
 .../content/docs/5.3/helpers/colored-links.md |  6 ++--
 site/content/docs/5.3/helpers/icon-link.md    |  2 +-
 .../docs/5.3/helpers/stretched-link.md        |  2 +-
 11 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index 981ac12b36..e6870871ce 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive",
+    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d62986e2c3..8857e542d7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -829,7 +829,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-xlg !default;
-$blockquote-footer-color:     $gray-700 !default;
+$blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // Boosted mod: instead of `$gray-700`
 $blockquote-footer-font-size: $small-font-size !default;
 $blockquote-line-height:      1.5 !default; // Boosted mod
 $blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // Boosted mod
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index d30078f968..7b5fe7b480 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -116,7 +116,7 @@
   }
 
   .btn-secondary {
-    --bs-btn-color: var(--bs-white); // Boosted mod
+    --bs-btn-color: var(--bs-dark); // Boosted mod
     --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
     --bs-btn-border-color: #{rgba($white, .25)};
     --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 2a210d9a8c..8f5c2dfbf5 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -595,7 +595,10 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
 {{< example stackblitz_add_js="true" >}}
 <nav class="navbar navbar-dark bg-dark fixed-top">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
+    <div class="navbar-brand">
+      <a class="stretched-link" href="#"><span class="visually-hidden">Brand</span></a>
+      <h1 class="title">Offcanvas dark navbar</h1>
+    </div>
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
index 68d4892b1c..119581ac67 100644
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/content/docs/5.3/customize/color.md
@@ -157,7 +157,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
 **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
 {{< /callout >}}
 
-<table class="table table-swatches">
+<table class="table table-swatches exclude-from-pa11y-analysis">
   <thead>
     <tr>
       <th style="width: 340px;">Description</th>
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index 9335cdac97..852dafaf50 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -246,24 +246,20 @@ <h2 class="h1 mb-4 mb-md-5 text-primary text-center">What you get from the showc
     <div class="container-xxl pt-md-2 pb-2">
       <h2 class="h1 mb-0 mb-md-5 text-primary text-center" id="download-notice">How to download the showcase app</h2>
       <div class="pt-1 pt-md-2 text-center">
-        <ul class="col-12 col-sm-8 d-md-none mx-auto nav nav-underline" role="tablist" aria-owns="nav-link-apple nav-link-android" aria-labelledby="download-notice">
-          <li class="nav-item w-50" role="presentation">
-            <a class="nav-link justify-content-center active" id="nav-link-apple" href="#link-apple" data-bs-toggle="tab" data-bs-target="#link-apple" aria-controls="link-apple" role="tab">
-              <span class="visually-hidden">Apple</span>
-              <svg xmlns="http://www.w3.org/2000/svg" class="icons-lg" width="6.25rem" height="6.25rem" focusable="false" aria-hidden="true">
-                <use xlink:href="#apple"/>
-              </svg>
-            </a>
-          </li>
-          <li class="nav-item w-50" role="presentation">
-            <a class="nav-link justify-content-center" id="nav-link-android" href="#link-android" data-bs-toggle="tab" data-bs-target="#link-android" aria-controls="link-android" role="tab">
-              <span class="visually-hidden">Android</span>
-              <svg xmlns="http://www.w3.org/2000/svg" class="icons-lg" width="6.25rem" height="6.25rem" focusable="false" aria-hidden="true">
-                <use xlink:href="#android"/>
-              </svg>
-            </a>
-          </li>
-        </ul>
+        <div class="col-12 col-sm-8 d-md-none mx-auto nav nav-underline" role="tablist" aria-owns="nav-link-apple nav-link-android" aria-labelledby="download-notice">
+          <button class="nav-link w-50 justify-content-center active" id="nav-link-apple" data-bs-toggle="tab" data-bs-target="#link-apple" aria-controls="link-apple" role="tab">
+            <span class="visually-hidden">Apple</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icons-lg" width="6.25rem" height="6.25rem" focusable="false" aria-hidden="true">
+              <use xlink:href="#apple"/>
+            </svg>
+          </button>
+          <button class="nav-link w-50 justify-content-center" id="nav-link-android" data-bs-toggle="tab" data-bs-target="#link-android" aria-controls="link-android" role="tab">
+            <span class="visually-hidden">Android</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icons-lg" width="6.25rem" height="6.25rem" focusable="false" aria-hidden="true">
+              <use xlink:href="#android"/>
+            </svg>
+          </button>
+        </div>
         <div class="tab-content border-0 p-0 pt-3 pt-md-3 row justify-content-around">
           <div id="link-apple" role="tabpanel" aria-labelledby="nav-link-apple" class="col-12 col-sm-8 col-md-4 d-md-flex flex-column align-items-center mx-auto tab-pane show active">
             <svg xmlns="http://www.w3.org/2000/svg" class="d-none d-md-block mb-4" width="6.25rem" height="6.25rem" focusable="false" aria-hidden="true">
diff --git a/site/content/docs/5.3/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html
index 8270af8674..7db8680693 100644
--- a/site/content/docs/5.3/examples/grid/index.html
+++ b/site/content/docs/5.3/examples/grid/index.html
@@ -86,9 +86,10 @@ <h2 class="mt-4">Two columns</h2>
     </div>
 
     <h2 class="mt-4">Full width, single column</h2>
-    <p class="text-warning">
-      No grid classes are necessary for full-width elements.
-    </p>
+    <div class="alert alert-warning" role="alert">
+      <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+      <p>No grid classes are necessary for full-width elements.</p>
+    </div>
 
     <hr class="my-4">
 
diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index de4f7cc098..3927eef0ad 100644
--- a/site/content/docs/5.3/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -57,7 +57,7 @@ <h5 class="card-title">Card title</h5>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
-      <div class="card bg-dark border-secondary text-center p-3">
+      <div class="card bg-dark border-secondary text-center p-3" data-bs-theme="dark">
         <figure class="mb-0">
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md
index 8d1bf9ebf2..a5389dd03f 100644
--- a/site/content/docs/5.3/helpers/colored-links.md
+++ b/site/content/docs/5.3/helpers/colored-links.md
@@ -46,7 +46,7 @@ Colored links can also be modified by [our link utilities]({{< docsref "/utiliti
 
 <!--Boosted mod: feature limited to primary and light, we don't loop over "theme-colors; body-emphasis is treated on its own"-->
 {{< example >}}
-<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-10 link-underline-opacity-100-hover">Primary link</a></p>
-<p><a href="#" class="link-light link-offset-2 link-underline-opacity-10 link-underline-opacity-100-hover">Light link</a></p>
-<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-10 link-underline-opacity-75-hover">Emphasis link</a></p>
+<p class="p-1 bg-dark"><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
+<p class="p-1 bg-dark"><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
+<p class="p-1"><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-10 link-underline-opacity-75-hover">Emphasis link</a></p>
 {{< /example >}}
diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
index 0cce3d4af9..72a6b2e44a 100644
--- a/site/content/docs/5.3/helpers/icon-link.md
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -96,7 +96,7 @@ Customize the icon link Sass variables to modify all icon link styles across you
 
 Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
 
-{{< example >}}
+{{< example class="bg-dark" >}}
 <a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
   Icon link
   <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
diff --git a/site/content/docs/5.3/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index fb082a0eed..78d4de851c 100644
--- a/site/content/docs/5.3/helpers/stretched-link.md
+++ b/site/content/docs/5.3/helpers/stretched-link.md
@@ -69,7 +69,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
       <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
     </p>
     <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
-      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
+      This <a href="#" class="text-danger stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
     </p>
   </div>
 </div>

From e97f39f0d50246e5ce1403d7c90650b804da3492 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 1 Aug 2023 14:10:45 +0200
Subject: [PATCH 09/23] Correct the documentation and remove some
 hiddenElements.

---
 build/.pa11yci.json                                | 2 +-
 site/assets/js/tac.js                              | 2 +-
 site/content/docs/5.3/components/orange-navbar.md  | 3 ++-
 site/content/docs/5.3/examples/form/index.html     | 2 +-
 site/content/docs/5.3/utilities/colors.md          | 4 ++--
 site/layouts/shortcodes/orange-global-headers.html | 3 ++-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index e6870871ce..aa7f09c034 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .table-dark .table-active, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index be3266641d..481ca7ee82 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -74,7 +74,7 @@
       const toggle = document
         .createRange()
         .createContextualFragment(
-          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1] === '!googletagmanager=true' ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1] === '!googletagmanager=true' ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none exclude-from-pa11y-analysis"></div>`
         )
       ask.innerHTML = ''
       ask.append(toggle)
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index 5ec8e20352..31e4e7d369 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -356,8 +356,9 @@ You can add a search input into your Global header.
       ...
 
       <!-- Navbar with action icons -->
-      <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
+      <form class="d-none d-lg-flex col-3 navbar-item" role="search">
         <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
+        <button type="submit" class="btn btn-primary btn-inverse visually-hidden-focusable">Submit</button>
       </form>
       <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
         <ul class="navbar-nav flex-row">
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index 734ac432e9..f7f75b0a30 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -87,7 +87,7 @@ <h1 class="display-1">Become a reseller</h1>
         </p>
         <form class="needs-validation mb-5" novalidate>
           <div class="row">
-            <div class="col-12">
+            <div class="col-12 exclude-from-pa11y-analysis" aria-hidden="true">
               <p class="fw-bold mb-4">
                 <span class="text-primary me-1">*</span>indicates required
               </p>
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 135d6e8004..902e9ebda2 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -148,14 +148,14 @@ When used in a dark variant context, `--bs-primary-text-rgb` will use the value
 
 To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <div class="text-primary">This is default primary text</div>
 <div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
 {{< /example >}}
 
 Or, choose from any of the `.text-opacity` utilities:
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <div class="text-primary">This is default primary text</div>
 <div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
 <div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index c34c35be2a..2b5fa8e778 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -90,8 +90,9 @@ <h1 class="title">Title</h1>
     </div>
 {{- end }}
 {{- if eq $mode "search" }}
-    <form class="d-flex d-none d-lg-flex col-3 navbar-item" role="search">
+    <form class="d-none d-lg-flex col-3 navbar-item" role="search">
       <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
+      <button type="submit" class="btn btn-primary btn-inverse visually-hidden-focusable">Submit</button>
     </form>
 {{- end }}
     <div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">

From 32f7e7b9653f63a88b5ac3deea368c02a02ec1bc Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 1 Aug 2023 14:53:35 +0200
Subject: [PATCH 10/23] Remove a.active

---
 build/.pa11yci.json                           | 2 +-
 site/content/docs/5.3/components/scrollspy.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index aa7f09c034..09661f500d 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md
index ec8427c047..04a1fce520 100644
--- a/site/content/docs/5.3/components/scrollspy.md
+++ b/site/content/docs/5.3/components/scrollspy.md
@@ -283,7 +283,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
 
 Scrollspy is not limited to nav components and list groups, so it will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change.
 
-<div class="bd-example">
+<div class="bd-example exclude-from-pa11y-analysis">
   <div class="row">
     <div class="col-4">
       <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">

From fbce375641e541746e430a832660d422f96703c7 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 1 Aug 2023 15:18:11 +0200
Subject: [PATCH 11/23] Remove a.disabled

---
 build/.pa11yci.json                              | 2 +-
 site/content/docs/5.3/components/placeholders.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index 09661f500d..b55f696136 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/components/placeholders.md b/site/content/docs/5.3/components/placeholders.md
index e3f8af0e59..b22dd882cd 100644
--- a/site/content/docs/5.3/components/placeholders.md
+++ b/site/content/docs/5.3/components/placeholders.md
@@ -80,7 +80,7 @@ Create placeholders with the `.placeholder` class and a grid column class (e.g.,
 
 We apply additional styling to `.btn`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `&nbsp;` within the element to reflect the height when actual text is rendered in its place.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis">}}
 <p aria-hidden="true">
   <span class="placeholder col-6"></span>
 </p>

From 4885f5d4847257797797bb27e4112a45e524db35 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 1 Aug 2023 15:31:52 +0200
Subject: [PATCH 12/23] Remove .page-item.disabled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

` • This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.66:1. Recommendation:  change text colour to #757575.

   (html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(25) > div:nth-child(1) > nav > ul > li:nth-child(1) > a)

   <a class="page-link">Previous</a>`
---
 build/.pa11yci.json                            |  2 +-
 site/content/docs/5.3/components/pagination.md | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index b55f696136..a6c90cdde3 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md
index 6711464e36..ba52c49cf7 100644
--- a/site/content/docs/5.3/components/pagination.md
+++ b/site/content/docs/5.3/components/pagination.md
@@ -45,7 +45,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
 {{< example >}}
 <nav aria-label="...">
   <ul class="pagination">
-    <li class="page-item disabled">
+    <li class="page-item disabled" aria-disabled="true">
       <a class="page-link">Previous</a>
     </li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -65,7 +65,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 {{< example >}}
 <nav aria-label="...">
   <ul class="pagination">
-    <li class="page-item disabled">
+    <li class="page-item disabled" aria-disabled="true">
       <span class="page-link">Previous</span>
     </li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -87,7 +87,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 {{< example >}}
 <nav aria-label="Page navigation example">
   <ul class="pagination justify-content-center">
-    <li class="page-item disabled">
+    <li class="page-item disabled" aria-disabled="true">
       <a class="page-link">Previous</a>
     </li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -105,7 +105,7 @@ Or with `.justify-content-end`:
 {{< example >}}
 <nav aria-label="Page navigation example">
   <ul class="pagination justify-content-end">
-    <li class="page-item disabled">
+    <li class="page-item disabled" aria-disabled="true">
       <a class="page-link">Previous</a>
     </li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -126,7 +126,7 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
 {{< example >}}
 <nav aria-label="Page navigation example">
   <ul class="pagination">
-    <li class="page-item disabled"><a class="page-link">Previous</a></li>
+    <li class="page-item disabled" aria-disabled="true"><a class="page-link">Previous</a></li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
     <li class="page-item"><a class="page-link" href="#">2</a></li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
@@ -153,7 +153,7 @@ Add `.pagination-dark` to the `.pagination` for a dark variant.
 {{< example class="bg-dark" >}}
 <nav aria-label="Dark page navigation example">
   <ul class="pagination pagination-dark">
-    <li class="page-item disabled">
+    <li class="page-item disabled" aria-disabled="true">
       <a class="page-link">Previous</a>
     </li>
     <li class="page-item active" aria-current="page">

From d9e2bb2f26b5b51e0edd19a722b5202a202a17d1 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 1 Aug 2023 17:53:58 +0200
Subject: [PATCH 13/23] Remove offcanvas

---
 build/.pa11yci.json                           |  2 +-
 site/content/docs/5.3/components/navbar.md    | 12 +++---
 site/content/docs/5.3/components/offcanvas.md | 40 +++++++++----------
 site/layouts/_default/docs.html               |  4 +-
 4 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index a6c90cdde3..2aa1171219 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, caption.visually-hidden, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, :disabled + label, .is-disabled, a.text-decoration-none, caption.visually-hidden, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 8f5c2dfbf5..1316f42187 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -540,7 +540,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+    <section class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
@@ -572,7 +572,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
           <button class="btn btn-primary" type="submit">Search</button>
         </form>
       </div>
-    </div>
+    </section>
   </div>
 </nav>
 {{< /example >}}
@@ -584,9 +584,9 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
   <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
+  <section class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
     ...
-  </div>
+  </section>
 </nav>
 ```
 
@@ -602,7 +602,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
     <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
+    <section class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
@@ -634,7 +634,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
           <button class="btn btn btn-primary btn-inverse" type="submit">Search</button>
         </form>
       </div>
-    </div>
+    </section>
   </div>
 </nav>
 {{< /example >}}
diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
index d28f8ef18f..8b5a4870d6 100644
--- a/site/content/docs/5.3/components/offcanvas.md
+++ b/site/content/docs/5.3/components/offcanvas.md
@@ -31,7 +31,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
 
 <!--Boosted mod: replace aria-label="Close" with a visually hidden span (a11y)-->
 {{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" stackblitz_add_js="true" >}}
-<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+<section class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -39,7 +39,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
   <div class="offcanvas-body">
     Content for the offcanvas goes here. You can place just about any Boosted component or custom elements here.
   </div>
-</div>
+</section>
 {{< /example >}}
 
 ### Live demo
@@ -60,7 +60,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
   Button with data-bs-target
 </button>
 
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+<section class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -80,7 +80,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
       </ul>
     </div>
   </div>
-</div>
+</section>
 {{< /example >}}
 
 ### Body scrolling
@@ -91,7 +91,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
 {{< example stackblitz_add_js="true" >}}
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
 
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+<section class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -99,7 +99,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
   <div class="offcanvas-body">
     <p>Try scrolling the rest of the page to see this option in action.</p>
   </div>
-</div>
+</section>
 {{< /example >}}
 
 ### Body scrolling and backdrop
@@ -110,7 +110,7 @@ You can also enable `<body>` scrolling with a visible backdrop.
 {{< example stackblitz_add_js="true" >}}
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
 
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
+<section class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -118,7 +118,7 @@ You can also enable `<body>` scrolling with a visible backdrop.
   <div class="offcanvas-body">
     <p>Try scrolling the rest of the page to see this option in action.</p>
   </div>
-</div>
+</section>
 {{< /example >}}
 
 
@@ -131,7 +131,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
   Toggle static offcanvas
 </button>
 
-<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
+<section class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -141,7 +141,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
       I will not close if you click outside of me.
     </div>
   </div>
-</div>
+</section>
 {{< /example >}}
 
 ## Dark offcanvas
@@ -151,7 +151,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
 
 {{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" stackblitz_add_js="true" >}}
-<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
+<section class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
@@ -159,7 +159,7 @@ Change the appearance of offcanvases with utilities to better match them to diff
   <div class="offcanvas-body">
     <p>Place offcanvas content here.</p>
   </div>
-</div>
+</section>
 {{< /example >}}
 
 ## Responsive
@@ -173,7 +173,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
 
 <div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
 
-<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
+<section class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -181,7 +181,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
   <div class="offcanvas-body">
     <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
   </div>
-</div>
+</section>
 {{< /example >}}
 
 Responsive offcanvas classes are available across for each breakpoint.
@@ -208,7 +208,7 @@ Try the top, right, and bottom examples out below.
 {{< example stackblitz_add_js="true" >}}
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
 
-<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+<section class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -216,14 +216,14 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas-body">
     ...
   </div>
-</div>
+</section>
 {{< /example >}}
 
 <!--Boosted mod: replace aria-label="Close" with a visually hidden span (a11y)-->
 {{< example stackblitz_add_js="true" >}}
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
 
-<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+<section class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -231,14 +231,14 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas-body">
     ...
   </div>
-</div>
+</section>
 {{< /example >}}
 
 <!--Boosted mod: replace aria-label="Close" with a visually hidden span (a11y)-->
 {{< example stackblitz_add_js="true" >}}
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
 
-<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
+<section class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
@@ -246,7 +246,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas-body small">
     ...
   </div>
-</div>
+</section>
 {{< /example >}}
 
 ## Accessibility
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 78fcc39fc1..771ec8fb92 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -2,7 +2,7 @@
 {{ define "main" }}
   <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
-      <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
+      <section class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">
           <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
           <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"></button>
@@ -11,7 +11,7 @@ <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
         <div class="offcanvas-body">
           {{ partial "docs-sidebar" . }}
         </div>
-      </div>
+      </section>
     </aside>
 
     <main class="bd-main order-1">

From f1c2caa3ab1c51239d005a702211c6bce429ffde Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 1 Aug 2023 18:01:08 +0200
Subject: [PATCH 14/23] Remove useless accordion rule

---
 build/.pa11yci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index 2aa1171219..968ba2826a 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .accordion-sm .accordion-button, .table-dark .table-active, :disabled + label, .is-disabled, a.text-decoration-none, caption.visually-hidden, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .table-dark .table-active, :disabled + label, .is-disabled, a.text-decoration-none, caption.visually-hidden, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]

From 49fc609f7b944e4377630845bf6382db81c89cb7 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 2 Aug 2023 08:34:49 +0200
Subject: [PATCH 15/23] Remove `a.text-decoration-none`

---
 build/.pa11yci.json                     | 2 +-
 site/content/docs/5.3/utilities/text.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index 968ba2826a..3bc2c5dcd7 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .table-dark .table-active, :disabled + label, .is-disabled, a.text-decoration-none, caption.visually-hidden, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .table-dark .table-active, :disabled + label, .is-disabled, caption.visually-hidden, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md
index 27abd84028..fec282fd24 100644
--- a/site/content/docs/5.3/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -140,7 +140,7 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
 
 Decorate text in components with text decoration classes.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <p class="text-decoration-underline">This text has a line underneath it.</p>
 <p class="text-decoration-line-through">This text has a line going through it.</p>
 <a href="#" class="text-decoration-none">This link has its text decoration removed</a>

From 3cfd5f252fba33020e3bfdc181d59d37e001f05b Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 2 Aug 2023 08:50:23 +0200
Subject: [PATCH 16/23] Remove `.overflow-*` hidden elements and replace them
 with `.exclude-from-pa11y-analysis`

---
 build/.pa11yci.json                         | 2 +-
 site/content/docs/5.3/utilities/overflow.md | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index 3bc2c5dcd7..e8df2e457b 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .table-dark .table-active, :disabled + label, .is-disabled, caption.visually-hidden, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .table-dark .table-active, :disabled + label, .is-disabled, caption.visually-hidden, .table-responsive, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md
index 21860831aa..d60e9ff380 100644
--- a/site/content/docs/5.3/utilities/overflow.md
+++ b/site/content/docs/5.3/utilities/overflow.md
@@ -38,7 +38,7 @@ Adjust the `overflow` property on the fly with four default values and classes.
 
 Adjust the `overflow-x` property to affect the overflow of content horizontally.
 
-<div class="bd-example d-md-flex">
+<div class="bd-example d-md-flex exclude-from-pa11y-analysis">
   <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
     <div><code>.overflow-x-auto</code> example on an element</div>
     <div> with set width and height dimensions.</div>
@@ -68,7 +68,7 @@ Adjust the `overflow-x` property to affect the overflow of content horizontally.
 
 Adjust the `overflow-y` property to affect the overflow of content vertically.
 
-<div class="bd-example d-md-flex">
+<div class="bd-example d-md-flex exclude-from-pa11y-analysis">
   <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;">
     <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
   </div>

From 01ae7e21f5b02eec213802041d2d3769756a01d8 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 2 Aug 2023 08:58:03 +0200
Subject: [PATCH 17/23] Remove `.table-responsive`

---
 build/.pa11yci.json                     |  2 +-
 site/content/docs/5.3/content/tables.md | 24 ++++++++++++------------
 site/content/docs/5.3/layout/grid.md    |  2 +-
 site/layouts/shortcodes/bs-table.html   |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index e8df2e457b..cff080ab86 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .table-dark .table-active, :disabled + label, .is-disabled, caption.visually-hidden, .table-responsive, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .table-dark .table-active, caption.visually-hidden, :disabled + label, .is-disabled, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index 6bc770bc16..f203f0c475 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -302,7 +302,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table align-middle">
       <caption class="visually-hidden">Boosted vertical alignment changed table</caption>
       <thead>
@@ -338,7 +338,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table align-middle">
     ...
     <thead>
@@ -521,7 +521,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table">
       <caption class="visually-hidden">Boosted responsive table</caption>
       <thead>
@@ -581,7 +581,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table">
     ...
   </table>
@@ -598,7 +598,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{ range $.Site.Data.breakpoints }}
 {{ if not (eq . "xs") }}
 <div class="bd-example">
-  <div class="table-responsive{{ .abbr }}">
+  <div class="table-responsive{{ .abbr }}" tabindex="0">
     <table class="table">
     <caption class="visually-hidden">Boosted responsive table for {{ .abbr }} breakpoint and under</caption>
       <thead>
@@ -660,7 +660,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< tables.inline >}}
 {{- range $.Site.Data.breakpoints -}}
 {{- if not (eq . "xs") }}
-<div class="table-responsive{{ .abbr }}">
+<div class="table-responsive{{ .abbr }}" tabindex="0">
   <table class="table">
     ...
   </table>
@@ -682,7 +682,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 {{< /callout >}}
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table table-sm table-hover has-checkbox">
       <caption class="visually-hidden">Boosted table with a selection feature</caption>
       <thead>
@@ -820,7 +820,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table table-sm table-hover has-checkbox">
     ...
     <thead>
@@ -884,7 +884,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 Use SVG or PNG to display icons or thumbnails in your compact table data cell elements (`40px` row height). It will automatically add negative margin to ensure vertical alignment (for icons or thumbnails smaller than `2.5rem`).
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table table-sm table-hover align-middle has-checkbox">
       <caption class="visually-hidden">Boosted table with icons in a row</caption>
       <thead>
@@ -1064,7 +1064,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table table-sm table-hover align-middle has-checkbox">
     ...
     <td>
@@ -1087,7 +1087,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
 Use SVG or PNG to display icons or thumbnails in your table data cell elements (`50px` row height). It will automatically add negative margin to ensure vertical alignment (for icons or thumbnails smaller than `2.5rem`).
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table align-middle">
       <caption class="visually-hidden">Boosted table with icons inside a row</caption>
       <thead>
@@ -1201,7 +1201,7 @@ Use SVG or PNG to display icons or thumbnails in your table data cell elements (
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table align-middle">
     ...
     <td>
diff --git a/site/content/docs/5.3/layout/grid.md b/site/content/docs/5.3/layout/grid.md
index b08bbe6220..7fd32bcc83 100644
--- a/site/content/docs/5.3/layout/grid.md
+++ b/site/content/docs/5.3/layout/grid.md
@@ -65,7 +65,7 @@ Boosted's grid system can adapt across all six default breakpoints, and any brea
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
 
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table mb-4">
     <thead>
       <tr>
diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html
index 9eec109cb8..4880c7f2ee 100644
--- a/site/layouts/shortcodes/bs-table.html
+++ b/site/layouts/shortcodes/bs-table.html
@@ -4,6 +4,6 @@
 
 {{- $css_class := .Get 0 | default "table" -}}
 {{- $html_table := .Inner | markdownify -}}
-{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}}
+{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive" tabindex="0"><table class="%s">` $css_class) -}}
 {{- $html_table = replace $html_table "</table>" "</table></div>" -}}
 {{- $html_table | safeHTML -}}

From b2f1b3b5c33caf1af40ecfbf7cead4a50f3249e8 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 2 Aug 2023 09:17:01 +0200
Subject: [PATCH 18/23] Explanations about the exclude-from-pa11y-analysis

---
 site/content/docs/5.3/components/placeholders.md | 1 +
 site/content/docs/5.3/components/scrollspy.md    | 1 +
 site/content/docs/5.3/customize/color.md         | 1 +
 site/content/docs/5.3/utilities/colors.md        | 1 +
 site/content/docs/5.3/utilities/overflow.md      | 2 ++
 site/content/docs/5.3/utilities/text.md          | 1 +
 6 files changed, 7 insertions(+)

diff --git a/site/content/docs/5.3/components/placeholders.md b/site/content/docs/5.3/components/placeholders.md
index b22dd882cd..b786b7a15e 100644
--- a/site/content/docs/5.3/components/placeholders.md
+++ b/site/content/docs/5.3/components/placeholders.md
@@ -80,6 +80,7 @@ Create placeholders with the `.placeholder` class and a grid column class (e.g.,
 
 We apply additional styling to `.btn`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `&nbsp;` within the element to reflect the height when actual text is rendered in its place.
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because the `a` here is seen as an anchor link -->
 {{< example class="exclude-from-pa11y-analysis">}}
 <p aria-hidden="true">
   <span class="placeholder col-6"></span>
diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md
index 04a1fce520..f37b5121a7 100644
--- a/site/content/docs/5.3/components/scrollspy.md
+++ b/site/content/docs/5.3/components/scrollspy.md
@@ -283,6 +283,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
 
 Scrollspy is not limited to nav components and list groups, so it will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change.
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because of the `a.active` that is #f16e00 but with a too small font-size -->
 <div class="bd-example exclude-from-pa11y-analysis">
   <div class="row">
     <div class="col-4">
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
index 119581ac67..8f2ec4550d 100644
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/content/docs/5.3/customize/color.md
@@ -157,6 +157,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
 **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
 {{< /callout >}}
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because this table comes from Bootstrap and wasn't changed at all -->
 <table class="table table-swatches exclude-from-pa11y-analysis">
   <thead>
     <tr>
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 902e9ebda2..a9f1eda321 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -148,6 +148,7 @@ When used in a dark variant context, `--bs-primary-text-rgb` will use the value
 
 To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because the use of `.text-primary` on small texts + opacity -->
 {{< example class="exclude-from-pa11y-analysis" >}}
 <div class="text-primary">This is default primary text</div>
 <div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md
index d60e9ff380..e07c9babfa 100644
--- a/site/content/docs/5.3/utilities/overflow.md
+++ b/site/content/docs/5.3/utilities/overflow.md
@@ -38,6 +38,7 @@ Adjust the `overflow` property on the fly with four default values and classes.
 
 Adjust the `overflow-x` property to affect the overflow of content horizontally.
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because scrollable region must have keyboard access -->
 <div class="bd-example d-md-flex exclude-from-pa11y-analysis">
   <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
     <div><code>.overflow-x-auto</code> example on an element</div>
@@ -68,6 +69,7 @@ Adjust the `overflow-x` property to affect the overflow of content horizontally.
 
 Adjust the `overflow-y` property to affect the overflow of content vertically.
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because scrollable region must have keyboard access -->
 <div class="bd-example d-md-flex exclude-from-pa11y-analysis">
   <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;">
     <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md
index fec282fd24..fa3c4ef1da 100644
--- a/site/content/docs/5.3/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -140,6 +140,7 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
 
 Decorate text in components with text decoration classes.
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because links must be distinguishable without relying on color  -->
 {{< example class="exclude-from-pa11y-analysis" >}}
 <p class="text-decoration-underline">This text has a line underneath it.</p>
 <p class="text-decoration-line-through">This text has a line going through it.</p>

From aa6db67b83e5a972739187b70a6d0edba6ae605c Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 2 Aug 2023 10:13:59 +0200
Subject: [PATCH 19/23] Small patch

---
 scss/_variables.scss                            | 2 +-
 site/assets/js/tac.js                           | 2 +-
 site/content/docs/5.3/helpers/stretched-link.md | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8e85a5d5ac..0adad612ce 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -829,7 +829,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-xlg !default;
-$blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // Boosted mod: instead of `$gray-700`
+$blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // Boosted mod: instead of `$gray-600`
 $blockquote-footer-font-size: $small-font-size !default;
 $blockquote-line-height:      1.5 !default; // Boosted mod
 $blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // Boosted mod
diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index 93b1915bab..41489f6ff2 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -74,7 +74,7 @@
       const toggle = document
         .createRange()
         .createContextualFragment(
-          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none exclude-from-pa11y-analysis"></div>`
+          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager Allowed</label><input id="googletagmanagerDenied" class="d-none"><label class="d-none" for="googletagmanagerDenied">Google Tag Manager Denied</label></div>`
         )
       ask.innerHTML = ''
       ask.append(toggle)
diff --git a/site/content/docs/5.3/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index 78d4de851c..17844c6cfc 100644
--- a/site/content/docs/5.3/helpers/stretched-link.md
+++ b/site/content/docs/5.3/helpers/stretched-link.md
@@ -68,8 +68,8 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
     <p class="card-text">
       <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
     </p>
-    <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
-      This <a href="#" class="text-danger stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
+    <p class="card-text text-bg-dark" style="transform: rotate(0);">
+      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
     </p>
   </div>
 </div>

From d94b67e51fa5c9dd25d4b7c76e7a8b6b6adb8352 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Fri, 4 Aug 2023 10:19:13 +0200
Subject: [PATCH 20/23] fix(review)

---
 build/.pa11yci.json                           |  2 +-
 .../docs/5.3/components/orange-navbar.md      | 10 ++++----
 site/content/docs/5.3/content/tables.md       | 24 +++++++++----------
 .../content/docs/5.3/examples/form/index.html |  1 +
 site/content/docs/5.3/layout/grid.md          |  2 +-
 site/content/docs/5.3/utilities/colors.md     |  3 ++-
 site/content/docs/5.3/utilities/text.md       |  2 +-
 site/layouts/shortcodes/bs-table.html         |  2 +-
 .../shortcodes/orange-global-headers.html     | 10 ++++----
 9 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index cff080ab86..1748b24853 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .table-dark .table-active, caption.visually-hidden, :disabled + label, .is-disabled, .exclude-from-pa11y-analysis",
+    "hideElements": "iframe, .table-dark .table-active, caption.visually-hidden, .table-responsive, :disabled + label, .is-disabled, .exclude-from-pa11y-analysis",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
index 31e4e7d369..86a7242e8b 100644
--- a/site/content/docs/5.3/components/orange-navbar.md
+++ b/site/content/docs/5.3/components/orange-navbar.md
@@ -356,10 +356,12 @@ You can add a search input into your Global header.
       ...
 
       <!-- Navbar with action icons -->
-      <form class="d-none d-lg-flex col-3 navbar-item" role="search">
-        <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
-        <button type="submit" class="btn btn-primary btn-inverse visually-hidden-focusable">Submit</button>
-      </form>
+      <div class="d-none d-lg-block col-3" role="search">
+        <form class="d-flex navbar-item">
+          <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
+          <button type="submit" class="btn btn-primary btn-inverse visually-hidden-focusable">Submit</button>
+        </form>
+      </div>
       <div id="global-header-5.2" class="navbar-collapse collapse d-sm-flex global-header-5">
         <ul class="navbar-nav flex-row">
           <li class="nav-item d-lg-none">
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index f203f0c475..6bc770bc16 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -302,7 +302,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
 
 <div class="bd-example">
-  <div class="table-responsive" tabindex="0">
+  <div class="table-responsive">
     <table class="table align-middle">
       <caption class="visually-hidden">Boosted vertical alignment changed table</caption>
       <thead>
@@ -338,7 +338,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
 </div>
 
 ```html
-<div class="table-responsive" tabindex="0">
+<div class="table-responsive">
   <table class="table align-middle">
     ...
     <thead>
@@ -521,7 +521,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
 <div class="bd-example">
-  <div class="table-responsive" tabindex="0">
+  <div class="table-responsive">
     <table class="table">
       <caption class="visually-hidden">Boosted responsive table</caption>
       <thead>
@@ -581,7 +581,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 </div>
 
 ```html
-<div class="table-responsive" tabindex="0">
+<div class="table-responsive">
   <table class="table">
     ...
   </table>
@@ -598,7 +598,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{ range $.Site.Data.breakpoints }}
 {{ if not (eq . "xs") }}
 <div class="bd-example">
-  <div class="table-responsive{{ .abbr }}" tabindex="0">
+  <div class="table-responsive{{ .abbr }}">
     <table class="table">
     <caption class="visually-hidden">Boosted responsive table for {{ .abbr }} breakpoint and under</caption>
       <thead>
@@ -660,7 +660,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< tables.inline >}}
 {{- range $.Site.Data.breakpoints -}}
 {{- if not (eq . "xs") }}
-<div class="table-responsive{{ .abbr }}" tabindex="0">
+<div class="table-responsive{{ .abbr }}">
   <table class="table">
     ...
   </table>
@@ -682,7 +682,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 {{< /callout >}}
 
 <div class="bd-example">
-  <div class="table-responsive" tabindex="0">
+  <div class="table-responsive">
     <table class="table table-sm table-hover has-checkbox">
       <caption class="visually-hidden">Boosted table with a selection feature</caption>
       <thead>
@@ -820,7 +820,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 </div>
 
 ```html
-<div class="table-responsive" tabindex="0">
+<div class="table-responsive">
   <table class="table table-sm table-hover has-checkbox">
     ...
     <thead>
@@ -884,7 +884,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 Use SVG or PNG to display icons or thumbnails in your compact table data cell elements (`40px` row height). It will automatically add negative margin to ensure vertical alignment (for icons or thumbnails smaller than `2.5rem`).
 
 <div class="bd-example">
-  <div class="table-responsive" tabindex="0">
+  <div class="table-responsive">
     <table class="table table-sm table-hover align-middle has-checkbox">
       <caption class="visually-hidden">Boosted table with icons in a row</caption>
       <thead>
@@ -1064,7 +1064,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
 </div>
 
 ```html
-<div class="table-responsive" tabindex="0">
+<div class="table-responsive">
   <table class="table table-sm table-hover align-middle has-checkbox">
     ...
     <td>
@@ -1087,7 +1087,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
 Use SVG or PNG to display icons or thumbnails in your table data cell elements (`50px` row height). It will automatically add negative margin to ensure vertical alignment (for icons or thumbnails smaller than `2.5rem`).
 
 <div class="bd-example">
-  <div class="table-responsive" tabindex="0">
+  <div class="table-responsive">
     <table class="table align-middle">
       <caption class="visually-hidden">Boosted table with icons inside a row</caption>
       <thead>
@@ -1201,7 +1201,7 @@ Use SVG or PNG to display icons or thumbnails in your table data cell elements (
 </div>
 
 ```html
-<div class="table-responsive" tabindex="0">
+<div class="table-responsive">
   <table class="table align-middle">
     ...
     <td>
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index f7f75b0a30..0b18c1ca51 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -87,6 +87,7 @@ <h1 class="display-1">Become a reseller</h1>
         </p>
         <form class="needs-validation mb-5" novalidate>
           <div class="row">
+            <!-- Boosted mod: exclude-from-pa11y-analysis because the use of `.text-primary` on small texts leads to insufficient color contrast -->
             <div class="col-12 exclude-from-pa11y-analysis" aria-hidden="true">
               <p class="fw-bold mb-4">
                 <span class="text-primary me-1">*</span>indicates required
diff --git a/site/content/docs/5.3/layout/grid.md b/site/content/docs/5.3/layout/grid.md
index 7fd32bcc83..b08bbe6220 100644
--- a/site/content/docs/5.3/layout/grid.md
+++ b/site/content/docs/5.3/layout/grid.md
@@ -65,7 +65,7 @@ Boosted's grid system can adapt across all six default breakpoints, and any brea
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
 
-<div class="table-responsive" tabindex="0">
+<div class="table-responsive">
   <table class="table mb-4">
     <thead>
       <tr>
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index a9f1eda321..ec5539ec56 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -148,7 +148,7 @@ When used in a dark variant context, `--bs-primary-text-rgb` will use the value
 
 To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
 
-<!-- Boosted mod: exclude-from-pa11y-analysis because the use of `.text-primary` on small texts + opacity -->
+<!-- Boosted mod: exclude-from-pa11y-analysis because the use of `.text-primary` on small texts + opacity leads to insufficient color contrast -->
 {{< example class="exclude-from-pa11y-analysis" >}}
 <div class="text-primary">This is default primary text</div>
 <div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
@@ -156,6 +156,7 @@ To change that opacity, override `--bs-text-opacity` via custom styles or inline
 
 Or, choose from any of the `.text-opacity` utilities:
 
+<!-- Boosted mod: exclude-from-pa11y-analysis because the use of `.text-primary` on small texts + opacity leads to insufficient color contrast -->
 {{< example class="exclude-from-pa11y-analysis" >}}
 <div class="text-primary">This is default primary text</div>
 <div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md
index fa3c4ef1da..9a6583ad3a 100644
--- a/site/content/docs/5.3/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -140,7 +140,7 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
 
 Decorate text in components with text decoration classes.
 
-<!-- Boosted mod: exclude-from-pa11y-analysis because links must be distinguishable without relying on color  -->
+<!-- Boosted mod: exclude-from-pa11y-analysis because links must be distinguishable without relying on color only -->
 {{< example class="exclude-from-pa11y-analysis" >}}
 <p class="text-decoration-underline">This text has a line underneath it.</p>
 <p class="text-decoration-line-through">This text has a line going through it.</p>
diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html
index 4880c7f2ee..9eec109cb8 100644
--- a/site/layouts/shortcodes/bs-table.html
+++ b/site/layouts/shortcodes/bs-table.html
@@ -4,6 +4,6 @@
 
 {{- $css_class := .Get 0 | default "table" -}}
 {{- $html_table := .Inner | markdownify -}}
-{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive" tabindex="0"><table class="%s">` $css_class) -}}
+{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}}
 {{- $html_table = replace $html_table "</table>" "</table></div>" -}}
 {{- $html_table | safeHTML -}}
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
index 2b5fa8e778..b981127d62 100644
--- a/site/layouts/shortcodes/orange-global-headers.html
+++ b/site/layouts/shortcodes/orange-global-headers.html
@@ -90,10 +90,12 @@ <h1 class="title">Title</h1>
     </div>
 {{- end }}
 {{- if eq $mode "search" }}
-    <form class="d-none d-lg-flex col-3 navbar-item" role="search">
-      <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
-      <button type="submit" class="btn btn-primary btn-inverse visually-hidden-focusable">Submit</button>
-    </form>
+    <div class="d-none d-lg-block col-3" role="search">
+      <form class="d-flex navbar-item">
+        <input class="form-control bg-transparent text-white border border-2 border-dark" type="search" placeholder="Search" aria-label="Search">
+        <button type="submit" class="btn btn-primary btn-inverse visually-hidden-focusable">Submit</button>
+      </form>
+    </div>
 {{- end }}
     <div id="{{ $id }}.2" class="navbar-collapse collapse d-sm-flex{{ cond $responsive_logo " ms-lg-3" "" }} {{ $id }}">
       <ul class="navbar-nav flex-row">

From c9646bdb2b2b31d549467dad825e276bf8a0ccf1 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Mon, 7 Aug 2023 16:01:59 +0200
Subject: [PATCH 21/23] Add a visually-hidden label

---
 site/layouts/shortcodes/example.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 60cf6c9177..310e663740 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -33,9 +33,11 @@
         <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">
             <svg class="bi" aria-hidden="true" focusable="false"><use xlink:href="#lightning-charge-fill"/></svg>
+            <span class="visually-hidden">Try it on StackBlitz</span>
           </button>
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
             <svg class="bi" aria-hidden="true" focusable="false"><use xlink:href="#clipboard"/></svg>
+            <span class="visually-hidden">Copy to clipboard</span>
           </button>
         </div>
       </div>

From 44883e38aee38eb234032c774ff725c38a30e88a Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 22 Aug 2023 16:16:23 +0200
Subject: [PATCH 22/23] After talking to a11y expert

---
 site/content/docs/5.3/examples/form/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index 0b18c1ca51..dbd968bfae 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/site/content/docs/5.3/examples/form/index.html
@@ -88,9 +88,9 @@ <h1 class="display-1">Become a reseller</h1>
         <form class="needs-validation mb-5" novalidate>
           <div class="row">
             <!-- Boosted mod: exclude-from-pa11y-analysis because the use of `.text-primary` on small texts leads to insufficient color contrast -->
-            <div class="col-12 exclude-from-pa11y-analysis" aria-hidden="true">
+            <div class="col-12">
               <p class="fw-bold mb-4">
-                <span class="text-primary me-1">*</span>indicates required
+                <span class="text-primary me-1 exclude-from-pa11y-analysis">*</span>indicates required
               </p>
             </div>
             <div class="col-sm-4 col-md-6 mb-3">

From 8ec6f59c923b513b15d8ab407042612e7d4754ca Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Thu, 4 Jan 2024 11:58:25 +0100
Subject: [PATCH 23/23] fix ?

---
 build/.pa11yci.json                             |  2 +-
 site/content/docs/5.3/components/buttons.md     |  2 +-
 site/content/docs/5.3/components/navbar.md      | 14 +++++++-------
 site/content/docs/5.3/forms/checks-radios.md    |  2 +-
 site/content/docs/5.3/helpers/colored-links.md  |  2 +-
 site/content/docs/5.3/helpers/stretched-link.md |  2 +-
 site/content/docs/5.3/utilities/colors.md       |  2 +-
 site/content/docs/5.3/utilities/link.md         |  2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
index c625f6da5a..b168b42b59 100644
--- a/build/.pa11yci.json
+++ b/build/.pa11yci.json
@@ -16,7 +16,7 @@
       "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, .table-responsive, :disabled + label, .is-disabled, .exclude-from-pa11y-analysis, #text-decoration + p + div a.text-decoration-none",
+    "hideElements": "iframe, .table-responsive, a.disabled:not([href]), :disabled + label, .is-disabled, .exclude-from-pa11y-analysis, #text-decoration + p + div a.text-decoration-none",
     "ignore": [
       "color-contrast"
     ]
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index fd387ea5be..ebf6bfa2ff 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -202,7 +202,7 @@ The only variant of outline buttons that should be used is the `.btn-outline-sec
 Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
 {{< /design-callout-alert >}}
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 {{< buttons.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 58f7611ba1..13ba2d24fd 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -44,7 +44,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 
 Here's an example of all the sub-components included in a responsive dark-themed navbar that automatically collapses at the `lg` (large) breakpoint.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
@@ -133,7 +133,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
 
 Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
@@ -166,7 +166,7 @@ Please note that you should also add the `aria-current` attribute on the active
 
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
@@ -191,7 +191,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 
 You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
@@ -303,7 +303,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 
 Mix and match with other components and utilities as needed.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
@@ -346,7 +346,7 @@ Mix and match with other components and utilities as needed.
 
 Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
 
-<div class="bd-example">
+<div class="bd-example exclude-from-pa11y-analysis">
   <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
     <div class="container-fluid">
       <div class="navbar-brand">
@@ -587,7 +587,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
 
 Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <div class="navbar-brand">
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index 4a3923fe72..c128948539 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -436,7 +436,7 @@ Make star ratings readable but non-editable by using `<span>`s instead of `<inpu
 
 Make star ratings look inactive inside or outside a form by adding the `disabled` boolean attribute to the `<fieldset>` element and the `checked` boolean attribute to any `<input>` element.
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <fieldset class="star-rating" disabled aria-hidden="true">
   <legend class="visually-hidden">Disabled star rating</legend>
 
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md
index a5389dd03f..9e888d526a 100644
--- a/site/content/docs/5.3/helpers/colored-links.md
+++ b/site/content/docs/5.3/helpers/colored-links.md
@@ -24,7 +24,7 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class
 {{< /callout >}}
 
 <!--Boosted mod: use `contrast_color` as background to ensure a good contrast-->
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 {{< colored-links.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p><a href="#" class="link-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">{{ .name | title }} link</a></p>
diff --git a/site/content/docs/5.3/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index 17844c6cfc..9873a92a88 100644
--- a/site/content/docs/5.3/helpers/stretched-link.md
+++ b/site/content/docs/5.3/helpers/stretched-link.md
@@ -59,7 +59,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
 - A `will-change` value of `transform` or `perspective`
 - A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox)
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 <div class="card" style="width: 18rem;">
   {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card icon" >}}
   <div class="card-body">
diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index a18953a148..cb4e076c97 100644
--- a/site/content/docs/5.3/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -26,7 +26,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
 {{< /callout >}}
 
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md
index 61e68641b8..328508b011 100644
--- a/site/content/docs/5.3/utilities/link.md
+++ b/site/content/docs/5.3/utilities/link.md
@@ -88,7 +88,7 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under
 [Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
 
 <!--Boosted mod: use `contrast_color` as background to ensure a good contrast-->
-{{< example >}}
+{{< example class="exclude-from-pa11y-analysis" >}}
 {{< colored-links.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p><a href="#" class="link-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>