feat(adventure): add The Accessibility Nightmare

e2e/routes.ts

@@ -43,6 +43,10 @@ export const SMOKE_ROUTES: Record<string, string> = {
   "/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
 ];

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 },

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.

src/data/adventures/adventure-accessibility-nightmare/beginner-posts.json

@@ -0,0 +1,5 @@
+{
+  "discussionUrl": "",
+  "discussionPosts": [],
+  "totalReplies": 0
+}