完成50%

components/AppDialog.vue

@@ -12,7 +12,8 @@
       :aria-label="title"
       tabindex="-1"
       @click.stop
-      @keydown.esc.stop="cancel"
+      @keydown.esc.stop.prevent="cancel"
+      @keydown.tab="trapFocus"
     >
       <scroll-view class="app-dialog__content" scroll-y>
         <view class="app-dialog__copy">
@@ -62,6 +63,38 @@ const emit = defineEmits(["confirm", "cancel", "close"]);
 const dialogRef = ref(null);
 let previousFocus = null;
 
+const getDialogElement = () => {
+  const target = dialogRef.value;
+  if (target && typeof target.querySelectorAll === "function") return target;
+  if (target?.$el && typeof target.$el.querySelectorAll === "function") return target.$el;
+  return null;
+};
+
+const trapFocus = (event) => {
+  if (typeof document === "undefined") return;
+  const dialog = getDialogElement() || event.currentTarget;
+  if (!dialog || typeof dialog.querySelectorAll !== "function") return;
+  const focusable = Array.from(
+    dialog.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    ),
+  ).filter((element) => element.offsetParent !== null);
+  if (focusable.length === 0) {
+    event.preventDefault();
+    dialog.focus?.();
+    return;
+  }
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+  if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
+};
+
 watch(
   () => props.visible,
   async (visible) => {
@@ -69,7 +102,7 @@ watch(
     if (visible) {
       previousFocus = document.activeElement;
       await nextTick();
-      dialogRef.value?.focus?.();
+      getDialogElement()?.focus?.();
       return;
     }
     previousFocus?.focus?.();