From 655038581ecc57e482bec226824292eebef4d02a Mon Sep 17 00:00:00 2001
From: Krusty <krusty@clawdbot.com>
Date: Sun, 8 Feb 2026 08:06:45 -0800
Subject: [PATCH] a11y: comprehensive accessibility review and fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add skip-to-main-content link for keyboard navigation (App.tsx)
- Fix heading hierarchy: h2→h1 on Home and PriorityFocus pages
- Add labels to form inputs: AddItemInput, SearchInput, RenameListDialog, ShareModal invite link
- Add sr-only labels for screen readers on search and add-item inputs
- Add role='search' to search container
- Change search input type from 'text' to 'search' for semantics
- Add role='dialog', aria-modal, aria-labelledby to RenameListDialog
- Add aria-expanded to collapsible sections: CategoryHeader, ProvenanceSection, VerificationBadge
- Add aria-label to toggle switches in Settings (dark mode, haptics, notifications)
- Add aria-label to BatchOperations toolbar buttons (check, uncheck, delete, clear)
- Add aria-label to ListCard links for screen reader context
- Add aria-label to tag color picker buttons
- Add aria-label to collaborator role selector
- Add aria-label to ProvenanceInfo copy buttons
- Add role='alert' and aria-live='assertive' to OfflineIndicator
- Add id='main-content' to main element for skip link target
---
 src/App.tsx                                  | 10 +++++++++-
 src/components/AddItemInput.tsx              |  4 +++-
 src/components/BatchOperations.tsx           |  4 ++++
 src/components/ListCard.tsx                  |  1 +
 src/components/ProvenanceInfo.tsx            |  2 ++
 src/components/RenameListDialog.tsx          |  7 ++++++-
 src/components/Settings.tsx                  |  3 +++
 src/components/ShareModal.tsx                |  3 ++-
 src/components/TagSelector.tsx               |  1 +
 src/components/lists/CategoryHeader.tsx      |  1 +
 src/components/offline/OfflineIndicator.tsx  |  2 +-
 src/components/publish/VerificationBadge.tsx |  2 ++
 src/components/sharing/CollaboratorList.tsx  |  1 +
 src/components/ui/SearchInput.tsx            |  6 ++++--
 src/pages/Home.tsx                           |  4 ++--
 src/pages/PriorityFocus.tsx                  |  4 ++--
 16 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fa494ef..a373f19 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,6 +32,14 @@ function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 transition-colors">
+      {/* Skip to main content link */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:top-2 focus:left-2 focus:px-4 focus:py-2 focus:bg-amber-500 focus:text-white focus:rounded-lg focus:text-sm focus:font-medium"
+      >
+        Skip to main content
+      </a>
+
       {/* Header */}
       <header className="sticky top-0 z-40 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-800 safe-area-inset-top">
         <div className="container mx-auto px-4 py-3 flex items-center justify-between">
@@ -88,7 +96,7 @@ function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
       </header>
 
       {/* Main content */}
-      <main className="container mx-auto px-4 py-6 safe-area-inset-bottom">
+      <main id="main-content" className="container mx-auto px-4 py-6 safe-area-inset-bottom">
         <ErrorBoundary>{children}</ErrorBoundary>
       </main>
 
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<HTMLInputElement, AddItemInputProps>(func
   };
 
   return (
-    <form onSubmit={handleSubmit} className="flex gap-3">
+    <form onSubmit={handleSubmit} className="flex gap-3" aria-label="Add new item">
       <div className="flex-1 relative">
+        <label htmlFor="add-item-input" className="sr-only">Add new item</label>
         <input
           ref={inputRef}
+          id="add-item-input"
           type="text"
           value={name}
           onChange={(e) => 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"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
@@ -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"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -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"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -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"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
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}`}
     >
       <div className="flex items-start gap-4">
         {/* 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 ? (
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -178,6 +179,7 @@ function ProvenanceSection({
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        aria-expanded={isOpen}
       >
         <div className="flex items-center gap-2">
           <svg 
diff --git a/src/components/RenameListDialog.tsx b/src/components/RenameListDialog.tsx
index d35b709..fefa16a 100644
--- a/src/components/RenameListDialog.tsx
+++ b/src/components/RenameListDialog.tsx
@@ -49,13 +49,18 @@ export function RenameListDialog({ list, onClose }: RenameListDialogProps) {
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-fade-in">
       <div
         ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="rename-dialog-title"
         className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl max-w-sm w-full p-6 animate-slide-up"
       >
-        <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">
+        <h3 id="rename-dialog-title" className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">
           Rename list
         </h3>
 
+        <label htmlFor="rename-list-input" className="sr-only">List name</label>
         <input
+          id="rename-list-input"
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 50d0a98..1823034 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -94,6 +94,7 @@ export function Settings({ onClose }: SettingsProps) {
               }`}
               role="switch"
               aria-checked={darkMode}
+              aria-label="Toggle dark mode"
             >
               <div
                 className={`absolute top-1 w-6 h-6 bg-white rounded-full shadow-md transition-transform ${
@@ -129,6 +130,7 @@ export function Settings({ onClose }: SettingsProps) {
                 }`}
                 role="switch"
                 aria-checked={hapticsEnabled}
+                aria-label="Toggle haptic feedback"
               >
                 <div
                   className={`absolute top-1 w-6 h-6 bg-white rounded-full shadow-md transition-transform ${
@@ -177,6 +179,7 @@ export function Settings({ onClose }: SettingsProps) {
                 } ${notificationsLoading || notificationPermission === 'denied' ? 'opacity-50 cursor-not-allowed' : ''}`}
                 role="switch"
                 aria-checked={notificationsEnabled}
+                aria-label="Toggle push notifications"
               >
                 <div
                   className={`absolute top-1 w-6 h-6 bg-white rounded-full shadow-md transition-transform ${
diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx
index 88d07ed..df674ee 100644
--- a/src/components/ShareModal.tsx
+++ b/src/components/ShareModal.tsx
@@ -187,11 +187,12 @@ export function ShareModal({ list, onClose }: ShareModalProps) {
 
         {inviteLink && !isCreating && (
           <div className="space-y-3">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label htmlFor="invite-link-input" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
               Invite link
             </label>
             <div className="flex gap-2">
               <input
+                id="invite-link-input"
                 type="text"
                 value={inviteLink}
                 readOnly
diff --git a/src/components/TagSelector.tsx b/src/components/TagSelector.tsx
index 381ea83..dede93a 100644
--- a/src/components/TagSelector.tsx
+++ b/src/components/TagSelector.tsx
@@ -183,6 +183,7 @@ export function TagSelector({
                 }`}
                 style={{ backgroundColor: color.value }}
                 title={color.name}
+                aria-label={`Select ${color.name} color`}
               />
             ))}
           </div>
