Handle aria-hidden on modal container when showing/hiding

Fixes #19878

diff --git a/js/src/modal.js b/js/src/modal.js
index e2365aca7907556d8cc84f3b625742176f8f0231..695ac569b8122f01cdcc92cf1885725b93ce479c 100644 (file)
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -223,6 +223,7 @@ const Modal = (($) => {
       }
 
       this._element.style.display = 'block'
+      this._element.removeAttribute('aria-hidden')
       this._element.scrollTop = 0
 
       if (transition) {
@@ -290,6 +291,7 @@ const Modal = (($) => {
 
     _hideModal() {
       this._element.style.display = 'none'
+      this._element.setAttribute('aria-hidden', 'true')
       this._showBackdrop(() => {
         $(document.body).removeClass(ClassName.OPEN)
         this._resetAdjustments()

diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index f3297641bdd8ce5505f25ce73c5fc1a64edaff57..28c1e0ec7428c3af3e805e25535819a1c6133a36 100644 (file)
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -233,6 +233,23 @@ $(function () {
       .bootstrapModal('show')
   })
 
+  QUnit.test('should remove aria-hidden attribute when shown, add it back when hidden', function (assert) {
+    assert.expect(3)
+    var done = assert.async()
+
+    $('<div id="modal-test" aria-hidden="true"/>')
+      .on('shown.bs.modal', function () {
+        assert.notOk($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute removed')
+        $(this).bootstrapModal('hide')
+      })
+      .on('hidden.bs.modal', function () {
+        assert.ok($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute added')
+        assert.strictEqual($('#modal-test').attr('aria-hidden'), 'true', 'correct aria-hidden="true" added')
+        done()
+      })
+      .bootstrapModal('show')
+  })
+
   QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
     assert.expect(2)
     var done = assert.async()