rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Add role="document" to modal itself

Browse Source 
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
This commit is contained in:
Patrick H. Lauke 2015-06-11 12:40:24 +01:00
parent e11f7ffa79
commit e23868c9cf
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,7 +69,7 @@ $('#myModal').on('shown.bs.modal', function () {
<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">
@ -121,7 +121,7 @@ $('#myModal').on('shown.bs.modal', function () {
<!-- 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>
@ -222,7 +222,7 @@ $('#myModal').on('shown.bs.modal', function () {
<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>
@ -270,7 +270,7 @@ $('#myModal').on('shown.bs.modal', function () {
</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>
@ -323,7 +323,7 @@ $('#myModal').on('shown.bs.modal', function () {
...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>
@ -356,7 +356,7 @@ $('#myModal').on('shown.bs.modal', function () {
...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>