Skip to content

Fix landmark accessibility violation for progress and clock elements #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mgifford merged 3 commits into from
Feb 13, 2026
Merged

Fix landmark accessibility violation for progress and clock elements #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94dae5f
Initial plan
Copilot Feb 13, 2026
e5690be
Fix: Wrap progress and clock elements in landmark regions for accessi…
Copilot Feb 13, 2026
d801b5d
Merge branch 'main' into copilot/fix-accessibility-landmarks
mgifford Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ Only one notes block per slide:
### Required Elements
Keep these in the `<body>` for proper presentation functionality:
```html
<div class="progress"></div>
<div class="clock"></div>
<aside class="progress" aria-label="Presentation progress"></aside>
<aside class="clock" aria-label="Presentation timer"></aside>
<section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>
```

Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
</head>

<body class="shower fade-in duration=30 warn=5 hidemouse">
<div class="progress"></div>
<div class="clock"></div>
<aside class="progress" aria-label="Presentation progress"></aside>
<aside class="clock" aria-label="Presentation timer"></aside>
<section aria-live="assertive" aria-label="Slide mode status">Leaving slide mode.</section>

<main>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
"test:html": "html-validate -c .htmlvalidate.json '*.html'",
"test:a11y": "pa11y-ci --config .pa11yci.json || true",
"test:headings": "node scripts/test-heading-order.js",
"test:main-landmark": "bash scripts/check-main-landmark.sh",
"test:landmarks": "bash scripts/test-landmarks.sh",
"test:links": "bash scripts/check-links.sh",
"test:spell": "cspell '**/*.{md,html,js,css}' || true",
"test:css": "bash scripts/validate-css.sh",
"test:all": "npm run test:html && npm run test:css && npm run test:main-landmark && npm run test:links && npm run test:spell",
"test:all": "npm run test:html && npm run test:landmarks && npm run test:css && npm run test:links && npm run test:spell",
"test": "npm run test:all"
},
"repository": {
Expand Down
35 changes: 35 additions & 0 deletions scripts/test-landmarks.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
#!/usr/bin/env bash
# Test that progress and clock elements are contained in landmark regions
# This prevents regression of the accessibility issue where these elements
# were not contained by landmarks.

set -e

echo "🔍 Testing landmark accessibility..."

# Check if progress and clock elements use <aside> tag or have role="complementary"
if ! grep -q '<aside class="progress"' index.html; then
echo "❌ FAIL: .progress element is not using <aside> tag"
exit 1
fi

if ! grep -q '<aside class="clock"' index.html; then
echo "❌ FAIL: .clock element is not using <aside> tag"
exit 1
fi

# Check if progress has aria-label
if ! grep -q 'class="progress".*aria-label' index.html; then
echo "❌ FAIL: .progress element is missing aria-label attribute"
exit 1
fi

# Check if clock has aria-label
if ! grep -q 'class="clock".*aria-label' index.html; then
echo "❌ FAIL: .clock element is missing aria-label attribute"
exit 1
fi

echo "✓ All landmark tests passed"
echo " - .progress is an <aside> element with aria-label"
echo " - .clock is an <aside> element with aria-label"