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

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

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