From b9272977dff17e37537edcb4d859ab6bae50f2cc Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 11 May 2026 21:43:54 +0800
Subject: [PATCH] fix: add accessibility attributes to URL import modal

---
 .../src/components/common/url-import-modal.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/common/url-import-modal.tsx b/apps/web/src/components/common/url-import-modal.tsx
index 3c6a7f98..2913a89f 100644
--- a/apps/web/src/components/common/url-import-modal.tsx
+++ b/apps/web/src/components/common/url-import-modal.tsx
@@ -1,5 +1,5 @@
 import { AlertCircle, Check, Clock, Link, Loader2, RotateCw, X } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { type UrlImportEntry, useUrlImport } from "@/hooks/use-url-import";
 import { extractUrls } from "@/lib/url-parser";
 
@@ -79,6 +79,14 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
     onClose();
   }, [cancel, onClose]);
 
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [handleClose]);
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Overlay */}
@@ -89,7 +97,11 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
       />
 
       {/* Modal card */}
-      <div className="relative z-10 w-full max-w-lg bg-background border border-border rounded-xl shadow-xl flex flex-col mx-4">
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="relative z-10 w-full max-w-lg bg-background border border-border rounded-xl shadow-xl flex flex-col mx-4"
+      >
         {/* Header */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
           <Link className="h-5 w-5 text-primary" />
@@ -97,6 +109,7 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
           <button
             type="button"
             onClick={handleClose}
+            aria-label="Close"
             className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground"
           >
             <X className="h-4 w-4" />