Skip to content

Commit

Permalink
Add role="document" to modal itself
Browse files Browse the repository at this point in the history
Initial fix to generalise use of modals. Generally, true role="dialog"
containers would require only forms/controls as content, with all other
text correctly and explicitly associated via
aria-labelledby/aria-describedby and similar...but as authors use modals
also as generic overlays, this extra role is required to get AT
(particularly NVDA) out of "forms" mode and reenable reading keys
  • Loading branch information
patrickhlauke committed Jun 11, 2015
1 parent e11f7ff commit e23868c
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions docs/_includes/js/modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">

<div class="modal-header">
Expand Down Expand Up @@ -121,7 +121,7 @@ <h4>Overflowing text to show scroll behavior</h4>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Expand Down Expand Up @@ -222,7 +222,7 @@ <h2 id="modals-grid-system">Using the grid system</h2>
<p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p>
<!-- sample modal content -->
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Expand Down Expand Up @@ -270,7 +270,7 @@ <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
</div><!-- /example -->
{% highlight html %}
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Expand Down Expand Up @@ -323,7 +323,7 @@ <h2 id="modals-related-target">Varying modal content based on trigger button</h2
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Expand Down Expand Up @@ -356,7 +356,7 @@ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Expand Down

0 comments on commit e23868c

Please sign in to comment.