fix(VDialog): focus on internal content when shown

vuetifyjs · Jan 9, 2022 · 19fc56a · 19fc56a
1 parent 9e2edf3
commit 19fc56a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 25 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -9,6 +9,7 @@
   transition: .3s map-get($transition, 'fast-in-fast-out')
   width: 100%
   z-index: inherit
+  outline: none
   +elevation($dialog-elevation)
 
   &:not(.v-dialog--fullscreen)
@@ -46,7 +47,6 @@
   transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
   width: 100%
   z-index: 6
-  outline: none
 
 .v-dialog__container
   display: none

diff --git a/packages/vuetify/src/components/VDialog/VDialog.ts b/packages/vuetify/src/components/VDialog/VDialog.ts
@@ -17,7 +17,7 @@ import Toggleable from '../../mixins/toggleable'
 import ClickOutside from '../../directives/click-outside'
 
 // Helpers
-import mixins from '../../util/mixins'
+import mixins, { ExtractVue } from '../../util/mixins'
 import { removed } from '../../util/console'
 import {
   convertToUnit,
@@ -37,8 +37,15 @@ const baseMixins = mixins(
   Toggleable
 )
 
+interface options extends ExtractVue<typeof baseMixins> {
+  $refs: {
+    dialog: HTMLElement
+    content: HTMLElement
+  }
+}
+
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-dialog',
 
   directives: { ClickOutside },
@@ -181,9 +188,9 @@ export default baseMixins.extend({
       // Double nextTick to wait for lazy content to be generated
       this.$nextTick(() => {
         this.$nextTick(() => {
-          if (!this.$refs.content.contains(document.activeElement)) {
+          if (!this.$refs.dialog.contains(document.activeElement)) {
             this.previousActiveElement = document.activeElement as HTMLElement
-            this.$refs.content.focus()
+            this.$refs.dialog.focus()
           }
           this.bind()
         })
@@ -254,7 +261,6 @@ export default baseMixins.extend({
             class: this.contentClasses,
             attrs: {
               role: 'document',
-              tabindex: this.isActive ? 0 : undefined,
               ...this.getScopeIdAttrs(),
             },
             on: { keydown: this.onKeydown },
@@ -280,6 +286,9 @@ export default baseMixins.extend({
     genInnerContent () {
       const data: VNodeData = {
         class: this.classes,
+        attrs: {
+          tabindex: this.isActive ? 0 : undefined,
+        },
         ref: 'dialog',
         directives: [
           {

diff --git a/packages/vuetify/src/components/VDialog/__tests__/VDialog.spec.ts b/packages/vuetify/src/components/VDialog/__tests__/VDialog.spec.ts
@@ -308,15 +308,15 @@ describe('VDialog.ts', () => {
       propsData: { eager: true },
     })
 
-    const content = wrapper.find('.v-dialog__content')
+    const dialog = wrapper.find('.v-dialog')
 
-    expect(content.html()).toMatchSnapshot()
-    expect(content.element.tabIndex).toBe(-1)
+    expect(dialog.html()).toMatchSnapshot()
+    expect(dialog.element.tabIndex).toBe(-1)
 
     wrapper.setData({ isActive: true })
 
-    expect(content.element.tabIndex).toBe(0)
-    expect(content.html()).toMatchSnapshot()
+    expect(dialog.element.tabIndex).toBe(0)
+    expect(dialog.html()).toMatchSnapshot()
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/8697

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,27 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VDialog.ts should only set tabindex if active 1`] = `
-<div role="document"
-     class="v-dialog__content"
-     style="z-index: 0;"
+<div class="v-dialog"
+     style="transform-origin: center center; display: none;"
 >
-  <div class="v-dialog"
-       style="transform-origin: center center; display: none;"
-  >
-  </div>
 </div>
 `;
 
 exports[`VDialog.ts should only set tabindex if active 2`] = `
-<div role="document"
-     class="v-dialog__content v-dialog__content--active"
-     style="z-index: 202; z-index: 202;"
+<div class="v-dialog v-dialog--active"
+     style="transform-origin: center center;"
      tabindex="0"
 >
-  <div class="v-dialog v-dialog--active"
-       style="transform-origin: center center;"
-  >
-  </div>
 </div>
 `;