Skip to content

B
bootstrap
Commit 6977d35e authored by Dirk Ginader's avatar Dirk Ginader
Browse files
Options

close #3531 added focus handling and removed the badly announced "times" close... 

close #3531 added focus handling and removed the badly announced "times" close button from screenreaders
parent c2e899f2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 33 deletions
docs/assets/js/bootstrap-modal.js
View file @ 6977d35e
...@@ -69,7 +69,10 @@ ...@@ -69,7 +69,10 @@
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
} }
that.$element.addClass('in') that.$element
.addClass('in')
.attr('aria-hidden', false)
.focus()
that.enforceFocus() that.enforceFocus()
...@@ -99,7 +102,9 @@ ...@@ -99,7 +102,9 @@
$(document).off('focusin.modal') $(document).off('focusin.modal')
this.$element.removeClass('in') this.$element
.removeClass('in')
.attr('aria-hidden', true)
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
this.hideWithTransition() : this.hideWithTransition() :
...@@ -118,11 +123,11 @@ ...@@ -118,11 +123,11 @@
, escape: function () { , escape: function () {
var that = this var that = this
if (this.isShown && this.options.keyboard) { 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() e.which == 27 && that.hide()
}) })
} else if (!this.isShown) { } else if (!this.isShown) {
$(document).off('keyup.dismiss.modal') this.$element.off('keyup.dismiss.modal')
} }
} }
...@@ -222,7 +227,12 @@ ...@@ -222,7 +227,12 @@
, option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault() e.preventDefault()
$target.modal(option)
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
}) })
}) })
......
docs/assets/js/bootstrap.js
View file @ 6977d35e
...@@ -793,7 +793,10 @@ ...@@ -793,7 +793,10 @@
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
} }
that.$element.addClass('in') that.$element
.addClass('in')
.attr('aria-hidden', false)
.focus()
that.enforceFocus() that.enforceFocus()
...@@ -823,7 +826,9 @@ ...@@ -823,7 +826,9 @@
$(document).off('focusin.modal') $(document).off('focusin.modal')
this.$element.removeClass('in') this.$element
.removeClass('in')
.attr('aria-hidden', true)
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
this.hideWithTransition() : this.hideWithTransition() :
...@@ -842,11 +847,11 @@ ...@@ -842,11 +847,11 @@
, escape: function () { , escape: function () {
var that = this var that = this
if (this.isShown && this.options.keyboard) { 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() e.which == 27 && that.hide()
}) })
} else if (!this.isShown) { } else if (!this.isShown) {
$(document).off('keyup.dismiss.modal') this.$element.off('keyup.dismiss.modal')
} }
} }
...@@ -946,7 +951,12 @@ ...@@ -946,7 +951,12 @@
, option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault() e.preventDefault()
$target.modal(option)
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
}) })
}) })
......
docs/assets/js/bootstrap.min.js
View file @ 6977d35e
This diff is collapsed.
docs/javascript.html
View file @ 6977d35e
...@@ -214,9 +214,9 @@ $('#myModal').on('show', function (e) { ...@@ -214,9 +214,9 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3> <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> <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 --> <!-- 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"> <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> <h3 id="myModalLabel">Modal Heading</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -241,8 +241,8 @@ $('#myModal').on('show', function (e) { ...@@ -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> <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>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" role="button" class="btn" data-dismiss="modal" >Close</a> <button class="btn" data-dismiss="modal" >Close</button>
<a href="#" role="button" class="btn btn-primary">Save changes</a> <button class="btn btn-primary">Save changes</button>
</div> </div>
</div> </div>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">
...@@ -253,7 +253,7 @@ $('#myModal').on('show', function (e) { ...@@ -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;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt;-- Modal --&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;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"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
...@@ -262,8 +262,8 @@ $('#myModal').on('show', function (e) { ...@@ -262,8 +262,8 @@ $('#myModal').on('show', function (e) {
&lt;p&gt;One fine body…&lt;/p&gt; &lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" role="button" class="btn"&gt;Close&lt;/a&gt; &lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
&lt;a href="#" role="button" class="btn btn-primary"&gt;Save changes&lt;/a&gt; &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
......
docs/templates/pages/javascript.mustache
View file @ 6977d35e
...@@ -113,7 +113,7 @@ $('#myModal').on('show', function (e) { ...@@ -113,7 +113,7 @@ $('#myModal').on('show', function (e) {
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <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" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header"> <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> <h3>{{_i}}Modal header{{/i}}</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -128,7 +128,7 @@ $('#myModal').on('show', function (e) { ...@@ -128,7 +128,7 @@ $('#myModal').on('show', function (e) {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt; &lt;div class="modal hide fade"&gt;
&lt;div class="modal-header"&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;h3&gt;{{_i}}Modal header{{/i}}&lt;/h3&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-body"&gt; &lt;div class="modal-body"&gt;
...@@ -144,9 +144,9 @@ $('#myModal').on('show', function (e) { ...@@ -144,9 +144,9 @@ $('#myModal').on('show', function (e) {
<h3>{{_i}}Live demo{{/i}}</h3> <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> <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 --> <!-- 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"> <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> <h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -171,8 +171,8 @@ $('#myModal').on('show', function (e) { ...@@ -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> <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>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" role="button" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a> <button class="btn" data-dismiss="modal">{{_i}}Close{{/i}}</button>
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a> <button class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
</div> </div>
</div> </div>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">
...@@ -183,17 +183,17 @@ $('#myModal').on('show', function (e) { ...@@ -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;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;{{_i}}Launch demo modal{{/i}}&lt;/a&gt;
&lt;-- Modal --&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;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;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-body"&gt; &lt;div class="modal-body"&gt;
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt; &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" role="button" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt; &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;{{_i}}Close{{/i}}&lt;/button&gt;
&lt;a href="#" role="button" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt; &lt;button class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
......
js/bootstrap-modal.js
View file @ 6977d35e
...@@ -69,7 +69,10 @@ ...@@ -69,7 +69,10 @@
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
} }
that.$element.addClass('in') that.$element
.addClass('in')
.attr('aria-hidden', false)
.focus()
that.enforceFocus() that.enforceFocus()
...@@ -99,7 +102,9 @@ ...@@ -99,7 +102,9 @@
$(document).off('focusin.modal') $(document).off('focusin.modal')
this.$element.removeClass('in') this.$element
.removeClass('in')
.attr('aria-hidden', true)
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
this.hideWithTransition() : this.hideWithTransition() :
...@@ -118,11 +123,11 @@ ...@@ -118,11 +123,11 @@
, escape: function () { , escape: function () {
var that = this var that = this
if (this.isShown && this.options.keyboard) { 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() e.which == 27 && that.hide()
}) })
} else if (!this.isShown) { } else if (!this.isShown) {
$(document).off('keyup.dismiss.modal') this.$element.off('keyup.dismiss.modal')
} }
} }
...@@ -222,7 +227,12 @@ ...@@ -222,7 +227,12 @@
, option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault() e.preventDefault()
$target.modal(option)
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
}) })
}) })
......
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