diff --git a/src/App.tsx b/src/App.tsx index 5a642c0..b38afdb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,6 +33,14 @@ function AuthenticatedLayout({ children }: { children: React.ReactNode }) { return (
+ {/* Skip to main content link */} + + Skip to main content + + {/* Header */}
@@ -89,7 +97,7 @@ function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
{/* Main content */} -
+
{children}
diff --git a/src/components/AddItemInput.tsx b/src/components/AddItemInput.tsx index f92022f..1d8bc24 100644 --- a/src/components/AddItemInput.tsx +++ b/src/components/AddItemInput.tsx @@ -61,10 +61,12 @@ export const AddItemInput = forwardRef(func }; return ( -
+
+ setName(e.target.value)} diff --git a/src/components/BatchOperations.tsx b/src/components/BatchOperations.tsx index d2866ea..a8cfa39 100644 --- a/src/components/BatchOperations.tsx +++ b/src/components/BatchOperations.tsx @@ -109,6 +109,7 @@ export function BatchOperations({ disabled={isProcessing} className="p-2 hover:bg-gray-700 dark:hover:bg-gray-300 rounded-lg transition-colors disabled:opacity-50" title="Check all" + aria-label="Check all selected items" > @@ -120,6 +121,7 @@ export function BatchOperations({ disabled={isProcessing} className="p-2 hover:bg-gray-700 dark:hover:bg-gray-300 rounded-lg transition-colors disabled:opacity-50" title="Uncheck all" + aria-label="Uncheck all selected items" > @@ -134,6 +136,7 @@ export function BatchOperations({ disabled={isProcessing} className="p-2 text-red-400 hover:bg-red-900/30 rounded-lg transition-colors disabled:opacity-50" title="Delete all" + aria-label="Delete all selected items" > @@ -149,6 +152,7 @@ export function BatchOperations({ }} className="p-2 hover:bg-gray-700 dark:hover:bg-gray-300 rounded-lg transition-colors" title="Clear selection" + aria-label="Clear selection" > diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx index da4164c..f51ec6e 100644 --- a/src/components/ListCard.tsx +++ b/src/components/ListCard.tsx @@ -53,6 +53,7 @@ export const ListCard = memo(function ListCard({ list, currentUserDid, showOwner to={`/list/${list._id}`} onClick={() => haptic('light')} className="group block bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl dark:shadow-gray-900/50 transition-all duration-200 p-5 card-hover border border-gray-100 dark:border-gray-700 hover:border-amber-200 dark:hover:border-amber-600" + aria-label={`Open list: ${list.name}`} >
{/* Emoji icon */} diff --git a/src/components/ProvenanceInfo.tsx b/src/components/ProvenanceInfo.tsx index 3709a54..4135e0b 100644 --- a/src/components/ProvenanceInfo.tsx +++ b/src/components/ProvenanceInfo.tsx @@ -128,6 +128,7 @@ function DidRow({ : "hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" }`} title={copied ? "Copied!" : "Copy full DID"} + aria-label={copied ? "Copied!" : `Copy ${label}`} > {copied ? ( @@ -178,6 +179,7 @@ function ProvenanceSection({
-

+

Rename list

+ setName(e.target.value)} diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index 1cdb3c3..5da39f2 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -102,6 +102,7 @@ export function Settings({ onClose }: SettingsProps) { }`} role="switch" aria-checked={darkMode} + aria-label="Toggle dark mode" >
-