vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #3729 - Dialog: header buttons autofocus defect

pull/3737/head
Tuğçe Küçükoğlu 2023-03-10 14:17:30 +03:00
parent c81e835b2e
commit 5f5c7c6add
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/dialog/Dialog.vue
View File

@ -8,10 +8,20 @@
<span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span> <span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span>
</slot> </slot>
<div class="p-dialog-header-icons"> <div class="p-dialog-header-icons">
<button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusable" class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'"> <button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'">
<span :class="maximizeIconClass"></span> <span :class="maximizeIconClass"></span>
</button> </button>
<button v-if="closable" :ref="closeButtonRef" v-ripple :autofocus="focusable" class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" :aria-label="closeAriaLabel" type="button" v-bind="closeButtonProps"> <button
v-if="closable"
:ref="closeButtonRef"
v-ripple
:autofocus="focusableClose"
class="p-dialog-header-icon p-dialog-header-close p-link"
@click="close"
:aria-label="closeAriaLabel"
type="button"
v-bind="closeButtonProps"
>
<span :class="['p-dialog-header-close-icon', closeIcon]"></span> <span :class="['p-dialog-header-close-icon', closeIcon]"></span>
</button> </button>
</div> </div>
@ -155,7 +165,8 @@ export default {
return { return {
containerVisible: this.visible, containerVisible: this.visible,
maximized: false, maximized: false,
focusable: false focusableMax: null,
focusableClose: null
}; };
}, },
documentKeydownListener: null, documentKeydownListener: null,
@ -218,7 +229,8 @@ export default {
}, },
onLeave() { onLeave() {
this.$emit('hide'); this.$emit('hide');
this.focusable = false; this.focusableClose = null;
this.focusableMax = null;
}, },
onAfterLeave() { onAfterLeave() {
if (this.autoZIndex) { if (this.autoZIndex) {
@ -249,14 +261,19 @@ export default {
focusTarget = this.$slots.default && findFocusableElement(this.content); focusTarget = this.$slots.default && findFocusableElement(this.content);
if (!focusTarget) { if (!focusTarget) {
focusTarget = findFocusableElement(this.container); if (this.maximizable) {
this.focusableMax = true;
focusTarget = this.maximizableButton;
} else {
this.focusableClose = true;
focusTarget = this.closeButton;
}
} }
} }
} }
if (focusTarget) { if (focusTarget) {
this.focusable = true; DomHandler.focus(focusTarget);
focusTarget.focus();
} }
}, },
maximize(event) { maximize(event) {