chore(a11y): add missing role='search' and type='search' in navbar component and examples

site/content/docs/5.1/components/navbar.md

@@ -67,7 +67,7 @@ Here's an example of all the sub-components included in a responsive light-theme
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-primary" type="submit">Search</button>
       </form>
@@ -211,7 +211,7 @@ Place various form controls and components within a navbar:
 {{< example >}}
 <nav class="navbar navbar-dark bg-dark">
   <div class="container-fluid">
-    <form class="d-flex">
+    <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
       <button class="btn btn-primary" type="submit">Search</button>
     </form>
@@ -227,14 +227,20 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
     <a class="navbar-brand" href="#">
       <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
     </a>
-    <form class="d-flex">
+    <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
       <button class="btn btn-primary" type="submit">Search</button>
     </form>
   </div>
 </nav>
 {{< /example >}}
 
+{{< callout warning >}}
+#### Ensure correct search `role`
+
+In order for assistive technologies (such as screen readers) to identify a section of the page used to search content, the form should have a `role=search`.
+{{< /callout >}}
+
 Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML. Applies to the option above and below this copy.
 
 {{< example >}}
@@ -332,7 +338,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-secondary" type="submit">Search</button>
         </form>
@@ -363,7 +369,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-secondary" type="submit">Search</button>
         </form>
@@ -498,7 +504,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
           <a class="nav-link disabled">Link</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-success" type="submit">Search</button>
       </form>

site/content/docs/5.1/examples/carousel-rtl/index.html

@@ -25,7 +25,7 @@
             <a class="nav-link disabled">رابط غير مفعل</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
           <button class="btn btn-success" type="submit">بحث</button>
         </form>

site/content/docs/5.1/examples/carousel/index.html

@@ -24,7 +24,7 @@
             <a class="nav-link disabled">Disabled</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-success" type="submit">Search</button>
         </form>

site/content/docs/5.1/examples/cheatsheet-rtl/index.html

@@ -1333,7 +1333,7 @@ <h3>شريط التنقل</h3>
                   <a class="nav-link disabled">معطل</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control" type="search" placeholder="بحث" aria-label="بحث">
                 <button class="btn btn-dark" type="submit">بحث</button>
               </form>
@@ -1372,7 +1372,7 @@ <h3>شريط التنقل</h3>
                   <a class="nav-link disabled">معطل</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control" type="search" placeholder="بحث" aria-label="بحث">
                 <button class="btn btn-primary" type="submit">بحث</button>
               </form>

site/content/docs/5.1/examples/cheatsheet/index.html

@@ -1330,7 +1330,7 @@ <h3>Navbar</h3>
                   <a class="nav-link disabled">Disabled</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                 <button class="btn btn-dark" type="submit">Search</button>
               </form>
@@ -1369,7 +1369,7 @@ <h3>Navbar</h3>
                   <a class="nav-link disabled">Disabled</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                 <button class="btn btn-primary" type="submit">Search</button>
               </form>

site/content/docs/5.1/examples/headers/index.html

@@ -105,7 +105,7 @@ <h1 class="visually-hidden">Headers examples</h1>
           <li><a href="#" class="nav-link px-2 text-white">About</a></li>
         </ul>
 
-        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
           <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
         </form>
 
@@ -133,7 +133,7 @@ <h1 class="visually-hidden">Headers examples</h1>
           <li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
         </ul>
 
-        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
           <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
@@ -175,7 +175,7 @@ <h1 class="visually-hidden">Headers examples</h1>
       </div>
 
       <div class="d-flex align-items-center">
-        <form class="w-100 me-3">
+        <form class="w-100 me-3" role="search">
           <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
@@ -229,7 +229,7 @@ <h1 class="visually-hidden">Headers examples</h1>
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#boosted"/></svg>
         <span class="fs-4">Double header</span>
       </a>
-      <form class="col-12 col-lg-auto mb-3 mb-lg-0">
+      <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
         <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
       </form>
     </div>
@@ -282,7 +282,7 @@ <h1 class="visually-hidden">Headers examples</h1>
     </div>
     <div class="px-3 py-2 border-bottom mb-3">
       <div class="container d-flex flex-wrap justify-content-center">
-        <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
+        <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search">
           <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 

site/content/docs/5.1/examples/navbar-fixed/index.html

@@ -23,7 +23,7 @@
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-success" type="submit">Search</button>
       </form>

site/content/docs/5.1/examples/navbar-static/index.html

@@ -23,7 +23,7 @@
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-success" type="submit">Search</button>
       </form>

site/content/docs/5.1/examples/navbars/index.html

@@ -33,8 +33,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -56,8 +56,8 @@
             <a class="nav-link" href="#">Link</a>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -90,8 +90,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -124,8 +124,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -158,8 +158,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -192,8 +192,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -226,8 +226,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -260,8 +260,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -294,8 +294,8 @@
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -363,8 +363,8 @@
               </ul>
             </li>
           </ul>
-          <form>
-            <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+          <form role="search">
+            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
           </form>
         </div>
       </div>

site/content/docs/5.1/examples/offcanvas-navbar/index.html

@@ -39,7 +39,7 @@
           </ul>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-success" type="submit">Search</button>
       </form>

site/content/docs/5.1/examples/sticky-footer-navbar/index.html

@@ -27,7 +27,7 @@
             <a class="nav-link disabled">Disabled</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-success" type="submit">Search</button>
         </form>