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>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user