mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 08:52:10 +01:00
feat: comprehensive accessibility improvements
- Add skip navigation link for keyboard users - Implement proper ARIA labels and roles throughout interface - Add semantic HTML structure with headings and landmarks - Enhance form accessibility with help text and fieldsets - Improve screen reader support with live regions - Add proper focus management for sidebar toggle - Include descriptive labels for all interactive elements - Ensure WCAG compliance for navigation and forms
This commit is contained in:
@ -209,6 +209,7 @@ export default function Sidebar({
|
||||
)}
|
||||
|
||||
<div
|
||||
id="main-sidebar"
|
||||
className={`fixed md:relative h-screen bg-card border-r border-border shadow-lg transition-all duration-300
|
||||
${
|
||||
isExpanded ? (isMobile ? "w-full sm:w-80" : "w-56") : "w-16"
|
||||
@ -224,7 +225,9 @@ export default function Sidebar({
|
||||
onToggle();
|
||||
}}
|
||||
className="p-1.5 rounded-md hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary transition-colors group"
|
||||
title="Expand sidebar"
|
||||
aria-label="Expand sidebar"
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls="main-sidebar"
|
||||
>
|
||||
<MinimalToggleIcon isExpanded={isExpanded} />
|
||||
</button>
|
||||
@ -263,13 +266,17 @@ export default function Sidebar({
|
||||
onToggle();
|
||||
}}
|
||||
className="p-1.5 rounded-md hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary transition-colors group"
|
||||
title="Collapse sidebar"
|
||||
aria-label="Collapse sidebar"
|
||||
aria-expanded={isExpanded}
|
||||
aria-controls="main-sidebar"
|
||||
>
|
||||
<MinimalToggleIcon isExpanded={isExpanded} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="Main navigation"
|
||||
className={`flex-1 py-4 px-2 overflow-y-auto overflow-x-visible ${isExpanded ? "pt-12" : "pt-4"}`}
|
||||
>
|
||||
<NavItem
|
||||
|
||||
Reference in New Issue
Block a user