twbs · patrickhlauke · Dec 10, 2024 · Aug 21, 2024 · Aug 21, 2024 · Aug 21, 2024
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
@@ -112,7 +112,7 @@ With an SVG:
 
 <div class="bd-example tooltip-demo">
   <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
       <rect width="100%" height="100%" fill="#563d7c"/>
       <circle cx="50" cy="50" r="30" fill="#007bff"/>
     </svg>

diff --git a/site/content/docs/5.3/examples/badges/index.html b/site/content/docs/5.3/examples/badges/index.html
@@ -82,16 +82,16 @@
 
 <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</span>
-    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+    <span class="px-1">Primary 1</span>
+    <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</span>
-    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+    <span class="px-1">Primary 2</span>
+    <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</span>
-    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+    <span class="px-1">Primary 3</span>
+    <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"><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"><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"><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"><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"><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"><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"><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"><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/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html
@@ -75,7 +75,7 @@ <h3 class="mb-0">مشاركة مميزة</h3>
           <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             أكمل القراءة
-            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
@@ -92,7 +92,7 @@ <h3 class="mb-0">عنوان الوظيفة</h3>
           <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             أكمل القراءة
-            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">

diff --git a/site/content/docs/5.3/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html
@@ -74,7 +74,7 @@ <h3 class="mb-0">Featured post</h3>
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Continue reading
-            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
@@ -91,7 +91,7 @@ <h3 class="mb-0">Post title</h3>
           <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Continue reading
-            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">

diff --git a/site/content/docs/5.3/examples/breadcrumbs/index.html b/site/content/docs/5.3/examples/breadcrumbs/index.html
@@ -29,7 +29,7 @@
     <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
       <li class="breadcrumb-item">
         <a class="link-body-emphasis" href="#">
-          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
@@ -50,7 +50,7 @@
     <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
       <li class="breadcrumb-item">
         <a class="link-body-emphasis" href="#">
-          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
@@ -71,7 +71,7 @@
     <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
       <li class="breadcrumb-item">
         <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
-          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
           Home
         </a>
       </li>

diff --git a/site/content/docs/5.3/examples/buttons/index.html b/site/content/docs/5.3/examples/buttons/index.html
@@ -65,22 +65,22 @@
 
 <div class="d-flex gap-2 justify-content-center pt-5 pb-4">
   <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
-    <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
   <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
-    <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
 </div>
 
 <div class="d-flex gap-2 justify-content-center pb-5">
   <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
-    <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
   <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
-    <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
 </div>

diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -68,12 +68,12 @@
   <ul class="navbar-nav flex-row d-md-none">
     <li class="nav-item text-nowrap">
       <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
-        <svg class="bi"><use xlink:href="#search"/></svg>
+        <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
       </button>
     </li>
     <li class="nav-item text-nowrap">
       <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
-        <svg class="bi"><use xlink:href="#list"/></svg>
+        <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
       </button>
     </li>
   </ul>
@@ -95,37 +95,37 @@ <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
           <ul class="nav flex-column">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
-                <svg class="bi"><use xlink:href="#house-fill"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
                 لوحة القيادة
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
                 الطلبات
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#cart"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
                 المنتجات
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#people"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
                 الزبائن
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#graph-up"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
                 التقارير
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#puzzle"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
                 التكاملات
               </a>
             </li>
@@ -134,31 +134,31 @@ <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
           <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
             <span>التقارير المحفوظة</span>
             <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
-              <svg class="bi"><use xlink:href="#plus-circle"/></svg>
+              <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
             </a>
           </h6>
           <ul class="nav flex-column mb-auto">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
                 الشهر الحالي
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
                 الربع الأخير
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
                 التفاعل الإجتماعي
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
                 مبيعات نهاية العام
               </a>
             </li>
@@ -169,13 +169,13 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
           <ul class="nav flex-column mb-auto">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
                 إعدادات
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi"><use xlink:href="#door-closed"/></svg>
+                <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
                 خروج
               </a>
             </li>
@@ -193,7 +193,7 @@ <h1 class="h2">لوحة القيادة</h1>
             <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
           </div>
           <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
-            <svg class="bi"><use xlink:href="#calendar3"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
             هذا الأسبوع
           </button>
         </div>