From 2aadd8ed2c98ed439568f20b29657669bd7d4471 Mon Sep 17 00:00:00 2001
From: SysAdmin <sysadmin@silverlabs.uk>
Date: Thu, 13 Nov 2025 17:56:28 +0000
Subject: [PATCH] feat: Phase 1 - Critical WCAG 2.1 AA accessibility
 improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../Areas/Admin/Views/Categories/Index.cshtml | 22 ++---
 .../Areas/Admin/Views/Orders/Index.cshtml     | 14 +--
 .../Areas/Admin/Views/Products/Index.cshtml   | 18 ++--
 .../Areas/Admin/Views/Shared/_Layout.cshtml   |  9 +-
 .../Admin/Views/ShippingRates/Index.cshtml    | 24 ++---
 .../Areas/Admin/Views/Users/Index.cshtml      | 18 ++--
 .../Views/VariantCollections/Index.cshtml     | 22 ++---
 LittleShop/wwwroot/css/modern-admin.css       | 95 ++++++++++++++++++-
 8 files changed, 157 insertions(+), 65 deletions(-)

diff --git a/LittleShop/Areas/Admin/Views/Categories/Index.cshtml b/LittleShop/Areas/Admin/Views/Categories/Index.cshtml
index 65f997c..e93a371 100644
--- a/LittleShop/Areas/Admin/Views/Categories/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/Categories/Index.cshtml
@@ -23,12 +23,12 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                            <th>Products</th>
-                            <th>Created</th>
-                            <th>Status</th>
-                            <th>Actions</th>
+                            <th scope="col">Name</th>
+                            <th scope="col">Description</th>
+                            <th scope="col">Products</th>
+                            <th scope="col">Created</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -52,15 +52,15 @@
                                     }
                                 </td>
                                 <td>
-                                    <div class="btn-group btn-group-sm">
-                                        <a href="@Url.Action("Edit", new { id = category.Id })" class="btn btn-outline-primary">
-                                            <i class="fas fa-edit"></i>
+                                    <div class="btn-group btn-group-sm" role="group" aria-label="Category actions">
+                                        <a href="@Url.Action("Edit", new { id = category.Id })" class="btn btn-outline-primary" aria-label="Edit @category.Name">
+                                            <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
                                         </a>
                                         <form method="post" action="@Url.Action("Delete", new { id = category.Id })" class="d-inline"
                                               onsubmit="return confirm('Are you sure you want to delete this category?')">
                                             @Html.AntiForgeryToken()
-                                            <button type="submit" class="btn btn-outline-danger">
-                                                <i class="fas fa-trash"></i>
+                                            <button type="submit" class="btn btn-outline-danger" aria-label="Delete @category.Name">
+                                                <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
                                             </button>
                                         </form>
                                     </div>
diff --git a/LittleShop/Areas/Admin/Views/Orders/Index.cshtml b/LittleShop/Areas/Admin/Views/Orders/Index.cshtml
index 3b3a76a..0d180fa 100644
--- a/LittleShop/Areas/Admin/Views/Orders/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/Orders/Index.cshtml
@@ -108,13 +108,13 @@
                 <table class="table table-hover">
                     <thead>
                         <tr>
-                            <th>Order ID</th>
-                            <th>Customer</th>
-                            <th>Items</th>
-                            <th>Total</th>
-                            <th>Status</th>
-                            <th>Timeline</th>
-                            <th>Actions</th>
+                            <th scope="col">Order ID</th>
+                            <th scope="col">Customer</th>
+                            <th scope="col">Items</th>
+                            <th scope="col">Total</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Timeline</th>
+                            <th scope="col">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/LittleShop/Areas/Admin/Views/Products/Index.cshtml b/LittleShop/Areas/Admin/Views/Products/Index.cshtml
index ce93c92..78b75b6 100644
--- a/LittleShop/Areas/Admin/Views/Products/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/Products/Index.cshtml
@@ -34,15 +34,15 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th>Image</th>
-                            <th>Name</th>
-                            <th>Category</th>
-                            <th>Price</th>
-                            <th>Variations</th>
-                            <th>Stock</th>
-                            <th>Weight</th>
-                            <th>Status</th>
-                            <th>Actions</th>
+                            <th scope="col">Image</th>
+                            <th scope="col">Name</th>
+                            <th scope="col">Category</th>
+                            <th scope="col">Price</th>
+                            <th scope="col">Variations</th>
+                            <th scope="col">Stock</th>
+                            <th scope="col">Weight</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml b/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
index 50d1661..389fd29 100644
--- a/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
+++ b/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
@@ -40,6 +40,9 @@
     @await RenderSectionAsync("Head", required: false)
 </head>
 <body>
+    <!-- Skip to Main Content Link for Accessibility -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
     <!-- PWA Loading Screen - Managed by blazor-integration.js -->
     <div id="pwa-loading-screen" class="pwa-loading-screen">
         <div class="pwa-loading-content">
@@ -146,7 +149,7 @@
         </nav>
     </header>
     <div class="container-fluid">
-        <main role="main" class="pb-3">
+        <main role="main" class="pb-3" id="main-content" tabindex="-1">
             @RenderBody()
         </main>
     </div>
@@ -207,8 +210,8 @@
     <div class="settings-drawer" id="settingsDrawer">
         <div class="settings-drawer-header">
             <h5>Menu</h5>
-            <button class="settings-drawer-close" onclick="toggleSettingsDrawer()">
-                <i class="fas fa-times"></i>
+            <button class="settings-drawer-close" onclick="toggleSettingsDrawer()" aria-label="Close menu">
+                <i class="fas fa-times" aria-hidden="true"></i>
             </button>
         </div>
         <ul class="settings-menu-list">
