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

Remove redundant `.sr-only` text for Close buttons 

Since `aria-label` is used, it's not necessary anymore.
This commit is contained in:
Patrick H. Lauke 2015-10-16 00:56:59 +01:00
parent 724bf86288
commit 9302fd4fd4
3 changed files with 1 additions and 11 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>

3
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 %}