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 09f937ca07
commit 36c281d7e7
5 changed files with 59 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/helpers/renderer.js
View File

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