Skip to content

B
bootstrap
Commit 4277ba62 authored by Chris Rebert's avatar Chris Rebert
Browse files
Options

add role="alert" to Alert examples, to improve accessibility 

Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/d8fcbcd3fe86f0cb47fda0ffe269b2c7a2131f07/README.md#alert
parent 1902f0ab
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 28 deletions
docs/components.html
View file @ 4277ba62
...@@ -2170,36 +2170,36 @@ body { padding-bottom: 70px; } ...@@ -2170,36 +2170,36 @@ body { padding-bottom: 70px; }
</div> </div>
<div class="bs-example"> <div class="bs-example">
<div class="alert alert-success"> <div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
<div class="alert alert-warning"> <div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good. <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div> </div>
<div class="alert alert-danger"> <div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="alert alert-success">...</div> <div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info">...</div> <div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning">...</div> <div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger">...</div> <div class="alert alert-danger" role="alert">...</div>
{% endhighlight %} {% endhighlight %}
<h2 id="alerts-dismissable">Dismissable alerts</h2> <h2 id="alerts-dismissable">Dismissable alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p> <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
<div class="bs-example"> <div class="bs-example">
<div class="alert alert-warning alert-dismissable"> <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" aria-hidden="true">&times;</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good. <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="alert alert-warning alert-dismissable"> <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" aria-hidden="true">&times;</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good. <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div> </div>
...@@ -2213,30 +2213,30 @@ body { padding-bottom: 70px; } ...@@ -2213,30 +2213,30 @@ body { padding-bottom: 70px; }
<h2 id="alerts-links">Links in alerts</h2> <h2 id="alerts-links">Links in alerts</h2>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p> <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example"> <div class="bs-example">
<div class="alert alert-success"> <div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div> </div>
<div class="alert alert-warning"> <div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>. <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div> </div>
<div class="alert alert-danger"> <div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="alert alert-success"> <div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a> <a href="#" class="alert-link">...</a>
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a> <a href="#" class="alert-link">...</a>
</div> </div>
<div class="alert alert-warning"> <div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a> <a href="#" class="alert-link">...</a>
</div> </div>
<div class="alert alert-danger"> <div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a> <a href="#" class="alert-link">...</a>
</div> </div>
{% endhighlight %} {% endhighlight %}
......
docs/examples/rtl/index.html
View file @ 4277ba62
...@@ -214,16 +214,16 @@ ...@@ -214,16 +214,16 @@
<div class="page-header"> <div class="page-header">
<h1>Alerts</h1> <h1>Alerts</h1>
</div> </div>
<div class="alert alert-success"> <div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
<div class="alert alert-warning"> <div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good. <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div> </div>
<div class="alert alert-danger"> <div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
......
docs/examples/theme/index.html
View file @ 4277ba62
...@@ -216,16 +216,16 @@ ...@@ -216,16 +216,16 @@
<div class="page-header"> <div class="page-header">
<h1>Alerts</h1> <h1>Alerts</h1>
</div> </div>
<div class="alert alert-success"> <div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
<div class="alert alert-warning"> <div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good. <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div> </div>
<div class="alert alert-danger"> <div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
......
docs/javascript.html
View file @ 4277ba62
...@@ -1393,14 +1393,14 @@ $('#myPopover').on('hidden.bs.popover', function () { ...@@ -1393,14 +1393,14 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h2 id="alerts-examples">Example alerts</h2> <h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p> <p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example"> <div class="bs-example">
<div class="alert alert-warning fade in"> <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" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div> </div>
</div><!-- /example --> </div><!-- /example -->
<div class="bs-example"> <div class="bs-example">
<div class="alert alert-danger fade in"> <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" aria-hidden="true">&times;</button>
<h4>Oh snap! You got an error!</h4> <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>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>
......
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