diff options
| -rw-r--r-- | docs/_includes/js/modal.html | 24 | ||||
| -rw-r--r-- | js/modal.js | 5 | ||||
| -rw-r--r-- | js/tests/unit/modal.js | 28 | ||||
| -rw-r--r-- | js/tests/visual/modal.html | 2 |
4 files changed, 14 insertions, 45 deletions
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index 1f6816136..92adb3af5 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -68,7 +68,7 @@ $('#myModal').on('shown.bs.modal', function () { <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" aria-hidden="true"> + <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> @@ -120,7 +120,7 @@ $('#myModal').on('shown.bs.modal', function () { </button> <!-- Modal --> -<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> +<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -141,7 +141,7 @@ $('#myModal').on('shown.bs.modal', function () { <div class="bs-callout bs-callout-warning" id="callout-modal-accessibility"> <h4>Make modals accessible</h4> - <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p> + <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title.</p> <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p> </div> @@ -160,7 +160,7 @@ $('#myModal').on('shown.bs.modal', function () { <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> -<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> +<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ... @@ -171,7 +171,7 @@ $('#myModal').on('shown.bs.modal', function () { <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> -<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> +<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> ... @@ -181,7 +181,7 @@ $('#myModal').on('shown.bs.modal', function () { {% endhighlight %} <!-- Modal content for the above example --> - <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> + <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> @@ -195,7 +195,7 @@ $('#myModal').on('shown.bs.modal', function () { </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> - <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> + <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> @@ -213,7 +213,7 @@ $('#myModal').on('shown.bs.modal', function () { <h2 id="modals-remove-animation">Remove animation</h2> <p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your modal markup.</p> {% highlight html %} -<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> +<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..."> ... </div> {% endhighlight %} @@ -221,7 +221,7 @@ $('#myModal').on('shown.bs.modal', function () { <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" aria-hidden="true"> + <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -269,7 +269,7 @@ $('#myModal').on('shown.bs.modal', function () { </button> </div><!-- /example --> {% highlight html %} -<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true"> +<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -322,7 +322,7 @@ $('#myModal').on('shown.bs.modal', function () { <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons... - <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -355,7 +355,7 @@ $('#myModal').on('shown.bs.modal', function () { <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons... -<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> diff --git a/js/modal.js b/js/modal.js index b031becfd..0426561af 100644 --- a/js/modal.js +++ b/js/modal.js @@ -90,9 +90,7 @@ that.$element[0].offsetWidth // force reflow } - that.$element - .addClass('in') - .attr('aria-hidden', false) + that.$element.addClass('in') that.enforceFocus() @@ -126,7 +124,6 @@ this.$element .removeClass('in') - .attr('aria-hidden', true) .off('click.dismiss.bs.modal') .off('mouseup.dismiss.bs.modal') diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index c6e747a3c..3c51c2fe2 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -49,18 +49,6 @@ $(function () { .bootstrapModal('show') }) - QUnit.test('should set aria-hidden to false when show method is called', function (assert) { - assert.expect(1) - var done = assert.async() - - $('<div id="modal-test"/>') - .on('shown.bs.modal', function () { - assert.strictEqual($('#modal-test').attr('aria-hidden'), 'false', 'aria-hidden is set to string "false" when modal shown') - done() - }) - .bootstrapModal('show') - }) - QUnit.test('should fire show event', function (assert) { assert.expect(1) var done = assert.async() @@ -106,22 +94,6 @@ $(function () { .bootstrapModal('show') }) - QUnit.test('should set aria-hidden to true when hide is called', function (assert) { - assert.expect(2) - var done = assert.async() - - $('<div id="modal-test"/>') - .on('shown.bs.modal', function () { - assert.strictEqual($('#modal-test').length, 1, 'modal has been inserted into the dom') - $(this).bootstrapModal('hide') - }) - .on('hidden.bs.modal', function () { - assert.strictEqual($('#modal-test').attr('aria-hidden'), 'true', 'aria-hidden is set to string "true" when modal shown') - done() - }) - .bootstrapModal('show') - }) - QUnit.test('should toggle when toggle is called', function (assert) { assert.expect(3) var done = assert.async() diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index fb6dca059..4342f0ce4 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -54,7 +54,7 @@ <h1>Modal <small>Bootstrap Visual Test</small></h1> </div> - <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> |