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

src/app.de.js

@@ -67,14 +67,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 =================

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 =================

src/helpers/renderer.js

@@ -33,11 +33,15 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 		// Create module container
 		const moduleContainer = document.createElement("div");
 		moduleContainer.classList.add("module-container");
+		moduleContainer.setAttribute("role", "treeitem");
 
 		// Create module header item (clickable to expand/collapse)
-		const moduleHeader = document.createElement("div");
+		const moduleHeader = document.createElement("button");
+		moduleHeader.type = "button";
 		moduleHeader.classList.add("module-list-item", "module-header");
 		moduleHeader.dataset.moduleId = module.id;
+		moduleHeader.setAttribute("aria-expanded", "false");
+		moduleHeader.setAttribute("aria-controls", `lessons-${module.id}`);
 
 		// Create module title with expand/collapse indicator
 		const moduleTitle = document.createElement("span");
@@ -47,6 +51,7 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 		// Create expand/collapse icon
 		const expandIcon = document.createElement("span");
 		expandIcon.classList.add("expand-icon");
+		expandIcon.setAttribute("aria-hidden", "true");
 		expandIcon.innerHTML = "▶"; // Right-pointing triangle
 
 		moduleHeader.appendChild(expandIcon);
@@ -60,11 +65,15 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 		// Lessons container (initially hidden)
 		const lessonsContainer = document.createElement("div");
 		lessonsContainer.classList.add("lessons-container");
+		lessonsContainer.id = `lessons-${module.id}`;
+		lessonsContainer.setAttribute("role", "group");
+		lessonsContainer.setAttribute("aria-label", `${module.title} lessons`);
 		lessonsContainer.style.display = "none"; // Initially collapsed
 
 		// Create list items for each lesson in this module
 		module.lessons.forEach((lesson, index) => {
-			const lessonItem = document.createElement("div");
+			const lessonItem = document.createElement("button");
+			lessonItem.type = "button";
 			lessonItem.classList.add("lesson-list-item");
 			lessonItem.dataset.moduleId = module.id;
 			lessonItem.dataset.lessonIndex = index;
@@ -101,8 +110,9 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 			const isExpanded = lessonsContainer.style.display !== "none";
 			lessonsContainer.style.display = isExpanded ? "none" : "block";
 
-			// Update expand/collapse icon
+			// Update expand/collapse icon and ARIA state
 			expandIcon.innerHTML = isExpanded ? "▶" : "▼";
+			moduleHeader.setAttribute("aria-expanded", String(!isExpanded));
 		});
 
 		// Add module header and lessons container to module container
@@ -226,9 +236,10 @@ export function updateActiveLessonInSidebar(moduleId, lessonIndex) {
 		if (parentLessonsContainer && parentLessonsContainer.classList.contains("lessons-container")) {
 			parentLessonsContainer.style.display = "block";
 
-			// Update expand icon
+			// Update expand icon and ARIA state
 			const moduleHeader = parentLessonsContainer.previousElementSibling;
 			if (moduleHeader) {
+				moduleHeader.setAttribute("aria-expanded", "true");
 				const expandIcon = moduleHeader.querySelector(".expand-icon");
 				if (expandIcon) {
 					expandIcon.innerHTML = "▼"; // Down arrow when expanded

src/index.de.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="main.css" />
 	</head>
 	<body>
+		<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
 		<div class="app-container">
 			<!-- Minimaler Header -->
 			<header class="header">
@@ -27,7 +28,7 @@
 			</header>
 
 			<!-- Hauptlayout -->
-			<main class="game-layout">
+			<main class="game-layout" id="main-content">
 				<!-- Linke Spalte: Anleitung + Editor -->
 				<div class="left-panel">
 					<section class="instructions">
@@ -97,7 +98,7 @@
 			<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
 
 			<!-- Ausklappbare Seitenleiste -->
-			<aside class="sidebar-drawer" id="sidebar-drawer">
+			<aside class="sidebar-drawer" id="sidebar-drawer" aria-label="Navigationsmenü">
 				<div class="sidebar-header">
 					<h3>Menü</h3>
 					<button id="close-sidebar" class="close-btn" aria-label="Menü schließen">&times;</button>
@@ -113,12 +114,12 @@
 					</div>
 				</div>
 
-				<div class="sidebar-section">
+				<nav class="sidebar-section" aria-label="Lektionsnavigation">
-					<h4>Lektionen</h4>
+					<h4 id="lessons-heading">Lektionen</h4>
-					<div class="module-list" id="module-list">
+					<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading">
 						<!-- Modulliste wird hier eingefügt -->
 					</div>
-				</div>
+				</nav>
 
 				<div class="sidebar-section">
 					<h4>Einstellungen</h4>

src/index.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="main.css" />
 	</head>
 	<body>
+		<a href="#main-content" class="skip-link">Skip to main content</a>
 		<div class="app-container">
 			<!-- Minimal Header -->
 			<header class="header">
@@ -27,7 +28,7 @@
 			</header>
 
 			<!-- Main Game Layout -->
-			<main class="game-layout">
+			<main class="game-layout" id="main-content">
 				<!-- Left Panel: Instructions + Editor -->
 				<div class="left-panel">
 					<section class="instructions">
@@ -97,7 +98,7 @@
 			<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
 
 			<!-- Slide-out Sidebar -->
-			<aside class="sidebar-drawer" id="sidebar-drawer">
+			<aside class="sidebar-drawer" id="sidebar-drawer" aria-label="Navigation menu">
 				<div class="sidebar-header">
 					<h3>Menu</h3>
 					<button id="close-sidebar" class="close-btn" aria-label="Close menu">&times;</button>
@@ -113,12 +114,12 @@
 					</div>
 				</div>
 
-				<div class="sidebar-section">
+				<nav class="sidebar-section" aria-label="Lesson navigation">
-					<h4>Lessons</h4>
+					<h4 id="lessons-heading">Lessons</h4>
-					<div class="module-list" id="module-list">
+					<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading">
 						<!-- Module list will be populated here -->
 					</div>
-				</div>
+				</nav>
 
 				<div class="sidebar-section">
 					<h4>Settings</h4>