mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
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>
This commit is contained in:
parent
8ed1218294
commit
328a29162d
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user