diff --git a/src/components/lists/CategoryHeader.tsx b/src/components/lists/CategoryHeader.tsx
index 7b52fd7..6469bf2 100644
--- a/src/components/lists/CategoryHeader.tsx
+++ b/src/components/lists/CategoryHeader.tsx
@@ -27,6 +27,7 @@ export function CategoryHeader({
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className="w-full flex items-center justify-between py-2 text-left group"
+        aria-expanded={isExpanded}
       >
         <div className="flex items-center gap-2">
           <span
diff --git a/src/components/offline/OfflineIndicator.tsx b/src/components/offline/OfflineIndicator.tsx
index ebc7f9b..0408167 100644
--- a/src/components/offline/OfflineIndicator.tsx
+++ b/src/components/offline/OfflineIndicator.tsx
@@ -11,7 +11,7 @@ export function OfflineIndicator() {
   if (isOnline) return null;
 
   return (
-    <div className="fixed top-0 left-0 right-0 z-50 animate-slide-up">
+    <div className="fixed top-0 left-0 right-0 z-50 animate-slide-up" role="alert" aria-live="assertive">
       <div className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-4 py-2.5 text-center text-sm font-medium shadow-lg">
         <div className="flex items-center justify-center gap-2">
           <span className="relative flex h-3 w-3">
diff --git a/src/components/publish/VerificationBadge.tsx b/src/components/publish/VerificationBadge.tsx
index 61eefd2..1c94f8d 100644
--- a/src/components/publish/VerificationBadge.tsx
+++ b/src/components/publish/VerificationBadge.tsx
@@ -32,6 +32,8 @@ export function VerificationBadge({ did, didDocument }: VerificationBadgeProps)
       <button
         onClick={() => setShowDetails(!showDetails)}
         className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-100 text-green-800 rounded-full text-sm font-medium hover:bg-green-200 transition-colors"
+        aria-expanded={showDetails}
+        aria-label="Verification details"
       >
         <svg
           className="w-4 h-4"
diff --git a/src/components/sharing/CollaboratorList.tsx b/src/components/sharing/CollaboratorList.tsx
index 9626758..372015b 100644
--- a/src/components/sharing/CollaboratorList.tsx
+++ b/src/components/sharing/CollaboratorList.tsx
@@ -228,6 +228,7 @@ function RoleSelector({ value, onChange, disabled }: RoleSelectorProps) {
       onChange={(e) => onChange(e.target.value as "editor" | "viewer")}
       disabled={disabled}
       className="px-2 py-1 text-xs border border-gray-300 rounded bg-white text-gray-700 disabled:opacity-50"
+      aria-label="Change role"
     >
       <option value="editor">Editor</option>
       <option value="viewer">Viewer</option>
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index 82a9033..1d623e7 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -38,7 +38,8 @@ export function SearchInput({
   }, []);
 
   return (
-    <div className={`relative ${className}`}>
+    <div className={`relative ${className}`} role="search">
+      <label htmlFor="search-lists-input" className="sr-only">Search lists</label>
       {/* Search icon */}
       <div
         className={`absolute left-3 top-1/2 -translate-y-1/2 transition-colors ${
@@ -57,7 +58,8 @@ export function SearchInput({
 
       <input
         ref={inputRef}
-        type="text"
+        id="search-lists-input"
+        type="search"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         onFocus={() => setIsFocused(true)}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index b32e83a..9d9c0a4 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -204,9 +204,9 @@ export function Home() {
 
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
           Your Lists
-        </h2>
+        </h1>
         <div className="flex items-center gap-2">
           <Link
             to="/priority"
diff --git a/src/pages/PriorityFocus.tsx b/src/pages/PriorityFocus.tsx
index a2076d8..d36fcb0 100644
--- a/src/pages/PriorityFocus.tsx
+++ b/src/pages/PriorityFocus.tsx
@@ -250,9 +250,9 @@ export function PriorityFocus() {
                 />
               </svg>
             </Link>
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
               🎯 Priority Focus
-            </h2>
+            </h1>
           </div>
           <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
             {isLoading