fix: add accessibility attributes to URL import modal

This commit is contained in:
SnapOtter
2026-05-11 21:43:54 +08:00
parent 1f008d9bcb
commit b9272977df
@@ -1,5 +1,5 @@
import { AlertCircle, Check, Clock, Link, Loader2, RotateCw, X } from "lucide-react"; 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 { type UrlImportEntry, useUrlImport } from "@/hooks/use-url-import";
import { extractUrls } from "@/lib/url-parser"; import { extractUrls } from "@/lib/url-parser";
@@ -79,6 +79,14 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
onClose(); onClose();
}, [cancel, onClose]); }, [cancel, onClose]);
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.key === "Escape") handleClose();
};
window.addEventListener("keydown", handler);
return () => window.removeEventListener("keydown", handler);
}, [handleClose]);
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Overlay */} {/* Overlay */}
@@ -89,7 +97,11 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
/> />
{/* Modal card */} {/* 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 */} {/* Header */}
<div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0"> <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" /> <Link className="h-5 w-5 text-primary" />
@@ -97,6 +109,7 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
<button <button
type="button" type="button"
onClick={handleClose} onClick={handleClose}
aria-label="Close"
className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground" className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />