Update styling and tailwind config

Author: rcourtman

src/index.css

@@ -2,10 +2,57 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Screen reader only text */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .overflow-y-hidden {
   overflow-y: hidden;
 }
 
+
+/* Enhanced focus indicators for accessibility */
+@layer utilities {
+  .focus-visible-ring {
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
+  }
+  
+  .focus-visible-ring-inset {
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset;
+  }
+}
+
+/* Ensure all interactive elements have visible focus */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[role="button"]:focus-visible,
+[role="tab"]:focus-visible,
+[tabindex]:focus-visible {
+  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
+}
+
+/* Special focus styles for tabs */
+.tab:focus-visible {
+  @apply outline-none ring-2 ring-blue-500 ring-inset;
+}
+
+/* Focus styles for table sortable headers */
+th.sortable:focus-visible {
+  @apply outline-none ring-2 ring-blue-500 ring-inset;
+}
+
 .subtle-stripes-light {
   background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent);
   background-size: 10px 10px;
@@ -15,3 +62,27 @@
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent);
   background-size: 10px 10px; /* Explicitly set for dark mode too */
 }
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  
+  .pulse-logo-circle {
+    animation: none !important;
+  }
+  
+  .animate-spin {
+    animation: none !important;
+  }
+  
+  .transition-all,
+  .transition-colors,
+  .transition-opacity {
+    transition: none !important;
+  }
+}

src/tailwind.config.js

@@ -23,6 +23,10 @@ module.exports = {
     'sm:inline',
     'truncate',
     'px-1',
+    'table-cell',
+    'sm:table-cell',
+    'md:table-cell',
+    'lg:table-cell',
   ],
   theme: {
     extend: {},