diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2014-12-07 17:29:03 +0300 |
---|---|---|
committer | Patrick H. Lauke <redux@splintered.co.uk> | 2014-12-07 17:29:03 +0300 |
commit | c609272ac199cc9806ad6c4cf8c7f8f4253fb347 (patch) | |
tree | 70827a974f5d7f7d3615a1b460376ee745e8c9b3 /docs | |
parent | 08f388679b7e77104d3129733feffb956b10dcf0 (diff) |
``aria-label="close"`` instead of sr-only ``span``
shorter, neater, well supported
Diffstat (limited to 'docs')
-rw-r--r-- | docs/_includes/components/alerts.html | 4 | ||||
-rw-r--r-- | docs/_includes/css/helpers.html | 4 | ||||
-rw-r--r-- | docs/_includes/js/alerts.html | 7 | ||||
-rw-r--r-- | docs/_includes/js/modal.html | 16 |
4 files changed, 15 insertions, 16 deletions
diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html index 717308354c..7487a968aa 100644 --- a/docs/_includes/components/alerts.html +++ b/docs/_includes/components/alerts.html @@ -40,13 +40,13 @@ </div> <div class="bs-example" data-example-id="dismissible-alert-css"> <div class="alert alert-warning alert-dismissible" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> </div> {% highlight html %} <div class="alert alert-warning alert-dismissible" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> {% endhighlight %} diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html index c6701bfdcc..db60f0ad81 100644 --- a/docs/_includes/css/helpers.html +++ b/docs/_includes/css/helpers.html @@ -56,10 +56,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" data-example-id="close-icon"> - <p><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></p> + <p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></p> </div> {% highlight html %} -<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> +<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> {% endhighlight %} diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html index f93abc8b24..399cd732f3 100644 --- a/docs/_includes/js/alerts.html +++ b/docs/_includes/js/alerts.html @@ -6,12 +6,12 @@ <p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p> <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js"> <div class="alert alert-warning alert-dismissible fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div> <div class="alert alert-danger alert-dismissible fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</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> @@ -27,9 +27,8 @@ <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p> {% highlight html %} -<button type="button" class="close" data-dismiss="alert"> +<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> {% endhighlight %} diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index 83c047904e..f5861f4a5f 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -31,7 +31,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -50,7 +50,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -73,7 +73,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> @@ -124,7 +124,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> @@ -186,7 +186,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> @@ -200,7 +200,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> <div class="modal-body"> @@ -230,7 +230,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> @@ -263,7 +263,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> |