mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 12:51:52 +02:00
Code Issues 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
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> </li>
</ul> </ul>
<form> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
</div> </div>
@@ -90,7 +90,7 @@ extra_css:
</li> </li>
</ul> </ul>
<form> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
</div> </div>
@@ -124,7 +124,7 @@ extra_css:
</li> </li>
</ul> </ul>
<form> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
</div> </div>
@@ -158,7 +158,7 @@ extra_css:
</li> </li>
</ul> </ul>
<form> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
</div> </div>
@@ -192,7 +192,7 @@ extra_css:
</li> </li>
</ul> </ul>
<form> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
</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`. Set heights using classes like `.form-control-lg` and `.form-control-sm`.
{{< example >}} {{< example >}}
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"> <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"> <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"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
{{< /example >}} {{< /example >}}
## Readonly ## 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. 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 >}} {{< 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 >}} {{< /example >}}
## Readonly plain text ## 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 >}} {{< example >}}
<div class="row"> <div class="row">
<div class="col"> <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>
<div class="col"> <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>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -55,10 +55,10 @@ By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you
{{< example >}} {{< example >}}
<div class="row g-3"> <div class="row g-3">
<div class="col"> <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>
<div class="col"> <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>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -204,13 +204,13 @@ As shown in the previous examples, our grid system allows you to place any numbe
{{< example >}} {{< example >}}
<div class="row g-3"> <div class="row g-3">
<div class="col-sm-7"> <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>
<div class="col-sm"> <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>
<div class="col-sm"> <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>
</div> </div>
{{< /example >}} {{< /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. 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 >}} {{< example >}}
<select class="form-select"> <select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option> <option selected>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</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. You may also choose from small and large custom selects to match our similarly sized text inputs.
{{< example >}} {{< 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 selected>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</select> </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 selected>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</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: The `multiple` attribute is also supported:
{{< example >}} {{< example >}}
<select class="form-select" multiple> <select class="form-select" multiple aria-label="multiple select example">
<option selected>Open this select menu</option> <option selected>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
@@ -53,7 +53,7 @@ The `multiple` attribute is also supported:
As is the `size` attribute: As is the `size` attribute:
{{< example >}} {{< 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 selected>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</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>
<div class="mb-3"> <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="">Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>