Skip to content

Commit b136d42

Browse files
mdomdo
committed
Merge pull request twbs#13024 from twbs/role-alert
add role="alert" to Alert examples, to improve accessibility
2 parents 28d2de3 + 4277ba6 commit b136d42

File tree

4 files changed

+28
-28
lines changed

4 files changed

+28
-28
lines changed

‎docs/components.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2170,36 +2170,36 @@ <h4>No default class</h4>
21702170
</div>
21712171

21722172
<div class="bs-example">
2173-
<div class="alert alert-success">
2173+
<div class="alert alert-success" role="alert">
21742174
<strong>Well done!</strong> You successfully read this important alert message.
21752175
</div>
2176-
<div class="alert alert-info">
2176+
<div class="alert alert-info" role="alert">
21772177
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
21782178
</div>
2179-
<div class="alert alert-warning">
2179+
<div class="alert alert-warning" role="alert">
21802180
<strong>Warning!</strong> Better check yourself, you're not looking too good.
21812181
</div>
2182-
<div class="alert alert-danger">
2182+
<div class="alert alert-danger" role="alert">
21832183
<strong>Oh snap!</strong> Change a few things up and try submitting again.
21842184
</div>
21852185
</div>
21862186
{% highlight html %}
2187-
<div class="alert alert-success">...</div>
2188-
<div class="alert alert-info">...</div>
2189-
<div class="alert alert-warning">...</div>
2190-
<div class="alert alert-danger">...</div>
2187+
<div class="alert alert-success" role="alert">...</div>
2188+
<div class="alert alert-info" role="alert">...</div>
2189+
<div class="alert alert-warning" role="alert">...</div>
2190+
<div class="alert alert-danger" role="alert">...</div>
21912191
{% endhighlight %}
21922192

21932193
<h2 id="alerts-dismissable">Dismissable alerts</h2>
21942194
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
21952195
<div class="bs-example">
2196-
<div class="alert alert-warning alert-dismissable">
2196+
<div class="alert alert-warning alert-dismissable" role="alert">
21972197
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
21982198
<strong>Warning!</strong> Better check yourself, you're not looking too good.
21992199
</div>
22002200
</div>
22012201
{% highlight html %}
2202-
<div class="alert alert-warning alert-dismissable">
2202+
<div class="alert alert-warning alert-dismissable" role="alert">
22032203
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
22042204
<strong>Warning!</strong> Better check yourself, you're not looking too good.
22052205
</div>
@@ -2213,30 +2213,30 @@ <h4>Ensure proper behavior across all devices</h4>
22132213
<h2 id="alerts-links">Links in alerts</h2>
22142214
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
22152215
<div class="bs-example">
2216-
<div class="alert alert-success">
2216+
<div class="alert alert-success" role="alert">
22172217
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
22182218
</div>
2219-
<div class="alert alert-info">
2219+
<div class="alert alert-info" role="alert">
22202220
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
22212221
</div>
2222-
<div class="alert alert-warning">
2222+
<div class="alert alert-warning" role="alert">
22232223
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
22242224
</div>
2225-
<div class="alert alert-danger">
2225+
<div class="alert alert-danger" role="alert">
22262226
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
22272227
</div>
22282228
</div>
22292229
{% highlight html %}
2230-
<div class="alert alert-success">
2230+
<div class="alert alert-success" role="alert">
22312231
<a href="#" class="alert-link">...</a>
22322232
</div>
2233-
<div class="alert alert-info">
2233+
<div class="alert alert-info" role="alert">
22342234
<a href="#" class="alert-link">...</a>
22352235
</div>
2236-
<div class="alert alert-warning">
2236+
<div class="alert alert-warning" role="alert">
22372237
<a href="#" class="alert-link">...</a>
22382238
</div>
2239-
<div class="alert alert-danger">
2239+
<div class="alert alert-danger" role="alert">
22402240
<a href="#" class="alert-link">...</a>
22412241
</div>
22422242
{% endhighlight %}

‎docs/examples/rtl/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -214,16 +214,16 @@ <h1>Navbars</h1>
214214
<div class="page-header">
215215
<h1>Alerts</h1>
216216
</div>
217-
<div class="alert alert-success">
217+
<div class="alert alert-success" role="alert">
218218
<strong>Well done!</strong> You successfully read this important alert message.
219219
</div>
220-
<div class="alert alert-info">
220+
<div class="alert alert-info" role="alert">
221221
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
222222
</div>
223-
<div class="alert alert-warning">
223+
<div class="alert alert-warning" role="alert">
224224
<strong>Warning!</strong> Best check yo self, you're not looking too good.
225225
</div>
226-
<div class="alert alert-danger">
226+
<div class="alert alert-danger" role="alert">
227227
<strong>Oh snap!</strong> Change a few things up and try submitting again.
228228
</div>
229229

‎docs/examples/theme/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,16 +216,16 @@ <h1>Navbars</h1>
216216
<div class="page-header">
217217
<h1>Alerts</h1>
218218
</div>
219-
<div class="alert alert-success">
219+
<div class="alert alert-success" role="alert">
220220
<strong>Well done!</strong> You successfully read this important alert message.
221221
</div>
222-
<div class="alert alert-info">
222+
<div class="alert alert-info" role="alert">
223223
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
224224
</div>
225-
<div class="alert alert-warning">
225+
<div class="alert alert-warning" role="alert">
226226
<strong>Warning!</strong> Best check yo self, you're not looking too good.
227227
</div>
228-
<div class="alert alert-danger">
228+
<div class="alert alert-danger" role="alert">
229229
<strong>Oh snap!</strong> Change a few things up and try submitting again.
230230
</div>
231231

‎docs/javascript.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1393,14 +1393,14 @@ <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
13931393
<h2 id="alerts-examples">Example alerts</h2>
13941394
<p>Add dismiss functionality to all alert messages with this plugin.</p>
13951395
<div class="bs-example">
1396-
<div class="alert alert-warning fade in">
1396+
<div class="alert alert-warning fade in" role="alert">
13971397
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
13981398
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
13991399
</div>
14001400
</div><!-- /example -->
14011401

14021402
<div class="bs-example">
1403-
<div class="alert alert-danger fade in">
1403+
<div class="alert alert-danger fade in" role="alert">
14041404
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
14051405
<h4>Oh snap! You got an error!</h4>
14061406
<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>

0 commit comments

Comments
 (0)