Add missing `role="search"` and `type="search"` in navbar doc and examples (#35223)

* Add missing `role="search"` and `type="search"` in navbar doc and examples

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

* Remove warning callout about ensuring correct search role in navbar doc

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index f6dbb8e612daf6737ad1ae3d2352476735c1ef96..f5ea5d05201f0e1924f812459b09de391326df74 100644 (file)
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -65,7 +65,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-outline-success" type="submit">Search</button>
       </form>
@@ -228,7 +228,7 @@ Place various form controls and components within a navbar:
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
   <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-outline-success" type="submit">Search</button>
     </form>
@@ -242,7 +242,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
 <nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand">Navbar</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-outline-success" type="submit">Search</button>
     </form>
@@ -343,7 +343,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-outline-light" type="submit">Search</button>
         </form>
@@ -372,7 +372,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-outline-light" type="submit">Search</button>
         </form>
@@ -401,7 +401,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-outline-primary" type="submit">Search</button>
         </form>
@@ -524,7 +524,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-outline-success" type="submit">Search</button>
       </form>
@@ -564,7 +564,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
           <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-outline-success" type="submit">Search</button>
       </form>
@@ -594,7 +594,7 @@ With a brand name shown on the left and toggler on the right:
           <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-outline-success" type="submit">Search</button>
       </form>
@@ -624,7 +624,7 @@ With a toggler on the left and brand name on the right:
           <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-outline-success" type="submit">Search</button>
       </form>
@@ -695,7 +695,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
             </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-outline-success" type="submit">Search</button>
         </form>

diff --git a/site/content/docs/5.1/examples/carousel-rtl/index.html b/site/content/docs/5.1/examples/carousel-rtl/index.html
index 043d4b063b6653fc03ed8b079f1a2ede47e6e9cf..b29ea863e91a8189343f404fb747b6c21936945e 100644 (file)
--- a/site/content/docs/5.1/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.1/examples/carousel-rtl/index.html
@@ -25,7 +25,7 @@ extra_css:
             <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-outline-success" type="submit">بحث</button>
         </form>

diff --git a/site/content/docs/5.1/examples/carousel/index.html b/site/content/docs/5.1/examples/carousel/index.html
index 8faf6cdd1da38b5f9366745f374d67a5923184df..e27c6b73a62051af0cdf1fd1e51981fe1e49795a 100644 (file)
--- a/site/content/docs/5.1/examples/carousel/index.html
+++ b/site/content/docs/5.1/examples/carousel/index.html
@@ -24,7 +24,7 @@ extra_css:
             <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-outline-success" type="submit">Search</button>
         </form>

diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
index 0956f6ee4fbd27c2a4f3c35d667fe580c8d3eeb4..581686545070a21f84a63220153a05c3c5da2309 100644 (file)
--- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
@@ -1240,7 +1240,7 @@ direction: rtl
                   <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-outline-dark" type="submit">بحث</button>
               </form>
@@ -1279,7 +1279,7 @@ direction: rtl
                   <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-outline-light" type="submit">بحث</button>
               </form>

diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html
index d68e2623389d9dace900e2d8defb18c325941178..64269b31c83eefe6796a1fbacec621bd2515a037 100644 (file)
--- a/site/content/docs/5.1/examples/cheatsheet/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet/index.html
@@ -1239,7 +1239,7 @@ body_class: "bg-light"
                   <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-outline-dark" type="submit">Search</button>
               </form>
@@ -1278,7 +1278,7 @@ body_class: "bg-light"
                   <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-outline-light" type="submit">Search</button>
               </form>

diff --git a/site/content/docs/5.1/examples/headers/index.html b/site/content/docs/5.1/examples/headers/index.html
index e15b47e5f5b7f9b455be9a6fe33f4d8ed295f6a1..15f82c50585d3ac0fbd035d0b10f0584bff375cc 100644 (file)
--- a/site/content/docs/5.1/examples/headers/index.html
+++ b/site/content/docs/5.1/examples/headers/index.html
@@ -104,7 +104,7 @@ body_class: ""
           <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>
 
@@ -132,7 +132,7 @@ body_class: ""
           <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>
 
@@ -172,7 +172,7 @@ body_class: ""
       </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>
 
@@ -226,7 +226,7 @@ body_class: ""
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></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>
@@ -279,7 +279,7 @@ body_class: ""
     </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>
 

diff --git a/site/content/docs/5.1/examples/navbar-fixed/index.html b/site/content/docs/5.1/examples/navbar-fixed/index.html
index 0c981392e134c61cc336b777ec88badf4af8cb5f..b0d9986520979952f69f6337101a9dc08e9f0b5c 100644 (file)
--- a/site/content/docs/5.1/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.1/examples/navbar-fixed/index.html
@@ -23,7 +23,7 @@ extra_css:
           <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-outline-success" type="submit">Search</button>
       </form>

diff --git a/site/content/docs/5.1/examples/navbar-static/index.html b/site/content/docs/5.1/examples/navbar-static/index.html
index 63c54c9f249569789fc60becdf8afe20f22ece97..b6c26c94a0995f947e88a03d32972ebf3deb8e48 100644 (file)
--- a/site/content/docs/5.1/examples/navbar-static/index.html
+++ b/site/content/docs/5.1/examples/navbar-static/index.html
@@ -23,7 +23,7 @@ extra_css:
           <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-outline-success" type="submit">Search</button>
       </form>

diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html
index 04d6ab623d0b35b919dd17d837a9e0845ac965a9..d1c3675e4b2a58eb4061aa6f44a9e87b9b3210fe 100644 (file)
--- a/site/content/docs/5.1/examples/navbars/index.html
+++ b/site/content/docs/5.1/examples/navbars/index.html
@@ -33,8 +33,8 @@ extra_css:
             </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 @@ extra_css:
             <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 @@ extra_css:
             </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 @@ extra_css:
             </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 @@ extra_css:
             </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 @@ extra_css:
             </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 @@ extra_css:
             </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 @@ extra_css:
             </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 @@ extra_css:
             </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 @@ extra_css:
               </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>

diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/index.html b/site/content/docs/5.1/examples/offcanvas-navbar/index.html
index 5af7e2ea29bbf928d0d74421b975cd654ea9b826..258e445e6895c3796dbf5539bc179b11685450e4 100644 (file)
--- a/site/content/docs/5.1/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.1/examples/offcanvas-navbar/index.html
@@ -39,7 +39,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
           </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-outline-success" type="submit">Search</button>
       </form>

diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
index cd72aa778c7b6faf57ea6a75a907ed600e0c9ef8..1f807a6dc15e438241a2c78888496b8268cf09cd 100644 (file)
--- a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
@@ -27,7 +27,7 @@ body_class: "d-flex flex-column h-100"
             <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-outline-success" type="submit">Search</button>
         </form>