From: Julien Déramond <juderamond@gmail.com>
Date: Fri, 2 Aug 2024 08:18:29 +0000 (+0200)
Subject: Docs: add `aria-hidden="true"` to decorative SVGs (#40686)
X-Git-Tag: v5.3.4~100
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=ac831aa4df8e817883c1510f74604ea67e26f179;p=thirdparty%2Fbootstrap.git

Docs: add `aria-hidden="true"` to decorative SVGs (#40686)
---

diff --git a/site/content/docs/5.3/examples/buttons/index.html b/site/content/docs/5.3/examples/buttons/index.html
index 910c0d85ec..54dbbe30a1 100644
--- a/site/content/docs/5.3/examples/buttons/index.html
+++ b/site/content/docs/5.3/examples/buttons/index.html
@@ -40,11 +40,11 @@ body_class: ""
 <div class="d-flex gap-2 justify-content-center py-5">
   <button class="btn btn-primary d-inline-flex align-items-center" type="button">
     Primary icon
-    <svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
   </button>
   <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
     Secondary icon
-    <svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
   </button>
 </div>
 
diff --git a/site/content/docs/5.3/examples/dropdowns/index.html b/site/content/docs/5.3/examples/dropdowns/index.html
index 6dc038316b..099b412ca0 100644
--- a/site/content/docs/5.3/examples/dropdowns/index.html
+++ b/site/content/docs/5.3/examples/dropdowns/index.html
@@ -227,7 +227,7 @@ body_class: ""
             <option value="December">December</option>
           </select>
           <button class="btn cal-btn" type="button" aria-label="next month">
-            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
           </button>
         </div>
         <div class="cal-weekdays text-body-secondary">
@@ -306,7 +306,7 @@ body_class: ""
             <option value="December">December</option>
           </select>
           <button class="btn cal-btn" type="button" aria-label="next month">
-            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
           </button>
         </div>
         <div class="cal-weekdays text-body-secondary">
diff --git a/site/content/docs/5.3/examples/jumbotrons/index.html b/site/content/docs/5.3/examples/jumbotrons/index.html
index efb12bb6b3..9c8f058410 100644
--- a/site/content/docs/5.3/examples/jumbotrons/index.html
+++ b/site/content/docs/5.3/examples/jumbotrons/index.html
@@ -30,7 +30,7 @@ body_class: ""
     <div class="d-inline-flex gap-2 mb-5">
       <button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
         Call to action
-        <svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg>
+        <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
       </button>
       <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
         Secondary link
diff --git a/site/content/docs/5.3/examples/starter-template/index.html b/site/content/docs/5.3/examples/starter-template/index.html
index ec8e57df7c..75f029a56b 100644
--- a/site/content/docs/5.3/examples/starter-template/index.html
+++ b/site/content/docs/5.3/examples/starter-template/index.html
@@ -38,25 +38,25 @@ title: Starter Template
         <ul class="list-unstyled ps-0">
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap npm starter
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Parcel starter
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Vite starter
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Webpack starter
             </a>
           </li>
@@ -69,31 +69,31 @@ title: Starter Template
         <ul class="list-unstyled ps-0">
           <li>
             <a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap quick start guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Webpack guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Parcel guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Vite guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
-              <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Contributing to Bootstrap
             </a>
           </li>
diff --git a/site/layouts/partials/examples/main.html b/site/layouts/partials/examples/main.html
index 902f964b45..3dbb640a73 100644
--- a/site/layouts/partials/examples/main.html
+++ b/site/layouts/partials/examples/main.html
@@ -15,7 +15,7 @@
     {{ if (eq $i 0) }}<div class="row">{{ end }}
       {{ if $entry.external -}}
         <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
-          <svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
+          <svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
           <div>
             <h3 class="h5 mb-1">
               <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener">
@@ -27,7 +27,7 @@
               {{- $indexPath := default "index.html" $example.indexPath -}}
               {{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
               <a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
-                <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
+                <svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg>
                 Edit in StackBlitz
               </a>
             </p>
diff --git a/site/layouts/partials/home/components-utilities.html b/site/layouts/partials/home/components-utilities.html
index e7be8fe812..e18b403ded 100644
--- a/site/layouts/partials/home/components-utilities.html
+++ b/site/layouts/partials/home/components-utilities.html
@@ -1,11 +1,11 @@
 <section class="pb-md-5 mb-5">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
-      <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
     </div>
-    <svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg>
+    <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
-      <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
     <p class="lead fw-normal">
@@ -55,7 +55,7 @@
       <p class="d-flex justify-content-start mb-md-0">
         <a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
           Explore customized components
-          <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+          <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
         </a>
       </p>
     </div>
@@ -80,7 +80,7 @@ $utilities: map-merge(
       <p class="d-flex justify-content-start mb-md-0">
         <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
           Explore the utility API
-          <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+          <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
         </a>
       </p>
     </div>
diff --git a/site/layouts/partials/home/css-variables.html b/site/layouts/partials/home/css-variables.html
index 96a48287b7..750db34094 100644
--- a/site/layouts/partials/home/css-variables.html
+++ b/site/layouts/partials/home/css-variables.html
@@ -1,7 +1,7 @@
 <section class="row g-md-5 pb-md-5 mb-5 align-items-center">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
-      <svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
     <p class="lead fw-normal">
@@ -10,7 +10,7 @@
     <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
       <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
         Learn more about CSS variables
-        <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html
index a6d04fed4f..98edf5633d 100644
--- a/site/layouts/partials/home/customize.html
+++ b/site/layouts/partials/home/customize.html
@@ -1,6 +1,6 @@
 <section class="col-lg-7 mb-5">
   <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
-    <svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
+    <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   <p class="lead fw-normal">
@@ -9,7 +9,7 @@
   <p class="d-flex justify-content-start lead fw-normal">
     <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
       Learn more about customizing
-      <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+      <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
     </a>
   </p>
 </section>
diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
index ad645111ee..a4abb2eda5 100644
--- a/site/layouts/partials/home/get-started.html
+++ b/site/layouts/partials/home/get-started.html
@@ -1,6 +1,6 @@
 <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
   <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
-    <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
+    <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
   <p class="lead fw-normal">
@@ -9,7 +9,7 @@
   <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
     <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
       Read installation docs
-      <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+      <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
     </a>
   </p>
 </div>
diff --git a/site/layouts/partials/home/icons.html b/site/layouts/partials/home/icons.html
index 7ec81764e0..c510d9472a 100644
--- a/site/layouts/partials/home/icons.html
+++ b/site/layouts/partials/home/icons.html
@@ -10,7 +10,7 @@
     <p class="d-flex justify-content-start lead fw-normal mb-md-0">
       <a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold">
         Get Bootstrap Icons
-        <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index e8a6b886c4..c16841d818 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -4,7 +4,7 @@
       <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
         <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
           Get Security Updates for Bootstrap 3 &amp; 4
-          <svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
+          <svg class="bi" style="width: 20px; height: 20px;" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
         </span>
       </a>
       {{ partial "responsive-img" (dict "context" .
diff --git a/site/layouts/partials/home/plugins.html b/site/layouts/partials/home/plugins.html
index e28ae1bf1f..d352ce8fe2 100644
--- a/site/layouts/partials/home/plugins.html
+++ b/site/layouts/partials/home/plugins.html
@@ -1,7 +1,7 @@
 <section class="pb-md-5 mb-5">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
-      <svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
     <p class="lead fw-normal">
@@ -10,7 +10,7 @@
     <p class="d-flex justify-content-start lead fw-normal mb-md-0">
       <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
         Learn more about Bootstrap JavaScript
-        <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/layouts/partials/home/themes.html b/site/layouts/partials/home/themes.html
index add1a3583e..f5549151ff 100644
--- a/site/layouts/partials/home/themes.html
+++ b/site/layouts/partials/home/themes.html
@@ -10,7 +10,7 @@
     <p class="d-flex justify-content-start lead fw-normal mb-md-0">
       <a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
         Browse Bootstrap Themes
-        <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/layouts/partials/icons/circle-square.svg b/site/layouts/partials/icons/circle-square.svg
index edd05754df..443cdabed1 100644
--- a/site/layouts/partials/icons/circle-square.svg
+++ b/site/layouts/partials/icons/circle-square.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
   <path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
   <path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
 </svg>
diff --git a/site/layouts/partials/icons/droplet-fill.svg b/site/layouts/partials/icons/droplet-fill.svg
index 228abfa8bd..1256029d23 100644
--- a/site/layouts/partials/icons/droplet-fill.svg
+++ b/site/layouts/partials/icons/droplet-fill.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
   <path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
 </svg>
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index 6a6a020339..9cc6394354 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -36,7 +36,7 @@
       {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
     %3C/svg%3E">
 {{- else -}}
-  <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
+  <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice">
     {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
     <rect width="100%" height="100%" fill="{{ $background }}"/>
     {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}