diff --git a/e2e/routes.ts b/e2e/routes.ts index e8d2e4014..231b39022 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:adventure-accessibility-nightmare-smoke + "/adventures/adventure-accessibility-nightmare/": "The Accessibility Nightmare - OffOn Adventures", + "/adventures/adventure-accessibility-nightmare/levels/beginner/": "The Initial Audit - The Accessibility Nightmare - OffOn", + // /GENERATED:adventure-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:adventure-accessibility-nightmare-a11y + "/adventures/adventure-accessibility-nightmare/", + "/adventures/adventure-accessibility-nightmare/levels/beginner/", + // /GENERATED:adventure-accessibility-nightmare-a11y ]; /** @@ -122,4 +130,12 @@ export const ROUTES_WITHOUT_FULL_COVERAGE: string[] = [ "/challenges/tdd/", "/challenges/terraform/", "/challenges/trivy/", + // GENERATED:adventure-accessibility-nightmare-challenges + "/challenges/accessibility/", + "/challenges/wcag-2-2/", + "/challenges/react/", + "/challenges/playwright/", + "/challenges/axe-core/", + "/challenges/lighthouse/", + // /GENERATED:adventure-accessibility-nightmare-challenges ]; diff --git a/scripts/refresh-leaderboard.mjs b/scripts/refresh-leaderboard.mjs index df3209311..0a5dab44d 100644 --- a/scripts/refresh-leaderboard.mjs +++ b/scripts/refresh-leaderboard.mjs @@ -35,6 +35,7 @@ const QUERY_ID = 5; // Category IDs are from: GET https://community.offon.dev/categories.json const ADVENTURE_CATEGORIES = { // GENERATED:adventures + "adventure-accessibility-nightmare": { categoryId: 0, has_beginner: true, has_intermediate: false, has_expert: false, has_single: false }, // TODO: set categoryId — look up at https://community.offon.dev/categories.json "dead-reckoning": { categoryId: 45, has_beginner: true, has_intermediate: true, has_expert: true, has_single: false }, "lex-imperfecta": { categoryId: 43, has_beginner: true, has_intermediate: true, has_expert: true, has_single: false }, "blind-by-design": { categoryId: 41, has_beginner: true, has_intermediate: true, has_expert: true, has_single: false }, diff --git a/src/data/adventures/adventure-accessibility-nightmare/adventure.yaml b/src/data/adventures/adventure-accessibility-nightmare/adventure.yaml new file mode 100644 index 000000000..9755a69e4 --- /dev/null +++ b/src/data/adventures/adventure-accessibility-nightmare/adventure.yaml @@ -0,0 +1,153 @@ +slug: adventure-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: AUG 2026 +tags: &a1 + - Accessibility + - WCAG 2.2 + - React + - Playwright + - axe-core + - Lighthouse +backstory: + - ShopSmart's European expansion is blocked by accessibility complaints and possible ADA and European Accessibility + Act penalties. + - As the lead frontend engineer, you must audit the storefront, repair accessibility failures, and build safeguards + that prevent future regressions. +overview: + - Investigate a deliberately inaccessible e-commerce experience and improve it using React, axe-core, Playwright, + Lighthouse, semantic HTML, keyboard testing, and visible focus management. + - The infrastructure is pre-provisioned in the Dev Container so you can focus on diagnosing and fixing the + accessibility problems. +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. +upcoming_levels: + - level: intermediate + name: Intermediate + difficulty: Intermediate + - level: expert + name: Expert + difficulty: Expert +levels: + - level: beginner + emoji: 🟢 + title: The Initial Audit + devcontainer: adventure-accessibility-nightmare_beginner + community_url: "" + 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 from the repository root: + + ```bash + make accessibility-nightmare-beginner + ``` + + 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. + topics: *a1 + 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/adventure-accessibility-nightmare/beginner-posts.json b/src/data/adventures/adventure-accessibility-nightmare/beginner-posts.json new file mode 100644 index 000000000..bacedaacf --- /dev/null +++ b/src/data/adventures/adventure-accessibility-nightmare/beginner-posts.json @@ -0,0 +1,5 @@ +{ + "discussionUrl": "", + "discussionPosts": [], + "totalReplies": 0 +}