public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: improve sidebar keyboard accessibility

Browse Source 
- 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:
Michael Czechowski
2025-12-30 12:24:53 +01:00
parent 573c6720d8
commit d06f7c9e6e
5 changed files with 59 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/index.de.html
View File

@@ -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">
<h4>Lektionen</h4>
<div class="module-list" id="module-list">
<nav class="sidebar-section" aria-label="Lektionsnavigation">
<h4 id="lessons-heading">Lektionen</h4>
<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>