mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

Add explicit aria-label to unlabeled controls

Browse Source 
- in particular, controls that just relied on `placeholder`, as this is still not officially/consistently supported as a valid way to provide an accessible name (though some browsers do use it as a fallback)
This commit is contained in:
Patrick H. Lauke 2020-03-22 22:33:33 +02:00 committed by XhmikosR
parent a68f73e754
commit 00ff5b83f9
5 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
site/content/docs/4.3/examples/navbars/index.html
View File

@ -56,7 +56,7 @@ extra_css:
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
@ -90,7 +90,7 @@ extra_css:
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
@ -124,7 +124,7 @@ extra_css:
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
@ -158,7 +158,7 @@ extra_css:
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
@ -192,7 +192,7 @@ extra_css:
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>

8
site/content/docs/4.3/forms/form-control.md
View File

@ -24,9 +24,9 @@ toc: true
Set heights using classes like `.form-control-lg` and `.form-control-sm`.
{{< example >}}
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="deafult input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
{{< /example >}}
## Readonly
@ -34,7 +34,7 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
{{< example >}}
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>
{{< /example >}}
## Readonly plain text

14
site/content/docs/4.3/forms/layout.md
View File

@ -40,10 +40,10 @@ More complex forms can be built using our grid classes. Use these for form layou
{{< example >}}
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
{{< /example >}}
@ -55,10 +55,10 @@ By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you
{{< example >}}
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
{{< /example >}}
@ -204,13 +204,13 @@ As shown in the previous examples, our grid system allows you to place any numbe
{{< example >}}
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
{{< /example >}}

10
site/content/docs/4.3/forms/select.md
View File

@ -11,7 +11,7 @@ toc: true
Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.
{{< example >}}
<select class="form-select">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
@ -24,14 +24,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
You may also choose from small and large custom selects to match our similarly sized text inputs.
{{< example >}}
<select class="form-select form-select-lg mb-3">
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
@ -42,7 +42,7 @@ You may also choose from small and large custom selects to match our similarly s
The `multiple` attribute is also supported:
{{< example >}}
<select class="form-select" multiple>
<select class="form-select" multiple aria-label="multiple select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
@ -53,7 +53,7 @@ The `multiple` attribute is also supported:
As is the `size` attribute:
{{< example >}}
<select class="form-select" size="3">
<select class="form-select" size="3" aria-label="size 3 select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>

2
site/content/docs/4.3/forms/validation.md
View File

@ -280,7 +280,7 @@ Validation styles are available for the following form controls and components:
</div>
<div class="mb-3">
<select class="form-select" required>
<select class="form-select" required aria-label="select example">
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>