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 bf3c96b8f26..b85ba2d317d 100644 --- a/packages/vuetify/src/components/VDialog/VDialog.ts +++ b/packages/vuetify/src/components/VDialog/VDialog.ts @@ -178,9 +178,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() }) @@ -222,10 +222,11 @@ export default baseMixins.extend({ if ( !!target && + this.$refs.dialog && // It isn't the document or the dialog body - ![document, this.$refs.content].includes(target) && + ![document, this.$refs.dialog].includes(target) && // It isn't inside the dialog body - !this.$refs.content.contains(target) && + !this.$refs.dialog.contains(target) && // We're the topmost dialog this.activeZIndex >= this.getMaxZIndex() && // It isn't inside a dependent element (like a menu) @@ -233,7 +234,7 @@ export default baseMixins.extend({ // So we must have focused something outside the dialog and its children ) { // Find and focus the first available element inside the dialog - const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') + const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined el && el.focus() } @@ -251,7 +252,6 @@ export default baseMixins.extend({ class: this.contentClasses, attrs: { role: 'dialog', - tabindex: this.isActive ? 0 : undefined, 'aria-modal': this.hideOverlay ? undefined : 'true', ...this.getScopeIdAttrs(), }, @@ -278,6 +278,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`] = ` - `; diff --git a/packages/vuetify/src/mixins/dependent/index.ts b/packages/vuetify/src/mixins/dependent/index.ts index 2e9c6d9c488..89f1ca27e9c 100644 --- a/packages/vuetify/src/mixins/dependent/index.ts +++ b/packages/vuetify/src/mixins/dependent/index.ts @@ -3,10 +3,10 @@ import Vue from 'vue' import mixins from '../../util/mixins' import { VOverlay } from '../../components/VOverlay' -interface options extends Vue { +interface options { $el: HTMLElement $refs: { - content: HTMLElement + content?: HTMLElement } overlay?: InstanceType } @@ -31,7 +31,7 @@ function searchChildren (children: Vue[]): DependentInstance[] { } /* @vue/component */ -export default mixins().extend({ +export default mixins().extend({ name: 'dependent', data () { diff --git a/packages/vuetify/src/mixins/detachable/index.ts b/packages/vuetify/src/mixins/detachable/index.ts index 151145488fb..9f64fbce908 100644 --- a/packages/vuetify/src/mixins/detachable/index.ts +++ b/packages/vuetify/src/mixins/detachable/index.ts @@ -7,13 +7,13 @@ import mixins, { ExtractVue } from '../../util/mixins' import { consoleWarn } from '../../util/console' // Types -import Vue, { PropOptions } from 'vue' +import { PropOptions } from 'vue' import { VNode } from 'vue/types' -interface options extends Vue { +interface options { $el: HTMLElement $refs: { - content: HTMLElement + content?: HTMLElement } }