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`] = ` -