fix(b-modal): remove role="document" from .modal-content (#5345)

* fix(mdoal): remove `role="document"` from `.modal-content` amd only set `role="dialog"` when `.modal` is visible * Always leave `role="dialog"` in place
bootstrap-vue · May 12, 2020 · 0c2b406 · 0c2b406
1 parent c5ed437
commit 0c2b406
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -422,15 +422,17 @@ export const BModal = /*#__PURE__*/ Vue.extend({
       }
     },
     computedModalAttrs() {
+      const { isVisible, ariaLabel } = this
+
       return {
         id: this.modalId,
         role: 'dialog',
-        'aria-hidden': this.isVisible ? null : 'true',
-        'aria-modal': this.isVisible ? 'true' : null,
-        'aria-label': this.ariaLabel,
+        'aria-hidden': isVisible ? null : 'true',
+        'aria-modal': isVisible ? 'true' : null,
+        'aria-label': ariaLabel,
         'aria-labelledby':
           this.hideHeader ||
-          this.ariaLabel ||
+          ariaLabel ||
           // TODO: Rename slot to `title` and deprecate `modal-title`
           !(this.hasNormalizedSlot('modal-title') || this.titleHtml || this.title)
             ? null
@@ -994,7 +996,6 @@ export const BModal = /*#__PURE__*/ Vue.extend({
           staticClass: 'modal-content',
           class: this.contentClass,
           attrs: {
-            role: 'document',
             id: this.modalContentId,
             tabindex: '-1'
           }

diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
@@ -74,8 +74,6 @@ describe('modal', () => {
       expect($content.exists()).toBe(true)
       expect($content.attributes('tabindex')).toBeDefined()
       expect($content.attributes('tabindex')).toEqual('-1')
-      expect($content.attributes('role')).toBeDefined()
-      expect($content.attributes('role')).toEqual('document')
 
       wrapper.destroy()
     })
@@ -158,8 +156,6 @@ describe('modal', () => {
       expect($content.exists()).toBe(true)
       expect($content.attributes('tabindex')).toBeDefined()
       expect($content.attributes('tabindex')).toEqual('-1')
-      expect($content.attributes('role')).toBeDefined()
-      expect($content.attributes('role')).toEqual('document')
 
       wrapper.destroy()
     })