mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
fix: add accessibility attributes to URL import modal
This commit is contained in:
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user