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

twbs · Aug 2, 2024 · ac831aa · ac831aa
1 parent 163f1f7
commit ac831aa
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 35 deletions.
diff --git a/site/content/docs/5.3/examples/buttons/index.html b/site/content/docs/5.3/examples/buttons/index.html
@@ -40,11 +40,11 @@
 <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
@@ -227,7 +227,7 @@
             <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 @@
             <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
@@ -30,7 +30,7 @@ <h1 class="text-body-emphasis">Jumbotron with icon</h1>
     <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
@@ -38,25 +38,25 @@ <h2 class="text-body-emphasis">Starter projects</h2>
         <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 @@ <h2 class="text-body-emphasis">Guides</h2>
         <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
@@ -15,7 +15,7 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
     {{ 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 @@ <h3 class="h5 mb-1">
               {{- $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
@@ -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 @@ <h3 class="fw-semibold">Quickly customize components</h3>
       <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 @@ <h3 class="fw-semibold">Create and extend utilities</h3>
       <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
@@ -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 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with
     <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
@@ -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 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass
   <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
@@ -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 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</
   <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
@@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
     <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
@@ -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
@@ -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 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without
     <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
@@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
     <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
diff --git a/site/layouts/partials/icons/droplet-fill.svg b/site/layouts/partials/icons/droplet-fill.svg
diff --git 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 -}}