Handle aria-hidden on modal container when showing/hiding

Fixes #19878

2 files changed, 19 insertions, 0 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index e2365aca7..695ac569b 100644
--- 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 f3297641b..28c1e0ec7 100644
--- 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()