public/code-crispies
2
1
Fork 0
Code Issues 7 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 09f937ca07
commit 36c281d7e7
5 changed files with 59 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/index.html
View File

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