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

Signed-off-by: Michael Mayer <[email protected]>

Author: lastzero

frontend/src/component/confirm/dialog.vue

@@ -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");
     },

frontend/src/component/lightbox.vue

@@ -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 &&

frontend/src/component/photo/edit/dialog.vue

@@ -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;

frontend/src/component/upload/dialog.vue

@@ -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);
     },