fix: add and remove inert attributes to allow browser proper focus management for modals

js/src/modal.js

@@ -176,6 +176,7 @@ class Modal extends BaseComponent {
 
     this._element.style.display = 'block'
     this._element.removeAttribute('aria-hidden')
+    this._element.inert = false // allow modal to be focused again
     this._element.setAttribute('aria-modal', true)
     this._element.setAttribute('role', 'dialog')
     this._element.scrollTop = 0
@@ -243,6 +244,7 @@ class Modal extends BaseComponent {
   }
 
   _hideModal() {
+    this._element.inert = true // ensure that focus is removed and handled properly before hiding and setting aria-hidden
     this._element.style.display = 'none'
     this._element.setAttribute('aria-hidden', true)
     this._element.removeAttribute('aria-modal')

js/tests/unit/modal.spec.js

@@ -100,6 +100,24 @@ describe('Modal', () => {
           expect(modalEl.getAttribute('aria-hidden')).toBeNull()
           expect(modalEl.style.display).toEqual('block')
           expect(document.querySelector('.modal-backdrop')).not.toBeNull()
+          expect(modalEl.inert).toBeFalse()
+          resolve()
+        })
+
+        modal.show()
+      })
+    })
+
+    it('should set inert to false when modal is shown', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
+
+        const modalEl = fixtureEl.querySelector('.modal')
+        modalEl.inert = true
+        const modal = new Modal(modalEl)
+
+        modalEl.addEventListener('shown.bs.modal', () => {
+          expect(modalEl.inert).toBeFalse()
           resolve()
         })
 
@@ -701,6 +719,7 @@ describe('Modal', () => {
           expect(modalEl.getAttribute('role')).toBeNull()
           expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
           expect(modalEl.style.display).toEqual('none')
+          expect(modalEl.inert).toBeTrue()
           expect(backdropSpy).toHaveBeenCalled()
           resolve()
         })
@@ -709,6 +728,27 @@ describe('Modal', () => {
       })
     })
 
+    it('should set inert to true when modal is hidden', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
+
+        const modalEl = fixtureEl.querySelector('.modal')
+        const modal = new Modal(modalEl)
+
+        modalEl.addEventListener('shown.bs.modal', () => {
+          expect(modalEl.inert).toBeFalse()
+          modal.hide()
+        })
+
+        modalEl.addEventListener('hidden.bs.modal', () => {
+          expect(modalEl.inert).toBeTrue()
+          resolve()
+        })
+
+        modal.show()
+      })
+    })
+
     it('should close modal when clicking outside of modal-content', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'