Add aria-modal to modals (#27780)

Dynamically set/remove `aria-modal="true"` when a modal is shown/hidden

diff --git a/js/src/modal.js b/js/src/modal.js
index 5dfb64407ed6d8903680949b076fb8738878331b..2d4401ff83cc2405dc63bbbaa0e1e7f1249d3792 100644 (file)
--- 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 8e67d83a046fc9bf349692b085cba256b0640f7f..782a86eea09f889967c4de3be0db4c4c4c52e33a 100644 (file)
--- 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()
+
+    $('<div id="modal-test"/>')
+      .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()