From 158e0b56aee776bd6b20b885cd6c7a59e3734d8a Mon Sep 17 00:00:00 2001
From: kani <65712721+knknk98@users.noreply.github.com>
Date: Wed, 19 Jan 2022 22:19:56 +0900
Subject: [PATCH] fix(VDialog): change the role from "document" to "dialog"
 (#14602)

fixes #14231
---
 .../vuetify/src/components/VDialog/VDialog.ts |  4 +-
 .../__snapshots__/VDialog.spec.ts.snap        | 46 ++++++-------------
 2 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/packages/vuetify/src/components/VDialog/VDialog.ts b/packages/vuetify/src/components/VDialog/VDialog.ts
index 5ffa773b853..53db512e19e 100644
--- 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
index 88211542135..1fca81154b7 100644
--- 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>
 `;