kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Improve accessibility of close buttons in modals & alerts

Browse source 
Adds textual caption to the close buttons. The "X" multiplication sign isn't very meaningful to screenreaders.

Credit: https://github.com/paypal/bootstrap-accessibility-plugin
Per:
    https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#alert
    https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#modal-dialog
This commit is contained in:
Chris Rebert 2014-05-03 19:38:09 -07:00
parent bae289d1fe
commit 949b81f511
4 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/_includes/components/alerts.html
View file

@ -36,13 +36,13 @@
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
<div class="bs-example">
<div class="alert alert-warning alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert alert-warning alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
{% endhighlight %}

4
docs/_includes/css/helpers.html
View file

@ -48,10 +48,10 @@
<h3 id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-example">
<p><button type="button" class="close" aria-hidden="true">&times;</button></p>
<p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
</div>
{% highlight html %}
<button type="button" class="close" aria-hidden="true">&times;</button>
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
{% endhighlight %}

6
docs/_includes/js/alerts.html
View file

@ -5,14 +5,14 @@
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert alert-warning fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-example">
<div class="alert alert-danger fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
@ -29,7 +29,7 @@
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html %}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>{% endhighlight %}
{% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %}
<h3>Methods</h3>

12
docs/_includes/js/modal.html
View file

@ -24,7 +24,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
@ -43,7 +43,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
@ -66,7 +66,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
@ -117,7 +117,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
@ -179,7 +179,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div>
<div class="modal-body">
@ -193,7 +193,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">