diff --git a/LittleShop/Areas/Admin/Views/ShippingRates/Index.cshtml b/LittleShop/Areas/Admin/Views/ShippingRates/Index.cshtml
index c5a9882..a78cdf4 100644
--- a/LittleShop/Areas/Admin/Views/ShippingRates/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/ShippingRates/Index.cshtml
@@ -23,13 +23,13 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th>Name</th>
-                            <th>Country</th>
-                            <th>Weight Range (g)</th>
-                            <th>Price</th>
-                            <th>Delivery Days</th>
-                            <th>Status</th>
-                            <th>Actions</th>
+                            <th scope="col">Name</th>
+                            <th scope="col">Country</th>
+                            <th scope="col">Weight Range (g)</th>
+                            <th scope="col">Price</th>
+                            <th scope="col">Delivery Days</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -58,15 +58,15 @@
                                     }
                                 </td>
                                 <td>
-                                    <div class="btn-group btn-group-sm">
-                                        <a href="@Url.Action("Edit", new { id = rate.Id })" class="btn btn-outline-primary">
-                                            <i class="fas fa-edit"></i>
+                                    <div class="btn-group btn-group-sm" role="group" aria-label="Shipping rate actions">
+                                        <a href="@Url.Action("Edit", new { id = rate.Id })" class="btn btn-outline-primary" aria-label="Edit @rate.Name">
+                                            <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
                                         </a>
                                         <form method="post" action="@Url.Action("Delete", new { id = rate.Id })" class="d-inline"
                                               onsubmit="return confirm('Are you sure you want to delete this shipping rate?')">
                                             @Html.AntiForgeryToken()
-                                            <button type="submit" class="btn btn-outline-danger">
-                                                <i class="fas fa-trash"></i>
+                                            <button type="submit" class="btn btn-outline-danger" aria-label="Delete @rate.Name">
+                                                <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
                                             </button>
                                         </form>
                                     </div>
diff --git a/LittleShop/Areas/Admin/Views/Users/Index.cshtml b/LittleShop/Areas/Admin/Views/Users/Index.cshtml
index 548ad33..3cd975e 100644
--- a/LittleShop/Areas/Admin/Views/Users/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/Users/Index.cshtml
@@ -39,10 +39,10 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th>Username</th>
-                            <th>Created</th>
-                            <th>Status</th>
-                            <th>Actions</th>
+                            <th scope="col">Username</th>
+                            <th scope="col">Created</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -62,17 +62,17 @@
                                     }
                                 </td>
                                 <td>
-                                    <div class="btn-group btn-group-sm">
-                                        <a href="@Url.Action("Edit", new { id = user.Id })" class="btn btn-outline-primary">
-                                            <i class="fas fa-edit"></i>
+                                    <div class="btn-group btn-group-sm" role="group" aria-label="User actions">
+                                        <a href="@Url.Action("Edit", new { id = user.Id })" class="btn btn-outline-primary" aria-label="Edit @user.Username">
+                                            <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
                                         </a>
                                         @if (user.Username != "admin")
                                         {
                                             <form method="post" action="@Url.Action("Delete", new { id = user.Id })" class="d-inline"
                                                   onsubmit="return confirm('Are you sure you want to delete this user?')">
                                                 @Html.AntiForgeryToken()
-                                                <button type="submit" class="btn btn-outline-danger">
-                                                    <i class="fas fa-trash"></i>
+                                                <button type="submit" class="btn btn-outline-danger" aria-label="Delete @user.Username">
+                                                    <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
                                                 </button>
                                             </form>
                                         }
diff --git a/LittleShop/Areas/Admin/Views/VariantCollections/Index.cshtml b/LittleShop/Areas/Admin/Views/VariantCollections/Index.cshtml
index daaebea..e159f6a 100644
--- a/LittleShop/Areas/Admin/Views/VariantCollections/Index.cshtml
+++ b/LittleShop/Areas/Admin/Views/VariantCollections/Index.cshtml
@@ -24,12 +24,12 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th>Name</th>
-                            <th>Properties</th>
-                            <th>Created</th>
-                            <th>Updated</th>
-                            <th>Status</th>
-                            <th>Actions</th>
+                            <th scope="col">Name</th>
+                            <th scope="col">Properties</th>
+                            <th scope="col">Created</th>
+                            <th scope="col">Updated</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -60,15 +60,15 @@
                                     }
                                 </td>
                                 <td>
-                                    <div class="btn-group btn-group-sm">
-                                        <a href="@Url.Action("Edit", new { id = collection.Id })" class="btn btn-outline-primary">
-                                            <i class="fas fa-edit"></i>
+                                    <div class="btn-group btn-group-sm" role="group" aria-label="Collection actions">
+                                        <a href="@Url.Action("Edit", new { id = collection.Id })" class="btn btn-outline-primary" aria-label="Edit @collection.Name">
+                                            <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
                                         </a>
                                         <form method="post" action="@Url.Action("Delete", new { id = collection.Id })" class="d-inline"
                                               onsubmit="return confirm('Are you sure you want to deactivate this collection?')">
                                             @Html.AntiForgeryToken()
-                                            <button type="submit" class="btn btn-outline-danger">
-                                                <i class="fas fa-trash"></i>
+                                            <button type="submit" class="btn btn-outline-danger" aria-label="Delete @collection.Name">
+                                                <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
                                             </button>
                                         </form>
                                     </div>
diff --git a/LittleShop/wwwroot/css/modern-admin.css b/LittleShop/wwwroot/css/modern-admin.css
index b1f32cd..f4efb90 100644
--- a/LittleShop/wwwroot/css/modern-admin.css
+++ b/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 */