a11y: comprehensive WCAG 2.1 Level AA accessibility audit

- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
  for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88

news.njk

@@ -10,10 +10,10 @@ withSidebar: true
     <p class="text-surface-600 dark:text-surface-400">
       Aggregated content from my favorite feeds
     </p>
-    <p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
+    <p class="text-xs text-surface-600 dark:text-surface-400 mt-2" x-show="lastUpdated">
       Last updated: <span class="font-mono" x-text="formatDate(lastUpdated, 'full')"></span>
-      <button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400 rounded" :disabled="loading">
-        <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400 rounded" :disabled="loading" aria-label="Refresh news">
+        <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
         </svg>
       </button>
@@ -21,8 +21,8 @@ withSidebar: true
   </header>
 
   {# Loading State #}
-  <div x-show="loading && items.length === 0" class="text-center py-12">
-    <svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
+  <div x-show="loading && items.length === 0" class="text-center py-12" role="status">
+    <svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24" aria-hidden="true">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>
@@ -30,7 +30,7 @@ withSidebar: true
   </div>
 
   {# Error State #}
-  <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+  <div x-show="error" role="alert" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
     <p class="text-red-700 dark:text-red-400" x-text="error"></p>
     <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
   </div>
@@ -45,6 +45,7 @@ withSidebar: true
           <button
             @click="viewMode = 'list'"
             :class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+            :aria-pressed="(viewMode === 'list').toString()"
             class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
             title="List view"
           >
@@ -56,6 +57,7 @@ withSidebar: true
           <button
             @click="viewMode = 'card'"
             :class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+            :aria-pressed="(viewMode === 'card').toString()"
             class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
             title="Card view"
           >
@@ -67,6 +69,7 @@ withSidebar: true
           <button
             @click="viewMode = 'full'"
             :class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+            :aria-pressed="(viewMode === 'full').toString()"
             class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
             title="Expanded view"
           >
@@ -79,7 +82,9 @@ withSidebar: true
 
         {# Feed Filter Dropdown #}
         <div class="relative" x-show="feeds.length > 1">
+          <label for="news-feed-filter" class="sr-only">Filter by feed source</label>
           <select
+            id="news-feed-filter"
             x-model="filterFeed"
             class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 transition-colors"
           >
@@ -88,7 +93,7 @@ withSidebar: true
               <option :value="feed.id" x-text="feed.title"></option>
             </template>
           </select>
-          <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-surface-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-surface-600 dark:text-surface-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
           </svg>
         </div>
@@ -97,11 +102,11 @@ withSidebar: true
       {# Stats Bar #}
       <div class="flex flex-wrap gap-4 mb-6 p-4 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-sm">
         <div class="flex items-center gap-2">
-          <span class="text-surface-500">Feeds:</span>
+          <span class="text-surface-600 dark:text-surface-400">Feeds:</span>
           <span class="font-medium font-mono text-surface-900 dark:text-surface-100" x-text="status?.stats?.feedsCount || feeds.length"></span>
         </div>
         <div class="flex items-center gap-2">
-          <span class="text-surface-500">Items:</span>
+          <span class="text-surface-600 dark:text-surface-400">Items:</span>
           <span class="font-medium font-mono text-surface-900 dark:text-surface-100" x-text="status?.stats?.itemsCount || items.length"></span>
         </div>
         <div x-show="status?.status === 'syncing'" class="flex items-center gap-2 text-orange-600 dark:text-orange-400">
@@ -144,7 +149,7 @@ withSidebar: true
                   ></a>
                 </h2>
                 <p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-2 mb-2" x-text="item.description"></p>
-                <div class="flex flex-wrap items-center gap-2 text-xs text-surface-500">
+                <div class="flex flex-wrap items-center gap-2 text-xs text-surface-600 dark:text-surface-400">
                   <a
                     :href="item.sourceUrl || getFeedUrl(item.feedId) || item.link"
                     class="inline-flex items-center gap-1 px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full hover:bg-surface-200 dark:hover:bg-surface-600 transition-colors"
@@ -210,7 +215,7 @@ withSidebar: true
                   ></a>
                 </h2>
                 <p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3 mb-3" x-text="item.description"></p>
-                <div class="flex items-center justify-between text-xs text-surface-500">
+                <div class="flex items-center justify-between text-xs text-surface-600 dark:text-surface-400">
                   <span class="truncate max-w-[60%]" x-text="truncate(item.sourceTitle || item.feedTitle, 20)"></span>
                   <time class="font-mono text-sm" :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
                 </div>
@@ -264,7 +269,7 @@ withSidebar: true
                     <span class="font-medium text-surface-700 dark:text-surface-300" x-text="item.sourceTitle || item.feedTitle"></span>
                   </a>
                   <span x-show="item.author" class="text-surface-600 dark:text-surface-400" x-text="'by ' + item.author"></span>
-                  <time :datetime="item.pubDate" class="font-mono text-sm text-surface-500" x-text="formatDate(item.pubDate, 'long')"></time>
+                  <time :datetime="item.pubDate" class="font-mono text-sm text-surface-600 dark:text-surface-400" x-text="formatDate(item.pubDate, 'long')"></time>
                 </div>
 
                 <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
@@ -349,11 +354,11 @@ withSidebar: true
 
   {# Empty State #}
   <div x-show="!loading && items.length === 0 && !error" class="text-center py-12">
-    <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
     </svg>
     <p class="text-surface-600 dark:text-surface-400 text-lg">No news items yet.</p>
-    <p class="text-surface-500 text-sm mt-2">Add some RSS feeds to get started.</p>
+    <p class="text-surface-600 dark:text-surface-400 text-sm mt-2">Add some RSS feeds to get started.</p>
   </div>
 </div>