Skip to content

B
bootstrap
Commit 7cff5bb8 authored by Patrick H. Lauke's avatar Patrick H. Lauke
Browse files
Options

Merge pull request #15327 from patrickhlauke/docs-accessibility-tweaks2 

More docs accessibility tweaks
parents 1f6f95a2 285ec704
Expand all Show whitespace changes
Inline Side-by-side
Showing with 79 additions and 73 deletions
docs/_includes/components/input-groups.html
View file @ 7cff5bb8
This diff is collapsed.
docs/_includes/components/pagination.html
View file @ 7cff5bb8
...@@ -9,9 +9,8 @@ ...@@ -9,9 +9,8 @@
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a href="#"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
...@@ -20,9 +19,8 @@ ...@@ -20,9 +19,8 @@
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li> <li>
<a href="#"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -32,9 +30,8 @@ ...@@ -32,9 +30,8 @@
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a href="#"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
...@@ -43,9 +40,8 @@ ...@@ -43,9 +40,8 @@
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li> <li>
<a href="#"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -57,20 +53,20 @@ ...@@ -57,20 +53,20 @@
<div class="bs-example" data-example-id="disabled-active-pagination"> <div class="bs-example" data-example-id="disabled-active-pagination">
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
... ...
</ul> </ul>
...@@ -83,7 +79,6 @@ ...@@ -83,7 +79,6 @@
<li class="disabled"> <li class="disabled">
<span> <span>
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</span> </span>
</li> </li>
<li class="active"> <li class="active">
...@@ -100,35 +95,35 @@ ...@@ -100,35 +95,35 @@
<div class="bs-example" data-example-id="pagination-sizing"> <div class="bs-example" data-example-id="pagination-sizing">
<nav> <nav>
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
......
docs/_includes/css/forms.html
View file @ 7cff5bb8
...@@ -378,7 +378,6 @@ ...@@ -378,7 +378,6 @@
{% endhighlight %} {% endhighlight %}
<h3>Selects</h3> <h3>Selects</h3>
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<div class="bs-example" data-example-ids="select-form-control"> <div class="bs-example" data-example-ids="select-form-control">
<form> <form>
<select class="form-control"> <select class="form-control">
...@@ -388,14 +387,6 @@ ...@@ -388,14 +387,6 @@
<option>4</option> <option>4</option>
<option>5</option> <option>5</option>
</select> </select>
<br>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form> </form>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
...@@ -406,7 +397,23 @@ ...@@ -406,7 +397,23 @@
<option>4</option> <option>4</option>
<option>5</option> <option>5</option>
</select> </select>
{% endhighlight %}
<p>For <code>&lt;select&gt;</code> controls with the <code>multiple</code> attribute, multiple options are shown by default.</p>
<div class="bs-example" data-example-ids="select-multiple-form-control">
<form>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<select multiple class="form-control"> <select multiple class="form-control">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
...@@ -764,7 +771,7 @@ ...@@ -764,7 +771,7 @@
{% endhighlight %} {% endhighlight %}
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4> <h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
<p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p> <p>If you use the <code>.sr-only</code> class to hide a form control's <code>&lt;label&gt;</code> (rather than using other labelling options, such as the <code>aria-label</code> attribute), Bootstrap will automatically adjust the position of the icon once it's been added.</p>
<div class="bs-example" data-example-id="form-validation-state-with-icon-without-label"> <div class="bs-example" data-example-id="form-validation-state-with-icon-without-label">
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label> <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment