feat: improve sidebar keyboard accessibility
- Add skip-to-content link for keyboard users - Convert module headers and lesson items from divs to buttons - Add ARIA attributes (aria-expanded, aria-controls, aria-label) - Add focus return to trigger element when closing sidebar - Shift main content when sidebar is open using CSS :has() - Add code element styling in instruction boxes
This commit is contained in:
15
src/app.js
15
src/app.js
@@ -68,14 +68,29 @@ let currentMode = "css";
|
||||
|
||||
// ================= SIDEBAR FUNCTIONS =================
|
||||
|
||||
// Track element that opened sidebar for focus return
|
||||
let sidebarTrigger = null;
|
||||
|
||||
function openSidebar() {
|
||||
// Store trigger element for focus return
|
||||
sidebarTrigger = document.activeElement;
|
||||
|
||||
elements.sidebarDrawer.classList.add("open");
|
||||
elements.sidebarBackdrop.classList.add("visible");
|
||||
|
||||
// Move focus to close button for keyboard users
|
||||
elements.closeSidebar.focus();
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
elements.sidebarDrawer.classList.remove("open");
|
||||
elements.sidebarBackdrop.classList.remove("visible");
|
||||
|
||||
// Return focus to trigger element
|
||||
if (sidebarTrigger && typeof sidebarTrigger.focus === "function") {
|
||||
sidebarTrigger.focus();
|
||||
sidebarTrigger = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ================= EXPECTED RESULT TOGGLE =================
|
||||
|
||||
Reference in New Issue
Block a user