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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
}