2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03: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:
Julien Déramond
2021-11-01 07:33:39 +01:00
committed by GitHub
parent 8ed1218294
commit 328a29162d
11 changed files with 46 additions and 46 deletions
+11 -11
View File
@@ -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>