diff options
author | Julien Déramond <julien.deramond@orange.com> | 2021-11-01 09:33:39 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-01 09:33:39 +0300 |
commit | 328a29162d4bccceb656071093f7bd887f8f788d (patch) | |
tree | c14518080e5431416dfe8344004f1348719376dd | |
parent | 8ed121829494fd469f546f499007115e33424c22 (diff) |
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>
11 files changed, 46 insertions, 46 deletions
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index f6dbb8e612..f5ea5d0520 100644 --- 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 043d4b063b..b29ea863e9 100644 --- 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 8faf6cdd1d..e27c6b73a6 100644 --- 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 0956f6ee4f..5816865450 100644 --- 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 d68e262338..64269b31c8 100644 --- 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 e15b47e5f5..15f82c5058 100644 --- 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 0c981392e1..b0d9986520 100644 --- 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 63c54c9f24..b6c26c94a0 100644 --- 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 04d6ab623d..d1c3675e4b 100644 --- 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 5af7e2ea29..258e445e68 100644 --- 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 cd72aa778c..1f807a6dc1 100644 --- 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> |