SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Phase 1 - Critical WCAG 2.1 AA accessibility improvements

Browse Source 
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>
This commit is contained in:
SysAdmin 2025-11-13 17:56:28 +00:00
parent a07a3a54ea
commit 2aadd8ed2c
8 changed files with 157 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
LittleShop/Areas/Admin/Views/Categories/Index.cshtml
View File

@ -23,12 +23,12 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th scope="col">Name</th>
<th>Description</th> <th scope="col">Description</th>
<th>Products</th> <th scope="col">Products</th>
<th>Created</th> <th scope="col">Created</th>
<th>Status</th> <th scope="col">Status</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -52,15 +52,15 @@
} }
</td> </td>
<td> <td>
<div class="btn-group btn-group-sm"> <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"> <a href="@Url.Action("Edit", new { id = category.Id })" class="btn btn-outline-primary" aria-label="Edit @category.Name">
<i class="fas fa-edit"></i> <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
</a> </a>
<form method="post" action="@Url.Action("Delete", new { id = category.Id })" class="d-inline" <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?')"> onsubmit="return confirm('Are you sure you want to delete this category?')">
@Html.AntiForgeryToken() @Html.AntiForgeryToken()
<button type="submit" class="btn btn-outline-danger"> <button type="submit" class="btn btn-outline-danger" aria-label="Delete @category.Name">
<i class="fas fa-trash"></i> <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
</button> </button>
</form> </form>
</div> </div>

14
LittleShop/Areas/Admin/Views/Orders/Index.cshtml
View File

@ -108,13 +108,13 @@
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr> <tr>
<th>Order ID</th> <th scope="col">Order ID</th>
<th>Customer</th> <th scope="col">Customer</th>
<th>Items</th> <th scope="col">Items</th>
<th>Total</th> <th scope="col">Total</th>
<th>Status</th> <th scope="col">Status</th>
<th>Timeline</th> <th scope="col">Timeline</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

18
LittleShop/Areas/Admin/Views/Products/Index.cshtml
View File

@ -34,15 +34,15 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Image</th> <th scope="col">Image</th>
<th>Name</th> <th scope="col">Name</th>
<th>Category</th> <th scope="col">Category</th>
<th>Price</th> <th scope="col">Price</th>
<th>Variations</th> <th scope="col">Variations</th>
<th>Stock</th> <th scope="col">Stock</th>
<th>Weight</th> <th scope="col">Weight</th>
<th>Status</th> <th scope="col">Status</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

9
LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
View File

@ -40,6 +40,9 @@
@await RenderSectionAsync("Head", required: false) @await RenderSectionAsync("Head", required: false)
</head> </head>
<body> <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 --> <!-- PWA Loading Screen - Managed by blazor-integration.js -->
<div id="pwa-loading-screen" class="pwa-loading-screen"> <div id="pwa-loading-screen" class="pwa-loading-screen">
<div class="pwa-loading-content"> <div class="pwa-loading-content">
@ -146,7 +149,7 @@
</nav> </nav>
</header> </header>
<div class="container-fluid"> <div class="container-fluid">
<main role="main" class="pb-3"> <main role="main" class="pb-3" id="main-content" tabindex="-1">
@RenderBody() @RenderBody()
</main> </main>
</div> </div>
@ -207,8 +210,8 @@
<div class="settings-drawer" id="settingsDrawer"> <div class="settings-drawer" id="settingsDrawer">
<div class="settings-drawer-header"> <div class="settings-drawer-header">
<h5>Menu</h5> <h5>Menu</h5>
<button class="settings-drawer-close" onclick="toggleSettingsDrawer()"> <button class="settings-drawer-close" onclick="toggleSettingsDrawer()" aria-label="Close menu">
<i class="fas fa-times"></i> <i class="fas fa-times" aria-hidden="true"></i>
</button> </button>
</div> </div>
<ul class="settings-menu-list"> <ul class="settings-menu-list">

24
LittleShop/Areas/Admin/Views/ShippingRates/Index.cshtml
View File

