From 5039739211c84b03bf9e9991e3dd099b9e688da9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 8 Sep 2026 07:37:23 +0000 Subject: [PATCH 1/3] feat: sync adventure accessibility-nightmare from challenges repo (create) --- e2e/routes.ts | 15 ++ .../accessibility-nightmare/adventure.yaml | 197 ++++++++++++++++++ .../beginner-posts.json | 5 + 3 files changed, 217 insertions(+) create mode 100644 src/data/adventures/accessibility-nightmare/adventure.yaml create mode 100644 src/data/adventures/accessibility-nightmare/beginner-posts.json diff --git a/e2e/routes.ts b/e2e/routes.ts index afb0129b1..f1ced8d7b 100644 --- a/e2e/routes.ts +++ b/e2e/routes.ts @@ -43,6 +43,10 @@ export const SMOKE_ROUTES: Record = { "/privacy/": "Privacy Policy - OffOn", "/accessibility/": "Accessibility Statement - OffOn", "/404/": "Page Not Found - OffOn", + // GENERATED:accessibility-nightmare-smoke + "/adventures/accessibility-nightmare/": "The Accessibility Nightmare - OffOn Adventures", + "/adventures/accessibility-nightmare/levels/beginner/": "The Initial Audit - The Accessibility Nightmare - OffOn", + // /GENERATED:accessibility-nightmare-smoke }; export const A11Y_PAGES: string[] = [ @@ -86,6 +90,10 @@ export const A11Y_PAGES: string[] = [ "/adventures/the-ai-observatory/levels/expert/", "/adventures/the-ai-observatory/levels/intermediate/", "/404/", + // GENERATED:accessibility-nightmare-a11y + "/adventures/accessibility-nightmare/", + "/adventures/accessibility-nightmare/levels/beginner/", + // /GENERATED:accessibility-nightmare-a11y ]; /** @@ -121,4 +129,11 @@ export const ROUTES_WITHOUT_FULL_COVERAGE: string[] = [ "/challenges/spring-boot/", "/challenges/tdd/", "/challenges/trivy/", + // GENERATED:accessibility-nightmare-challenges + "/challenges/axe-core/", + "/challenges/playwright/", + "/challenges/lighthouse/", + "/challenges/wcag-2-2/", + "/challenges/react/", + // /GENERATED:accessibility-nightmare-challenges ]; diff --git a/src/data/adventures/accessibility-nightmare/adventure.yaml b/src/data/adventures/accessibility-nightmare/adventure.yaml new file mode 100644 index 000000000..3295f0ff0 --- /dev/null +++ b/src/data/adventures/accessibility-nightmare/adventure.yaml @@ -0,0 +1,197 @@ +slug: accessibility-nightmare +meta_description: Audit the ShopSmart homepage and fix critical WCAG 2.2 accessibility violations before the initial compliance review. +name: The Accessibility Nightmare +icon: Accessibility +emoji: ♿ +month: SEP 2026 +tags: + - Accessibility + - WCAG 2.2 + - React + - Playwright + - axe-core + - Lighthouse + - Guidepup Virtual Screen Reader +backstory: + - "ShopSmart is an online retailer moving into the European market. The redesign brief was explicit: anyone should be + able to shop there, on any device, with any input method or assistive technology. Months on, support has traced a + run of abandoned orders back to the storefront itself." + - Product photos carry no text alternative. Neither described nor marked decorative, they leave a screen reader + stopping on each one with nothing to say. The banner image at the top, which no nearby text describes, is silent + too. + - Submitting the checkout form produces a validation error no screen reader will announce. The message sits on screen + in red beside its field, but nothing in the markup ties the two together, and nothing tells assistive technology + that new text has appeared. The customer knows the order failed and cannot find out why. + - Others never reach checkout. Someone with a tremor or limited hand movement works from the keyboard instead of a + mouse. The main menu cannot be reached that way, and the focus outline is styled off across the site, so anyone on a + keyboard has no idea where they are on the page. + - There is no accessible fallback and no second route to a purchase. Complaints reached the company, then a legal + notice citing the ADA and the European Accessibility Act. The EU launch is on hold until the storefront can be shown + to work. + - You are the lead frontend engineer. Audit the storefront, fix what blocks these customers, and add checks that stop + the same faults shipping again. +overview: + - "Assistive technology works from the semantics a page exposes: what each element is, what it is called, what state + it is in, what it belongs to. A screen reader, a switch device and a braille display all read that same layer. + Replace a button with a styled div and the information is gone for all of them, and nothing downstream can + reconstruct it." + - Around 16% of people live with a significant disability. Since June 2025 the European Accessibility Act has put EU + e-commerce in legal scope, and the standard it points to, EN 301 549, sets WCAG 2.2 AA as the bar in practice. + - "The premise here is that accessibility is how a page behaves under real use, not what its markup contains. Scanners + inspect the rendered DOM and settle only what is statically decidable: a missing alt attribute, a contrast ratio, an + ARIA role that contradicts its required children. Whether alt text is meaningful, whether focus order follows the + layout, whether an error is announced, whether a widget behaves like the role it claims, none of that is decidable + from a snapshot. A page can pass every rule in the ruleset and remain unusable." + - "Three levels cover both sides of that line. The homepage audit takes what scanning does well, contrast ratios and + missing text alternatives, then the first thing it cannot see, whether the page works from a keyboard at all. + Checkout takes the rest: containers dressed as controls that report clean while stranding a keyboard user behind a + modal and swallowing a validation error. The last level turns to the accessibility gate, green for months without + once loading the pages a customer pays on." + - What you leave with is a sense of how far each layer of testing reaches. Linting reads your source and catches + authoring mistakes before anything renders, but it stops at code you wrote. Scanning reads the rendered DOM and + catches faults in a snapshot. Driving the page with a keyboard catches behavior, which a snapshot never shows. + Watching real sessions catches what changed after you shipped, which is the only layer that reaches code you do not + control. + - The storefront is pre-provisioned in a Dev Container, so the work is the audit, the repairs and the test coverage. +rewards: + deadline: "" + tiers: + - label: 1st place + description: Complete every published level and submit a verified solution. + - label: Top 3 + description: Finish the adventure with all verification checks passing. +contributor: + name: Homayoun Mohammadi + url: https://homayounmmdy.vercel.app + about: "Frontend developer with 4+ years building production apps in Next.js, React, and TypeScript. Open-source + contributor to projects at Microsoft, W3C, and GitHub. Author of two npm packages: a 12-language RTL text engine and + a TypeScript SVG mapping toolkit." +levels: + - level: beginner + emoji: 🟢 + title: The Initial Audit + devcontainer: accessibility-nightmare_beginner + community_url: "" + topics: + - axe-core + - Playwright + - Lighthouse + - WCAG 2.2 + - React + meta_description: Audit a React storefront for WCAG 2.2 failures with axe-core, Playwright, and Lighthouse. Fix color + contrast, alt text, semantic HTML, keyboard navigation, and visible focus indicators. + summary: Audit the ShopSmart homepage and fix critical WCAG 2.2 accessibility violations before the initial compliance + review. + audience: Frontend developers who understand basic HTML, CSS, React, and browser developer tools but are new to + systematic accessibility testing. + backstory: + - ShopSmart has received an urgent legal notice about accessibility barriers on its public storefront. + - Customers cannot reliably navigate the page by keyboard, important images have no text alternatives, several + controls use incorrect semantics, and the visual design does not meet WCAG contrast requirements. + - Your task is to audit the homepage, understand the failures, and repair the most serious problems before + regulators escalate the case. + objective: + - Remove all serious and critical axe-core violations from the ShopSmart homepage. + - Provide meaningful alternative text for every informative image. + - Ensure the menu and primary call-to-action are semantic, keyboard-focusable controls. + - Add visible focus indicators for interactive elements. + - Achieve a Lighthouse accessibility score of at least 95. + what_you_learn: + - How to interpret automated [axe-core](https://github.com/dequelabs/axe-core) accessibility reports. + - How semantic HTML affects keyboard and assistive-technology behavior. + - How to identify and correct WCAG color-contrast failures. + - How to provide useful text alternatives for images. + - How to verify accessibility outcomes with [Playwright](https://playwright.dev/) and + [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). + architecture: + - A React and Vite storefront runs on port 5173 inside the Dev Container. + - Playwright launches Chromium and uses axe-core to scan the rendered homepage. + - Lighthouse CI measures the accessibility category and requires a score of 95 or higher. + - Players edit src/App.jsx and src/styles.css. The tests and verification scripts define the required outcomes and + should not be weakened or bypassed. + toolbox: + - name: axe-core + url: https://github.com/dequelabs/axe-core + description: Automated accessibility engine used to detect WCAG violations. + - name: Playwright + url: https://playwright.dev/ + description: Browser automation framework used for accessibility and keyboard tests. + - name: Lighthouse + url: https://developer.chrome.com/docs/lighthouse/ + description: Browser audit tool used to measure the final accessibility score. + - name: WCAG 2.2 + url: https://www.w3.org/TR/WCAG22/ + description: Accessibility standard that defines the success criteria for this level. + services: + - name: ShopSmart + url: http://localhost:5173 + description: The intentionally inaccessible React storefront. + how_to_play: + - id: start + title: Start ShopSmart + content: | + Start the application: + + ```bash + make app + ``` + + Then open port 5173 in your browser. + - id: explore + title: Explore the Broken Storefront + content: | + Open ShopSmart on port 5173 and navigate the page using only the keyboard. + + Run the automated checks: + + ```bash + npm run test:a11y + npm run test:lighthouse + ``` + + Review the reported axe rule IDs, affected elements, keyboard failures, + and Lighthouse score before changing the implementation. + - id: implement + title: Repair the Accessibility Failures + content: | + Work primarily in: + + ```text + src/App.jsx + src/styles.css + ``` + + Correct the semantic controls, image alternatives, contrast problems, + keyboard behavior, and focus appearance. + + Do not remove tests, lower score thresholds, disable axe rules, or weaken + the verification logic. + + When ready, run: + + ```bash + ./verify.sh + ``` + helpful_links: + - title: Understanding WCAG 2.2 + url: https://www.w3.org/WAI/WCAG22/Understanding/ + description: Plain-language explanations of the relevant WCAG success criteria. + - title: axe-core Playwright integration + url: https://playwright.dev/docs/accessibility-testing + description: Guidance for running axe accessibility scans in Playwright. + - title: Keyboard accessibility + url: https://www.w3.org/WAI/WCAG22/Understanding/keyboard + description: Explains why functionality must be available from a keyboard. + - title: Focus appearance + url: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance + description: Explains the WCAG 2.2 requirements for visible keyboard focus. + contributor: + name: Ehtasham Yasin + url: https://weblight-app.vercel.app + about: Full-stack and AI Automation Engineer with 4+ years of frontend experience building React and Next.js + applications, API-driven systems, and automated workflows with Docker and n8n. Interested in DevSecOps and + open-source development. + verification: + command: ./verify.sh + description: Once you think you've solved the challenge, run the verification script. If it fails it will tell you which + checks didn't pass. If it passes, it generates a Certificate of Completion you can paste into the discussion. diff --git a/src/data/adventures/accessibility-nightmare/beginner-posts.json b/src/data/adventures/accessibility-nightmare/beginner-posts.json new file mode 100644 index 000000000..bacedaacf --- /dev/null +++ b/src/data/adventures/accessibility-nightmare/beginner-posts.json @@ -0,0 +1,5 @@ +{ + "discussionUrl": "", + "discussionPosts": [], + "totalReplies": 0 +} From a39caa41300a2f180ab285aa0d29e6370820135f Mon Sep 17 00:00:00 2001 From: Sinduri Guntupalli Date: Tue, 8 Sep 2026 09:52:22 +0200 Subject: [PATCH 2/3] chore(adventures): remove rewards from accessibility-nightmare No rewards are offered for this adventure. Signed-off-by: Sinduri Guntupalli --- src/data/adventures/accessibility-nightmare/adventure.yaml | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/data/adventures/accessibility-nightmare/adventure.yaml b/src/data/adventures/accessibility-nightmare/adventure.yaml index 3295f0ff0..604ad0899 100644 --- a/src/data/adventures/accessibility-nightmare/adventure.yaml +++ b/src/data/adventures/accessibility-nightmare/adventure.yaml @@ -53,13 +53,6 @@ overview: Watching real sessions catches what changed after you shipped, which is the only layer that reaches code you do not control. - The storefront is pre-provisioned in a Dev Container, so the work is the audit, the repairs and the test coverage. -rewards: - deadline: "" - tiers: - - label: 1st place - description: Complete every published level and submit a verified solution. - - label: Top 3 - description: Finish the adventure with all verification checks passing. contributor: name: Homayoun Mohammadi url: https://homayounmmdy.vercel.app From 088c5a45fc0457dc0d8a8d96dec4aa2043bb5b24 Mon Sep 17 00:00:00 2001 From: Sinduri Guntupalli Date: Tue, 8 Sep 2026 10:11:51 +0200 Subject: [PATCH 3/3] chore(adventures): add upcoming intermediate and expert levels to accessibility-nightmare Signed-off-by: Sinduri Guntupalli --- src/data/adventures/accessibility-nightmare/adventure.yaml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/data/adventures/accessibility-nightmare/adventure.yaml b/src/data/adventures/accessibility-nightmare/adventure.yaml index 604ad0899..d73d432b3 100644 --- a/src/data/adventures/accessibility-nightmare/adventure.yaml +++ b/src/data/adventures/accessibility-nightmare/adventure.yaml @@ -188,3 +188,10 @@ levels: command: ./verify.sh description: Once you think you've solved the challenge, run the verification script. If it fails it will tell you which checks didn't pass. If it passes, it generates a Certificate of Completion you can paste into the discussion. +upcoming_levels: + - level: intermediate + name: Intermediate + difficulty: Intermediate + - level: expert + name: Expert + difficulty: Expert