diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass index 1843247ae55..23d27e13f39 100644 --- 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 index 53db512e19e..d18f73f41ac 100644 --- 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 { + $refs: { + dialog: HTMLElement + content: HTMLElement + } +} + /* @vue/component */ -export default baseMixins.extend({ +export default baseMixins.extend().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: 'dialog', - tabindex: this.isActive ? 0 : undefined, 'aria-modal': this.hideOverlay ? undefined : 'true', ...this.getScopeIdAttrs(), }, @@ -281,6 +287,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 index 0c56a4fac67..569fb779a3a 100644 --- 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 index 1fca81154b7..d481a960071 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,29 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`VDialog.ts should only set tabindex if active 1`] = ` - `; exports[`VDialog.ts should only set tabindex if active 2`] = ` - `;