feat: Phase 1 - Critical WCAG 2.1 AA accessibility improvements

Implemented comprehensive accessibility enhancements to meet WCAG 2.1 AA standards:

**Skip Navigation:**
- Added skip-to-content link for keyboard users
- Link appears on focus and jumps directly to main content area

**Screen Reader Support:**
- Created .sr-only and .sr-only-focusable utility classes
- Added aria-hidden="true" to all decorative icons
- Added descriptive aria-label attributes to all icon-only buttons

**Enhanced Focus Indicators:**
- Implemented 3px visible outlines on all interactive elements
- Added :focus-visible for keyboard-only focus indicators
- Special focus styling for primary actions (orange outline)
- Consistent 2px outline-offset for better visibility

**Table Accessibility:**
- Added scope="col" attributes to all table headers
- Properly grouped button actions with role="group" and aria-label

**Button Improvements:**
- All icon-only buttons now have descriptive ARIA labels
- Added responsive text labels (visible on sm+ screens, hidden on mobile)
- Improved button groups with proper ARIA roles

**Files Modified:**
- _Layout.cshtml: Skip link, accessible menu close button
- Categories/Index.cshtml: ARIA labels, table scopes
- Users/Index.cshtml: ARIA labels, table scopes
- Orders/Index.cshtml: Table scopes
- Products/Index.cshtml: Table scopes
- ShippingRates/Index.cshtml: ARIA labels, table scopes
- VariantCollections/Index.cshtml: ARIA labels, table scopes
- modern-admin.css: Accessibility utilities and enhanced focus styles

**WCAG 2.1 AA Criteria Addressed:**
- 2.4.1 Bypass Blocks (Level A)
- 2.4.7 Focus Visible (Level AA)
- 4.1.2 Name, Role, Value (Level A)
- 1.3.1 Info and Relationships (Level A)

🚀 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

LittleShop/wwwroot/css/modern-admin.css

@@ -54,6 +54,57 @@ body {
     line-height: 1.6;
 }
 
+/* ========================================
+   ACCESSIBILITY UTILITIES
+   ======================================== */
+
+/* Screen Reader Only - Hide visually but keep in DOM for screen readers */
+.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;
+}
+
+/* Screen Reader Only Focusable - Show on focus (for skip links) */
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+}
+
+/* Skip to Main Content Link */
+.skip-link {
+    position: absolute;
+    top: -100px;
+    left: 10px;
+    z-index: 10000;
+    padding: 0.75rem 1.5rem;
+    background: var(--primary-blue);
+    color: white;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    text-decoration: none;
+    box-shadow: var(--shadow-lg);
+    transition: top 0.3s ease;
+}
+
+.skip-link:focus {
+    top: 10px;
+    outline: 3px solid var(--warning-orange);
+    outline-offset: 2px;
+    color: white;
+}
+
 /* Modern Card Styling */
 .card {
     border: 1px solid var(--grey-200);
@@ -349,12 +400,50 @@ h1 {
     cursor: not-allowed;
 }
 
-/* Focus States for Accessibility */
+/* ========================================
+   ENHANCED FOCUS INDICATORS (WCAG 2.1 AA)
+   ======================================== */
+
+/* All interactive elements get visible focus */
+a:focus,
+button:focus,
 .btn:focus,
+input:focus,
+select:focus,
+textarea:focus,
 .form-control:focus,
-.form-select:focus {
-    outline: 2px solid var(--primary-blue);
+.form-select:focus,
+.nav-link:focus,
+.dropdown-item:focus,
+.list-group-item:focus,
+[tabindex]:focus {
+    outline: 3px solid var(--primary-blue);
     outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
+}
+
+/* Focus visible for keyboard navigation only (not mouse clicks) */
+:focus-visible {
+    outline: 3px solid var(--primary-blue);
+    outline-offset: 2px;
+}
+
+/* Remove default browser focus for mouse clicks but keep for keyboard */
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* Special focus for primary actions */
+.btn-primary:focus,
+.btn-success:focus {
+    outline-color: var(--warning-orange);
+    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
+}
+
+/* Focus for navigation items */
+.navbar-nav .nav-link:focus {
+    background: var(--grey-100);
+    outline-color: var(--primary-blue);
 }
 
 /* Toast/Alert Improvements */