Repository navigation
fix: improve accessibility, hash logo URLs, refresh terminal animation - #764
Merged
Merged
Conversation
## Short Summary (TL;DR) Fixes the accessibility problems axe-core found across the site, links logos through hashed URLs so a replaced logo shows without a hard refresh, and updates the home page terminal to current `ddev start` output. ## How This PR Solves The Issue - Accessibility: [axe-core](https://github.com/dequelabs/axe-core), an open-source engine that checks a rendered page against WCAG rules such as contrast, names for controls, landmarks, and heading order, reported 204 violations on 12 page types in both themes, and now reports none. The fixes add a skip link, a landmark for the sponsor banner, a correct heading order, names for the copy buttons, keyboard-scrollable code blocks, and darker or underlined links where the contrast was too low. - Menu: closes on Escape or a click elsewhere, and opens below its button so the button stays visible. - Terminal: a pause button, as WCAG 2.2.2 (Pause, Stop, Hide) asks of a looping animation, and with reduced motion it starts paused on the `ddev describe` screen. Screen readers get one sentence instead of the box drawing. The output was recorded from the upcoming v1.25.5 with [VHS](https://github.com/charmbracelet/vhs), which records a terminal session from a script, and the `ready in` waits play in real time. - Logos: Cloudflare tells browsers to keep `/logos/` for 4 hours, so after #763 people saw the old logos until a hard refresh. Pages now link the hashed `/_astro/` copies, and `public/logos` stays for the README badges. - Agent guidance: a new `a11y-check` skill tells Claude how to run axe-core and Lighthouse on the host from `~/tmp`, so neither becomes a dependency of the site. ## Manual Testing Instructions Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/: - Home page: the first Tab shows "Skip to content". The terminal pauses and resumes from the button beside the dots, and with reduced motion turned on in the OS it starts paused. - Home page at phone width: the menu opens below its button and closes on Escape or a click outside. - A blog post with a code block: Tab reaches the code block, and arrow keys scroll a long line. - `/download`, `/sponsor`, `/usage-stats` and `/get-started`: links, tabs and buttons are readable in both themes. - Logo image URLs on the home page start with `/_astro/`. ## Automated Testing Overview Run locally, not in CI: axe-core 4.14 on 12 page types in light and dark themes at 1400 and 390 px wide, with no violations, and Lighthouse 12 with accessibility at 100 on the home page. [Lighthouse](https://developer.chrome.com/docs/lighthouse) is Google's page audit, the engine behind PageSpeed Insights, which scores performance, accessibility, best practices, and SEO; its API quota was used up, so it ran locally. 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Deploying ddev-com-front-end with
|
| Latest commit: |
429a67c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ceded1c1.ddev-com-front-end.pages.dev |
| Branch Preview URL: | https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev |
## Short Summary (TL;DR) Fixes the contrast problems axe-core still found on `/brand/` and in light-theme code comments, which the first round missed because it checked neither. ## How This PR Solves The Issue - Code comments: the `github-light-high-contrast` comment color reads at 3.9:1 on the site's code background, so a CSS rule darkens it to 4.8:1. Dark mode keeps its own color. This affected 29 posts. - `/brand/`: the "Download SVG" links use `text-blue-700`, as `/download` already does, and the logo previews link the hashed `/_astro/` copies. The download links keep `/logos/` so the file name and URL stay stable. - The `a11y-check` skill now lists `/brand/` and asks for a post with comments in its code blocks. ## Manual Testing Instructions Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/ in the light theme: - `/blog/shopware-on-ddev/`: comments in the nginx code block are darker. - `/brand/`: "Download SVG" is darker blue, image URLs start with `/_astro/`, and the downloaded file is still named `ddev.svg`. ## Automated Testing Overview axe-core on 13 page types, including `/brand/` and `/blog/shopware-on-ddev/`, in both themes at 1400 and 390 px wide, reports no violations. 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
## Short Summary (TL;DR) The timings in the home page terminal's `ddev start` screen read at 4.38:1 on its background, which PageSpeed reported, so they now use `text-violet-300`. ## How This PR Solves The Issue - The timings, such as `0.5s`, use `text-violet-300` instead of `text-violet-400`. - The `a11y-check` script missed them because reduced motion keeps the terminal on `ddev describe`. It now plays the `ddev start` screen, pauses it at the end, and checks the terminal again when it is visible. ## Manual Testing Instructions Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/ at desktop width: the timings at the end of the `✓` lines in the `ddev start` screen are lighter violet. ## Automated Testing Overview The updated axe script reports the 8 timing nodes on the previous preview and none on a local build with the fix. 🤖 Developed with assistance from [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Member
Author
|
Should be good to go in, but I only tested it on Linux Chrome and Firefox. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Short Summary (TL;DR)
Fixes the accessibility problems axe-core found across the site, links logos through hashed URLs so a replaced logo shows without a hard refresh, and updates the home page terminal to current
ddev startoutput.How This PR Solves The Issue
ddev describescreen. Screen readers get one sentence instead of the box drawing. The output was recorded from the upcoming v1.25.5 with VHS, which records a terminal session from a script, and theready inwaits play in real time./logos/for 4 hours, so after feat(home): add linkable section headings and refresh landing page #763 people saw the old logos until a hard refresh. Pages now link the hashed/_astro/copies, andpublic/logosstays for the README badges.a11y-checkskill tells Claude how to run axe-core and Lighthouse on the host from~/tmp, so neither becomes a dependency of the site.Manual Testing Instructions
Compare https://20261023-stasadev-accessibil.ddev-com-front-end.pages.dev/ with https://ddev.com/:
/blog/shopware-on-ddev/in the light theme: comments in the nginx code block are readable./brand/,/download,/sponsor,/usage-statsand/get-started: links, tabs and buttons are readable in both themes./_astro/.Automated Testing Overview
Run locally, not in CI: axe-core 4.14 on 13 page types in light and dark themes at 1400 and 390 px wide, including both screens of the home page terminal, with no violations, and Lighthouse 12 with accessibility at 100 on the home page. Lighthouse is Google's page audit, the engine behind PageSpeed Insights, which scores performance, accessibility, best practices, and SEO; its API quota was used up, so it ran locally.
🤖 Developed with assistance from Claude Code