Merge pull request #4 from refactorfirst/implement-wcag-2.2-AA

Implemented WCAG 2.2 AA compliance for accessibility features

Author: jimbethancourt

AGENTS.md

@@ -91,6 +91,14 @@ tests/                      # unit/ (Bun), integration/ (Bun + RTL/jsdom), e2e/
 3. Write the minimal implementation in `lib/` / `components/` / `app/`
 4. Refactor while keeping tests green
 
+**Accessibility is mandatory** — every feature MUST comply with WCAG 2.2 AA
+and all markup MUST use HTML5-valid elements/attributes (no obsolete
+presentational attributes; presentation lives in CSS). New pages, components
+and template changes must keep the a11y guards green:
+`tests/unit/html5-attributes.test.js`, `tests/unit/report-template-wcag.test.js`,
+`tests/unit/css-a11y.test.js`, `tests/unit/page-titles.test.js` — and add
+coverage there when introducing new markup patterns.
+
 ## Platform-Aware Sections in This Repo
 
 - **CSP** lives in `app/layout.jsx` (`script-src` includes the CDN widget hosts and
@@ -111,4 +119,10 @@ tests/                      # unit/ (Bun), integration/ (Bun + RTL/jsdom), e2e/
 
 ## Current Test Count
 
-~294 unit/integration + 112 E2E (three browsers + basePath leg).
+~313 unit/integration + 112 E2E (three browsers + basePath leg).
+
+WCAG 2.2 AA / HTML5 guards live in tests/unit/html5-attributes.test.js,
+tests/unit/report-template-wcag.test.js, tests/unit/css-a11y.test.js and
+tests/unit/page-titles.test.js — the report mustache keeps a single h1,
+scoped table headers, captions, labelled canvases and a named nav; obsolete
+presentational attributes are FORBID_ATTR-stripped in lib/renderer.js.

README.md

@@ -15,6 +15,8 @@ is a **Next.js static export** (`bun run build` produces `out/`, which any stati
   platform account is captured as the issue author and validated server-side by the platform's CI
 - Reports and submissions work for repositories hosted on the same platform as the deployment (GitHub, GitLab or
   Bitbucket)
+- **Accessible**: the site and rendered reports target **WCAG 2.2 AA**, with automated checks for selected requirements
+  such as semantic HTML5, color contrast, per-page titles, table semantics, labeled controls and landmarks
 - Works with a plain static file server: `python3 -m http.server 8000`
 
 ---
@@ -370,6 +372,14 @@ npx playwright test --ui      # interactive mode
 bun run test:e2e:basepath     # NEXT_PUBLIC_BASE_PATH=/preview leg (chromium)
 ```
 
+### Accessibility (WCAG 2.2 AA)
+
+This application targets **WCAG 2.2 Level AA**. Dedicated guards cover selected requirements:
+`tests/unit/html5-attributes.test.js`, `tests/unit/report-template-wcag.test.js`, `tests/unit/css-a11y.test.js` and
+`tests/unit/page-titles.test.js` verify HTML5-valid markup (no obsolete presentational attributes), semantic heading
+hierarchy, table captions and scoped headers, chart alternative text, landmark names, color contrast, focus visibility,
+target sizes and per-page titles. Extend these tests when you introduce new markup patterns.
+
 ### Lint
 
 ```bash

app/about/page.jsx

@@ -1,3 +1,6 @@
+export const metadata = { title: 'About - RefactorFirst' };
+
+/** Renders the RefactorFirst project overview. */
 export default function AboutPage() {
   return (
     <section className="content-page">

app/api/page.jsx

@@ -1,3 +1,6 @@
+export const metadata = { title: 'API - RefactorFirst' };
+
+/** Renders the API and integration reference page. */
 export default function ApiPage() {
   return (
     <section className="content-page">

app/documentation/page.jsx

@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+export const metadata = { title: 'Documentation - RefactorFirst' };
+
+/** Renders the RefactorFirst documentation overview. */
 export default function DocumentationPage() {
   return (
     <section className="content-page">

app/examples/page.jsx

@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+export const metadata = { title: 'Example Reports - RefactorFirst' };
+
+/** Renders links and guidance for example reports. */
 export default function ExamplesPage() {
   return (
     <section className="content-page">

app/faq/page.jsx

@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+export const metadata = { title: 'FAQ - RefactorFirst' };
+
+/** Renders answers to frequently asked questions. */
 export default function FaqPage() {
   return (
     <section className="content-page">

app/feedback/page.jsx

@@ -1,3 +1,6 @@
+export const metadata = { title: 'Feedback - RefactorFirst' };
+
+/** Renders feedback and support links. */
 export default function FeedbackPage() {
   return (
     <section className="content-page">

app/getting-started/page.jsx

@@ -1,6 +1,9 @@
 import Link from 'next/link';
 import WorkflowSample from '../../components/workflow-sample';
 
+export const metadata = { title: 'Getting Started - RefactorFirst' };
+
+/** Renders the repository setup walkthrough. */
 export default function GettingStartedPage() {
   return (
     <section className="content-page">

app/globals.css

@@ -2,7 +2,10 @@
 
 :root {
   --brand-color: #2a6f97;
-  --brand-accent: #61c0bf;
+  /* Darker accent: white text on it passes WCAG 2.2 AA contrast (1.4.3) and
+     it serves as the visible focus indicator (2.4.11, >= 3:1 against the
+     white page background). */
+  --brand-accent: #1f5273;
   --text-color: #1f2d3d;
   --muted-color: #5c6b7a;
   --bg-color: #ffffff;
@@ -49,7 +52,10 @@ main#app {
   min-height: 60vh;
 }
 
-main:focus {
+/* Skip-link target: suppress the outline only for programmatic (script/
+   click) focus; keyboard-focusable users keep the visible indicator (WCAG
+   2.4.7 / 2.4.11). */
+main:focus:not(:focus-visible) {
   outline: none;
 }