fix(VDialog): don't apply tabindex if dialog is not active (#8717)

* fix(VDialog): don't apply tabindex if dialog is not active * test(VDialog): add unit test for functionality
vuetifyjs · Aug 28, 2019 · d07e5f3 · d07e5f3
1 parent 3ca386d
commit d07e5f3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.ts b/packages/vuetify/src/components/VDialog/VDialog.ts
@@ -276,7 +276,7 @@ export default baseMixins.extend({
       class: this.contentClasses,
       attrs: {
         role: 'document',
-        tabindex: 0,
+        tabindex: this.isActive ? 0 : undefined,
         ...this.getScopeIdAttrs(),
       },
       on: {

diff --git a/packages/vuetify/src/components/VDialog/__tests__/VDialog.spec.ts b/packages/vuetify/src/components/VDialog/__tests__/VDialog.spec.ts
@@ -324,4 +324,18 @@ describe('VDialog.ts', () => {
     content.trigger('keydown.esc')
     expect(wrapper.vm.isActive).toBe(false)
   })
+
+  it('should only set tabindex if active', () => {
+    const wrapper = mountFunction()
+
+    const content = wrapper.find('.v-dialog__content')
+
+    expect(content.html()).toMatchSnapshot()
+    expect(content.element.tabIndex).toBe(-1)
+
+    wrapper.setData({ isActive: true })
+
+    expect(content.element.tabIndex).toBe(0)
+    expect(content.html()).toMatchSnapshot()
+  })
 })
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,12 +1,36 @@
 // 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="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;"
+     tabindex="0"
+>
+  <div class="v-dialog v-dialog--active"
+       style
+  >
+  </div>
+</div>
+`;
+
 exports[`VDialog.ts should render a disabled component and match snapshot 1`] = `
 <div role="dialog"
      class="v-dialog__container"
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -32,7 +56,6 @@ exports[`VDialog.ts should render a fullscreen component and match snapshot 1`]
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -50,7 +73,6 @@ exports[`VDialog.ts should render a persistent component and match snapshot 1`]
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -68,7 +90,6 @@ exports[`VDialog.ts should render a scrollable component and match snapshot 1`]
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -86,7 +107,6 @@ exports[`VDialog.ts should render component and match snapshot 1`] = `
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -104,7 +124,6 @@ exports[`VDialog.ts should render component with custom origin and match snapsho
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -122,7 +141,6 @@ exports[`VDialog.ts should render component with custom transition and match sna
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -140,7 +158,6 @@ exports[`VDialog.ts should render component with custom width (max-width) and ma
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >
@@ -158,7 +175,6 @@ exports[`VDialog.ts should render component with custom width and match snapshot
      style="display: block;"
 >
   <div role="document"
-       tabindex="0"
        class="v-dialog__content"
        style="z-index: 0;"
   >