kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Merge pull request #17945 from patrickhlauke/docs-redundant-sr 

Remove redundant `<span class="sr-only">...</span>` for close buttons
This commit is contained in:
Patrick H. Lauke 2015-10-16 09:50:18 +01:00
parent 724bf86288 68189e2269
commit df33a43bbd
3 changed files with 2 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/alerts.md
View File

@ -64,7 +64,6 @@ You can see this in action with a live demo:
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
@ -85,7 +84,6 @@ Or with `data` attributes on a button **within the alert**, as demonstrated abov
{% highlight html %}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
{% endhighlight %}

7
docs/components/modal.md
View File

@ -48,7 +48,6 @@ A rendered modal with header, body, and set of actions in the footer.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
@ -71,7 +70,6 @@ A rendered modal with header, body, and set of actions in the footer.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
@ -98,7 +96,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
@ -153,7 +150,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
@ -223,7 +219,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div>
@ -241,7 +236,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
@ -329,7 +323,6 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>

5
docs/components/utilities.md
View File

@ -149,12 +149,11 @@ Ensure that any meaning conveyed through color is also conveyed in a format that
## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
{% example html %}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
{% endexample %}
@ -252,7 +251,7 @@ The `.invisible` class can be used to toggle only the visibility of an element,
}
{% endhighlight %}
## Screen readers
## Screen readers and keyboard users
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.