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

Merge pull request #4257 from ginader/modal-accessibility

Browse Source 
close #3531 added focus handling and removed the badly announced "times"...
This commit is contained in:
♒∆✝ 2012-08-01 20:23:50 -07:00
commit 7ec1778103
6 changed files with 63 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/assets/js/bootstrap-modal.js vendored
View File

@ -69,7 +69,10 @@
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
that.$element
.addClass('in')
.attr('aria-hidden', false)
.focus()
that.enforceFocus()
@ -99,7 +102,9 @@
$(document).off('focusin.modal')
this.$element.removeClass('in')
this.$element
.removeClass('in')
.attr('aria-hidden', true)
$.support.transition && this.$element.hasClass('fade') ?
this.hideWithTransition() :
@ -118,11 +123,11 @@
, escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
this.$element.on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
this.$element.off('keyup.dismiss.modal')
}
}
@ -222,7 +227,12 @@
, option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target.modal(option)
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})
})

20
docs/assets/js/bootstrap.js vendored
View File

@ -793,7 +793,10 @@
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
that.$element
.addClass('in')
.attr('aria-hidden', false)
.focus()
that.enforceFocus()
@ -823,7 +826,9 @@
$(document).off('focusin.modal')
this.$element.removeClass('in')
this.$element
.removeClass('in')
.attr('aria-hidden', true)
$.support.transition && this.$element.hasClass('fade') ?
this.hideWithTransition() :
@ -842,11 +847,11 @@
, escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
this.$element.on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
this.$element.off('keyup.dismiss.modal')
}
}
@ -946,7 +951,12 @@
, option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target.modal(option)
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})
})

2
docs/assets/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/javascript.html
View File

@ -214,9 +214,9 @@ $('#myModal').on('show', function (e) {
<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 hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3>
</div>
<div class="modal-body">
@ -241,8 +241,8 @@ $('#myModal').on('show', function (e) {
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<a href="#" role="button" class="btn" data-dismiss="modal" >Close</a>
<a href="#" role="button" class="btn btn-primary">Save changes</a>
<button class="btn" data-dismiss="modal" >Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<div class="bs-docs-example" style="padding-bottom: 24px;">
@ -253,7 +253,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt;-- Modal --&gt;
&lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
&lt;div class="modal" id="myModal" tabindex="-1" role="dialog&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
@ -262,8 +262,8 @@ $('#myModal').on('show', function (e) {
&lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" role="button" class="btn"&gt;Close&lt;/a&gt;
&lt;a href="#" role="button" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
&lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>

20
docs/templates/pages/javascript.mustache vendored
View File

@ -113,7 +113,7 @@ $('#myModal').on('show', function (e) {
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>{{_i}}Modal header{{/i}}</h3>
</div>
<div class="modal-body">
@ -128,7 +128,7 @@ $('#myModal').on('show', function (e) {
<pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;{{_i}}Modal header{{/i}}&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
@ -144,9 +144,9 @@ $('#myModal').on('show', function (e) {
<h3>{{_i}}Live demo{{/i}}</h3>
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>
</div>
<div class="modal-body">
@ -171,8 +171,8 @@ $('#myModal').on('show', function (e) {
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<a href="#" role="button" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<button class="btn" data-dismiss="modal">{{_i}}Close{{/i}}</button>
<button class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
</div>
</div>
<div class="bs-docs-example" style="padding-bottom: 24px;">
@ -183,17 +183,17 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;{{_i}}Launch demo modal{{/i}}&lt;/a&gt;
&lt;-- Modal --&gt;
&lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
&lt;div class="modal" id="myModal" tabindex="-1" role="dialog&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" role="button" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;a href="#" role="button" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;{{_i}}Close{{/i}}&lt;/button&gt;
&lt;button class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>

20
js/bootstrap-modal.js vendored
View File

@ -69,7 +69,10 @@
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
that.$element
.addClass('in')
.attr('aria-hidden', false)
.focus()
that.enforceFocus()
@ -99,7 +102,9 @@
$(document).off('focusin.modal')
this.$element.removeClass('in')
this.$element
.removeClass('in')
.attr('aria-hidden', true)
$.support.transition && this.$element.hasClass('fade') ?
this.hideWithTransition() :
@ -118,11 +123,11 @@
, escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
this.$element.on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
this.$element.off('keyup.dismiss.modal')
}
}
@ -222,7 +227,12 @@
, option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target.modal(option)
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})
})