@ -23,13 +23,13 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th scope="col">Name</th>
<th>Country</th> <th scope="col">Country</th>
<th>Weight Range (g)</th> <th scope="col">Weight Range (g)</th>
<th>Price</th> <th scope="col">Price</th>
<th>Delivery Days</th> <th scope="col">Delivery Days</th>
<th>Status</th> <th scope="col">Status</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -58,15 +58,15 @@
} }
</td> </td>
<td> <td>
<div class="btn-group btn-group-sm"> <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"> <a href="@Url.Action("Edit", new { id = rate.Id })" class="btn btn-outline-primary" aria-label="Edit @rate.Name">
<i class="fas fa-edit"></i> <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
</a> </a>
<form method="post" action="@Url.Action("Delete", new { id = rate.Id })" class="d-inline" <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?')"> onsubmit="return confirm('Are you sure you want to delete this shipping rate?')">
@Html.AntiForgeryToken() @Html.AntiForgeryToken()
<button type="submit" class="btn btn-outline-danger"> <button type="submit" class="btn btn-outline-danger" aria-label="Delete @rate.Name">
<i class="fas fa-trash"></i> <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
</button> </button>
</form> </form>
</div> </div>

18
LittleShop/Areas/Admin/Views/Users/Index.cshtml
View File

@ -39,10 +39,10 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Username</th> <th scope="col">Username</th>
<th>Created</th> <th scope="col">Created</th>
<th>Status</th> <th scope="col">Status</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -62,17 +62,17 @@
} }
</td> </td>
<td> <td>
<div class="btn-group btn-group-sm"> <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"> <a href="@Url.Action("Edit", new { id = user.Id })" class="btn btn-outline-primary" aria-label="Edit @user.Username">
<i class="fas fa-edit"></i> <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
</a> </a>
@if (user.Username != "admin") @if (user.Username != "admin")
{ {
<form method="post" action="@Url.Action("Delete", new { id = user.Id })" class="d-inline" <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?')"> onsubmit="return confirm('Are you sure you want to delete this user?')">
@Html.AntiForgeryToken() @Html.AntiForgeryToken()
<button type="submit" class="btn btn-outline-danger"> <button type="submit" class="btn btn-outline-danger" aria-label="Delete @user.Username">
<i class="fas fa-trash"></i> <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
</button> </button>
</form> </form>
} }

22
LittleShop/Areas/Admin/Views/VariantCollections/Index.cshtml
View File

@ -24,12 +24,12 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th scope="col">Name</th>
<th>Properties</th> <th scope="col">Properties</th>
<th>Created</th> <th scope="col">Created</th>
<th>Updated</th> <th scope="col">Updated</th>
<th>Status</th> <th scope="col">Status</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -60,15 +60,15 @@
} }
</td> </td>
<td> <td>
<div class="btn-group btn-group-sm"> <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"> <a href="@Url.Action("Edit", new { id = collection.Id })" class="btn btn-outline-primary" aria-label="Edit @collection.Name">
<i class="fas fa-edit"></i> <i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
</a> </a>
<form method="post" action="@Url.Action("Delete", new { id = collection.Id })" class="d-inline" <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?')"> onsubmit="return confirm('Are you sure you want to deactivate this collection?')">
@Html.AntiForgeryToken() @Html.AntiForgeryToken()
<button type="submit" class="btn btn-outline-danger"> <button type="submit" class="btn btn-outline-danger" aria-label="Delete @collection.Name">
<i class="fas fa-trash"></i> <i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
</button> </button>
</form> </form>
</div> </div>

95
LittleShop/wwwroot/css/modern-admin.css
View File

@ -54,6 +54,57 @@ body {
line-height: 1.6; 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 */ /* Modern Card Styling */
.card { .card {
border: 1px solid var(--grey-200); border: 1px solid var(--grey-200);
@ -349,12 +400,50 @@ h1 {
cursor: not-allowed; 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, .btn:focus,
input:focus,
select:focus,
textarea:focus,
.form-control:focus, .form-control:focus,
.form-select:focus { .form-select:focus,
outline: 2px solid var(--primary-blue); .nav-link:focus,
.dropdown-item:focus,
.list-group-item:focus,
[tabindex]:focus {
outline: 3px solid var(--primary-blue);
outline-offset: 2px; 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 */ /* Toast/Alert Improvements */