fix(VDialog): change the role from "document" to "dialog" (#14602)

fixes #14231
vuetifyjs · Jan 19, 2022 · 158e0b5 · 158e0b5
1 parent 9cf48e4
commit 158e0b5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 34 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.ts b/packages/vuetify/src/components/VDialog/VDialog.ts
@@ -253,8 +253,9 @@ export default baseMixins.extend({
           this.$createElement('div', {
             class: this.contentClasses,
             attrs: {
-              role: 'document',
+              role: 'dialog',
               tabindex: this.isActive ? 0 : undefined,
+              'aria-modal': this.hideOverlay ? undefined : 'true',
               ...this.getScopeIdAttrs(),
             },
             on: { keydown: this.onKeydown },
@@ -318,7 +319,6 @@ export default baseMixins.extend({
           this.attach === true ||
           this.attach === 'attach',
       },
-      attrs: { role: 'dialog' },
     }, [
       this.genActivator(),
       this.genContent(),

diff --git a/packages/vuetify/src/components/VDialog/__tests__/__snapshots__/VDialog.spec.ts.snap b/packages/vuetify/src/components/VDialog/__tests__/__snapshots__/VDialog.spec.ts.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VDialog.ts should only set tabindex if active 1`] = `
-<div role="document"
+<div role="dialog"
+     aria-modal="true"
      class="v-dialog__content"
      style="z-index: 0;"
 >
@@ -13,7 +14,8 @@ exports[`VDialog.ts should only set tabindex if active 1`] = `
 `;
 
 exports[`VDialog.ts should only set tabindex if active 2`] = `
-<div role="document"
+<div role="dialog"
+     aria-modal="true"
      class="v-dialog__content v-dialog__content--active"
      style="z-index: 202; z-index: 202;"
      tabindex="0"
@@ -26,71 +28,51 @@ exports[`VDialog.ts should only set tabindex if active 2`] = `
 `;
 
 exports[`VDialog.ts should render a disabled component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a eager component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a fullscreen component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a persistent component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a scrollable component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom origin and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom transition and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom width (max-width) and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom width and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;