Mirrors/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2026-01-23 02:24:24 +00:00
Code Issues Projects Releases Wiki Activity

UX: Remove custom focus traps in dialog components #5145 #5307

Browse source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2025-11-11 04:05:09 +01:00
parent 9a8621dfc2
commit 05e4fdf67c
4 changed files with 0 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/component/confirm/dialog.vue
View file

@ -12,7 +12,6 @@
@keyup.enter.exact="confirm"
@after-enter="afterEnter"
@after-leave="afterLeave"
@focusout="onFocusOut"
>
<v-card ref="content" tabindex="-1">
<v-card-title class="d-flex justify-start align-center ga-3">
@ -66,25 +65,6 @@ export default {
afterLeave() {
this.$view.leave(this);
},
onFocusOut(ev) {
if (!this.$view.isActive(this)) {
return;
}
const el = this.$refs.content?.$el;
if (!ev || !ev.target || !(ev.target instanceof HTMLElement) || !(el instanceof HTMLElement)) {
return;
}
const next = ev.relatedTarget;
const leavingDialog = !next || !(next instanceof Node) || !el.contains(next);
if (leavingDialog) {
el.focus();
ev.preventDefault();
}
},
close() {
this.$emit("close");
},

26
frontend/src/component/lightbox.vue
View file

@ -14,7 +14,6 @@
class="p-dialog p-lightbox v-dialog--lightbox no-transition"
@after-enter="afterEnter"
@after-leave="afterLeave"
@focusout="onFocusOut"
@keydown.space.exact="onKeyDown"
@keydown.left.exact="onKeyDown"
@keydown.right.exact="onKeyDown"
@ -331,31 +330,6 @@ export default {
this.$event.publish("lightbox.leave");
this.$emit("leave");
},
// Traps the focus inside the lightbox dialog.
onFocusOut(ev) {
if (this.debug) {
this.log(`dialog.${ev.type}`, { ev });
}
if (!this.$view.isActive(this)) {
return;
}
// Keep content element focused.
if (this.$refs.content && this.$refs.content instanceof HTMLElement) {
if (
(ev.target &&
ev.target instanceof HTMLElement &&
(!ev.target.closest(".v-dialog--lightbox") || ev.target?.tabIndex < 0 || ev.target.disabled)) ||
(ev.relatedTarget &&
ev.relatedTarget instanceof HTMLElement &&
(!ev.relatedTarget.closest(".v-dialog--lightbox") || ev.relatedTarget.tabIndex < 0))
) {
this.focusContent(ev);
ev.preventDefault();
}
}
},
focusContent(ev) {
if (
this.$refs.content &&

16
frontend/src/component/photo/edit/dialog.vue
View file

@ -12,7 +12,6 @@
@keydown.left.exact="onKeyLeft"
@keydown.right.exact="onKeyRight"
@keydown.esc.stop="onClose"
@focusout="onFocusOut"
>
<v-card ref="content" tabindex="-1" :tile="$vuetify.display.smAndDown">
<v-toolbar flat color="navigation" :density="$vuetify.display.smAndDown ? 'compact' : 'comfortable'">
@ -203,21 +202,6 @@ export default {
this.ready = false;
this.$view.leave(this);
},
onFocusOut(ev) {
if (!this.$view.isActive(this)) {
return;
}
if (ev.target && ev.target instanceof HTMLElement && this.$refs.content?.$el instanceof HTMLElement) {
if (
document.activeElement !== this.$refs.content.$el &&
(!ev.target.closest(".p-photo-edit-dialog") || ev.target?.disabled)
) {
this.$refs.content?.$el.focus();
ev.preventDefault();
}
}
},
onUpdate(ev, data) {
if (!data || !data.entities || !Array.isArray(data.entities) || this.loading || !this.model || !this.model.UID) {
return;

16
frontend/src/component/upload/dialog.vue
View file

@ -10,7 +10,6 @@
@after-enter="afterEnter"
@after-leave="afterLeave"
@keydown.esc.exact="onClose"
@focusout="onFocusOut"
>
<v-form ref="form" class="p-photo-upload" validate-on="invalid-input" tabindex="-1" @submit.prevent="onSubmit">
<input ref="upload" type="file" multiple :accept="accept" class="d-none input-upload" @change.stop="onUpload()" />
@ -222,21 +221,6 @@ export default {
afterLeave() {
this.$view.leave(this);
},
onFocusOut(ev) {
if (!this.$view.isActive(this)) {
return;
}
if (ev.target && ev.target instanceof HTMLElement && this.$refs.form?.$el instanceof HTMLElement) {
if (
document.activeElement !== this.$refs.form.$el &&
(!ev.target.closest(".p-upload-dialog") || ev.target?.disabled)
) {
this.$refs.form?.$el.focus();
ev.preventDefault();
}
}
},
removeSelection(index) {
this.selectedAlbums.splice(index, 1);
},