diff --git a/js/src/modal.js b/js/src/modal.js index 5dfb64407e..2d4401ff83 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -243,6 +243,7 @@ class Modal { this._element.style.display = 'block' this._element.removeAttribute('aria-hidden') + this._element.setAttribute('aria-modal', true) this._element.scrollTop = 0 if (transition) { @@ -314,6 +315,7 @@ class Modal { _hideModal() { this._element.style.display = 'none' this._element.setAttribute('aria-hidden', true) + this._element.removeAttribute('aria-modal') this._isTransitioning = false this._showBackdrop(() => { $(document.body).removeClass(ClassName.OPEN) diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 8e67d83a04..782a86eea0 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -280,6 +280,23 @@ $(function () { .bootstrapModal('show') }) + QUnit.test('should add aria-modal attribute when shown, remove it again when hidden', function (assert) { + assert.expect(3) + var done = assert.async() + + $('
') + .on('shown.bs.modal', function () { + assert.ok($('#modal-test').is('[aria-modal]'), 'aria-modal attribute added') + assert.strictEqual($('#modal-test').attr('aria-modal'), 'true', 'correct aria-modal="true" added') + $(this).bootstrapModal('hide') + }) + .on('hidden.bs.modal', function () { + assert.notOk($('#modal-test').is('[aria-modal]'), 'aria-modal attribute removed') + done() + }) + .bootstrapModal('show') + }) + QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) { assert.expect(2) var done = assert.async()