Move aria-label to wrapping links

avoids unnecessary "link, graphic, blah" announcement in screen readers
hannahiss · Dec 10, 2024 · 2e1f116 · 2e1f116
1 parent 0bac1aa
commit 2e1f116
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 29 deletions.
diff --git a/site/content/docs/5.3/examples/badges/index.html b/site/content/docs/5.3/examples/badges/index.html
@@ -83,15 +83,15 @@
 <div class="d-flex gap-2 justify-content-center py-5">
   <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
     <span class="px-1">Primary 1</span>
-    <a href="#"><svg class="bi ms-1" width="16" height="16" role="img" aria-label="Delete primary 1"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
     <span class="px-1">Primary 2</span>
-    <a href="#"><svg class="bi ms-1" width="16" height="16" role="img" aria-label="Delete primary 2"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
     <span class="px-1">Primary 3</span>
-    <a href="#"><svg class="bi ms-1" width="16" height="16" role="img" aria-label="Delete primary 3"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
 </div>
 
@@ -102,48 +102,48 @@
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Primary
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete primary"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Secondary
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete secondary"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Success
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete success"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Danger
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete danger"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Warning
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete warning"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Info
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete info"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Light
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete light"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Dark
     <span class="vr mx-2"></span>
-    <a href="#"><svg class="bi" width="16" height="16" role="img" aria-label="Delete dark"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
   </span>
 </div>
diff --git a/site/content/docs/5.3/examples/footers/index.html b/site/content/docs/5.3/examples/footers/index.html
@@ -24,8 +24,8 @@
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
 
-    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-      <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
+      <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
     </a>
 
     <ul class="nav col-md-4 justify-content-end">
@@ -43,16 +43,16 @@
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <div class="col-md-4 d-flex align-items-center">
-      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
-        <svg class="bi" width="30" height="24" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
+        <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
       </a>
       <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24" role="img" aria-label="Twitter"><use xlink:href="#twitter"/></svg></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24" role="img" aria-label="Instagram"><use xlink:href="#instagram"/></svg></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24" role="img" aria-label="Facebook"><use xlink:href="#facebook"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
     </ul>
   </footer>
 </div>
@@ -77,8 +77,8 @@
 <div class="container">
   <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
     <div class="col mb-3">
-      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
+        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
       </a>
       <p class="text-body-secondary">&copy; {{< year >}}</p>
     </div>
@@ -177,9 +177,9 @@ <h5>Subscribe to our newsletter</h5>
     <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
       <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24" role="img" aria-label="Twitter"><use xlink:href="#twitter"/></svg></a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24" role="img" aria-label="Instagram"><use xlink:href="#instagram"/></svg></a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24" role="img" aria-label="Facebook"><use xlink:href="#facebook"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
       </ul>
     </div>
   </footer>

diff --git a/site/content/docs/5.3/examples/headers/index.html b/site/content/docs/5.3/examples/headers/index.html
@@ -159,8 +159,8 @@ <h1 class="visually-hidden">Headers examples</h1>
   <header class="py-3 mb-3 border-bottom">
     <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
       <div class="dropdown">
-        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap menu"><use xlink:href="#bootstrap"/></svg>
+        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
+          <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
         </a>
         <ul class="dropdown-menu text-small shadow">
           <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>

diff --git a/site/content/docs/5.3/examples/product/index.html b/site/content/docs/5.3/examples/product/index.html
@@ -34,17 +34,17 @@ <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
       </div>
       <div class="offcanvas-body">
         <ul class="navbar-nav flex-grow-1 justify-content-between">
-          <li class="nav-item"><a class="nav-link" href="#">
-            <svg class="bi" width="24" height="24" role="img" aria-label="Aperture"><use xlink:href="#aperture"/></svg>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
           </a></li>
           <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
-          <li class="nav-item"><a class="nav-link" href="#">
-            <svg class="bi" width="24" height="24" role="img" aria-label="Cart"><use xlink:href="#cart"/></svg>
+          <li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
           </a></li>
         </ul>
       </div>