Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2725c35c28 | ||
|
|
6db96b6ef5 | ||
|
|
f6300c5d1d |
@@ -9,4 +9,5 @@ artifacts/**/*.json
|
|||||||
artifacts/**/*.xml
|
artifacts/**/*.xml
|
||||||
artifacts/**/*.txt
|
artifacts/**/*.txt
|
||||||
artifacts/**/*.sarif
|
artifacts/**/*.sarif
|
||||||
|
artifacts/tests/e2e/
|
||||||
!artifacts/**/.gitkeep
|
!artifacts/**/.gitkeep
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
# APP_HOME accessibility review
|
||||||
|
|
||||||
|
Status: pending-manual-review
|
||||||
|
Route ID: APP_HOME
|
||||||
|
Release ID:
|
||||||
|
Reviewer:
|
||||||
|
Reviewed at:
|
||||||
|
Signature:
|
||||||
|
Attestation: pending
|
||||||
|
M1 Keyboard: pending
|
||||||
|
M2 Visible focus: pending
|
||||||
|
M3 Route focus: pending
|
||||||
|
M4 Modal focus: not-applicable (no modal on this route)
|
||||||
|
M5 Error association: not-applicable (no form error on this route)
|
||||||
|
M6 Color signal: pending
|
||||||
|
M7 Reduced motion: pending
|
||||||
|
Screen reader: pending
|
||||||
|
Notes: Automated axe, keyboard-focus, and reduced-motion evidence is available; human review pending.
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
# NOT_FOUND accessibility review
|
||||||
|
|
||||||
|
Status: pending-manual-review
|
||||||
|
Route ID: NOT_FOUND
|
||||||
|
Release ID:
|
||||||
|
Reviewer:
|
||||||
|
Reviewed at:
|
||||||
|
Signature:
|
||||||
|
Attestation: pending
|
||||||
|
M1 Keyboard: pending
|
||||||
|
M2 Visible focus: pending
|
||||||
|
M3 Route focus: pending
|
||||||
|
M4 Modal focus: not-applicable (no modal on this route)
|
||||||
|
M5 Error association: not-applicable (no form error on this route)
|
||||||
|
M6 Color signal: pending
|
||||||
|
M7 Reduced motion: pending
|
||||||
|
Screen reader: pending
|
||||||
|
Notes: Human review pending.
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
# SAMPLE_RESOURCE_LIST accessibility review
|
||||||
|
|
||||||
|
Status: pending-manual-review
|
||||||
|
Route ID: SAMPLE_RESOURCE_LIST
|
||||||
|
Release ID:
|
||||||
|
Reviewer:
|
||||||
|
Reviewed at:
|
||||||
|
Signature:
|
||||||
|
Attestation: pending
|
||||||
|
M1 Keyboard: pending
|
||||||
|
M2 Visible focus: pending
|
||||||
|
M3 Route focus: pending
|
||||||
|
M4 Modal focus: not-applicable (no modal on this route)
|
||||||
|
M5 Error association: not-applicable (no form error on this route)
|
||||||
|
M6 Color signal: pending
|
||||||
|
M7 Reduced motion: pending
|
||||||
|
Screen reader: pending
|
||||||
|
Notes: Human review pending.
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
# Manual accessibility review checklist
|
||||||
|
|
||||||
|
Automated axe checks do not establish WCAG conformance. A human reviewer must
|
||||||
|
review all three route records in `artifacts/tests/a11y-manual/` against one
|
||||||
|
release candidate and sign them. Copy the template fields exactly; the gate
|
||||||
|
rejects blank identity/timestamp/signature fields, pending verdicts, mismatched
|
||||||
|
release IDs, or missing routes.
|
||||||
|
|
||||||
|
Allowed item verdicts:
|
||||||
|
|
||||||
|
- `pass`
|
||||||
|
- `not-applicable (<specific reason>)`
|
||||||
|
|
||||||
|
Required record:
|
||||||
|
|
||||||
|
```text
|
||||||
|
Status: reviewed
|
||||||
|
Route ID: APP_HOME
|
||||||
|
Release ID: <immutable release ID>
|
||||||
|
Reviewer: <human reviewer identity>
|
||||||
|
Reviewed at: <RFC 3339 timestamp>
|
||||||
|
Signature: <reviewer identity or approved signature reference>
|
||||||
|
Attestation: accepted
|
||||||
|
M1 Keyboard: pass
|
||||||
|
M2 Visible focus: pass
|
||||||
|
M3 Route focus: pass
|
||||||
|
M4 Modal focus: not-applicable (no modal on this route)
|
||||||
|
M5 Error association: not-applicable (no form error on this route)
|
||||||
|
M6 Color signal: pass
|
||||||
|
M7 Reduced motion: pass
|
||||||
|
Screen reader: pass
|
||||||
|
Notes: <observations and linked defect IDs>
|
||||||
|
```
|
||||||
|
|
||||||
|
The reviewer must verify:
|
||||||
|
|
||||||
|
- M1: every action works without a pointing device
|
||||||
|
- M2: every focused element has a visible indicator
|
||||||
|
- M3: route transitions move focus to a deterministic target
|
||||||
|
- M4: modal focus is trapped and restored, when a modal exists
|
||||||
|
- M5: errors are programmatically associated with their controls, when present
|
||||||
|
- M6: state never relies on color alone
|
||||||
|
- M7: non-essential motion is suppressed with reduced-motion preference
|
||||||
|
- Screen reader: headings, live regions, errors, and actions are announced once
|
||||||
|
|
||||||
|
Passing automated evidence means only that tested pages had no critical or
|
||||||
|
serious axe findings under the recorded browser run.
|
||||||
+2
-1
@@ -21,7 +21,8 @@
|
|||||||
"test:component": "vitest run tests/component --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/component.xml",
|
"test:component": "vitest run tests/component --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/component.xml",
|
||||||
"test:integration": "vitest run tests/integration --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/integration.xml",
|
"test:integration": "vitest run tests/integration --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/integration.xml",
|
||||||
"test:e2e": "playwright test",
|
"test:e2e": "playwright test",
|
||||||
"test:a11y": "playwright test --grep @a11y",
|
"test:a11y": "playwright test --grep @a11y && node scripts/write-a11y-report.mjs",
|
||||||
|
"review:a11y-manual": "node scripts/verify-a11y-manual.mjs",
|
||||||
"test:sample-removal": "node scripts/test-sample-removal.mjs",
|
"test:sample-removal": "node scripts/test-sample-removal.mjs",
|
||||||
"test:all": "pnpm test:runtime-schema && pnpm test:unit && pnpm test:component && pnpm test:integration"
|
"test:all": "pnpm test:runtime-schema && pnpm test:unit && pnpm test:component && pnpm test:integration"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export default defineConfig({
|
|||||||
screenshot: "only-on-failure",
|
screenshot: "only-on-failure",
|
||||||
},
|
},
|
||||||
webServer: {
|
webServer: {
|
||||||
command: "pnpm dev --host 127.0.0.1",
|
command: "corepack pnpm dev --host 127.0.0.1",
|
||||||
url: "http://127.0.0.1:5173",
|
url: "http://127.0.0.1:5173",
|
||||||
reuseExistingServer: !process.env.CI,
|
reuseExistingServer: !process.env.CI,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,58 @@
|
|||||||
|
export const MANUAL_A11Y_ROUTE_IDS = Object.freeze([
|
||||||
|
"APP_HOME",
|
||||||
|
"SAMPLE_RESOURCE_LIST",
|
||||||
|
"NOT_FOUND",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const REVIEW_FIELDS = Object.freeze([
|
||||||
|
"M1 Keyboard",
|
||||||
|
"M2 Visible focus",
|
||||||
|
"M3 Route focus",
|
||||||
|
"M4 Modal focus",
|
||||||
|
"M5 Error association",
|
||||||
|
"M6 Color signal",
|
||||||
|
"M7 Reduced motion",
|
||||||
|
"Screen reader",
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** @param {string} content */
|
||||||
|
export function validateManualA11yEvidence(content) {
|
||||||
|
const fields = Object.fromEntries(
|
||||||
|
content
|
||||||
|
.split(/\r?\n/)
|
||||||
|
.map((line) => /^([^:]+):\s*(.*)$/.exec(line))
|
||||||
|
.filter(Boolean)
|
||||||
|
.map((match) => [
|
||||||
|
/** @type {RegExpExecArray} */ (match)[1].trim(),
|
||||||
|
/** @type {RegExpExecArray} */ (match)[2].trim(),
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
const failures = [];
|
||||||
|
if (fields.Status !== "reviewed") failures.push("Status");
|
||||||
|
if (!fields["Route ID"]) failures.push("Route ID");
|
||||||
|
if (!fields["Release ID"]) failures.push("Release ID");
|
||||||
|
if (!fields.Reviewer) failures.push("Reviewer");
|
||||||
|
if (!fields.Signature) failures.push("Signature");
|
||||||
|
if (fields.Attestation !== "accepted") failures.push("Attestation");
|
||||||
|
if (
|
||||||
|
!fields["Reviewed at"] ||
|
||||||
|
!Number.isFinite(Date.parse(fields["Reviewed at"]))
|
||||||
|
) {
|
||||||
|
failures.push("Reviewed at");
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const field of REVIEW_FIELDS) {
|
||||||
|
const result = fields[field];
|
||||||
|
if (
|
||||||
|
result !== "pass" &&
|
||||||
|
!/^not-applicable \(.+\)$/.test(result ?? "")
|
||||||
|
) {
|
||||||
|
failures.push(field);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Object.freeze({
|
||||||
|
fields: Object.freeze(fields),
|
||||||
|
failures: Object.freeze(failures),
|
||||||
|
passed: failures.length === 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import { mkdir, readFile, writeFile } from "node:fs/promises";
|
||||||
|
|
||||||
|
import {
|
||||||
|
MANUAL_A11Y_ROUTE_IDS,
|
||||||
|
validateManualA11yEvidence,
|
||||||
|
} from "./lib/manual-a11y-evidence.mjs";
|
||||||
|
|
||||||
|
/** @type {Array<{
|
||||||
|
* routeId: string;
|
||||||
|
* path: string;
|
||||||
|
* reviewer: string | null;
|
||||||
|
* reviewedAt: string | null;
|
||||||
|
* releaseId: string | null;
|
||||||
|
* failures: readonly string[];
|
||||||
|
* passed: boolean;
|
||||||
|
* }>} */
|
||||||
|
const results = [];
|
||||||
|
for (const routeId of MANUAL_A11Y_ROUTE_IDS) {
|
||||||
|
const path = `artifacts/tests/a11y-manual/${routeId}.md`;
|
||||||
|
const evidence = await readFile(path, "utf8");
|
||||||
|
const validation = validateManualA11yEvidence(evidence);
|
||||||
|
const failures =
|
||||||
|
validation.fields["Route ID"] === routeId
|
||||||
|
? validation.failures
|
||||||
|
: Object.freeze([...validation.failures, "Route ID mismatch"]);
|
||||||
|
results.push({
|
||||||
|
routeId,
|
||||||
|
path,
|
||||||
|
reviewer: validation.fields.Reviewer ?? null,
|
||||||
|
reviewedAt: validation.fields["Reviewed at"] ?? null,
|
||||||
|
releaseId: validation.fields["Release ID"] ?? null,
|
||||||
|
failures,
|
||||||
|
passed: validation.passed && failures.length === 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const releaseIds = new Set(results.map((result) => result.releaseId));
|
||||||
|
const passed =
|
||||||
|
results.every((result) => result.passed) &&
|
||||||
|
releaseIds.size === 1 &&
|
||||||
|
results.every((result) => Boolean(result.releaseId));
|
||||||
|
|
||||||
|
await mkdir("artifacts/tests/a11y-manual", { recursive: true });
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/tests/a11y-manual/report.json",
|
||||||
|
`${JSON.stringify(
|
||||||
|
{
|
||||||
|
schemaVersion: 1,
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
scope: MANUAL_A11Y_ROUTE_IDS,
|
||||||
|
results,
|
||||||
|
coherentRelease: releaseIds.size === 1,
|
||||||
|
passed,
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2,
|
||||||
|
)}\n`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!passed) {
|
||||||
|
const failures = results
|
||||||
|
.filter((result) => !result.passed)
|
||||||
|
.map((result) => `${result.routeId}: ${result.failures.join(", ")}`);
|
||||||
|
if (releaseIds.size !== 1) failures.push("release IDs do not match");
|
||||||
|
process.stderr.write(
|
||||||
|
`Manual accessibility evidence is incomplete:\n${failures.join("\n")}\n`,
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
process.stdout.write(
|
||||||
|
`Manual accessibility evidence: PASS (${results.length} routes)\n`,
|
||||||
|
);
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { mkdir, writeFile } from "node:fs/promises";
|
||||||
|
|
||||||
|
await mkdir("artifacts/tests", { recursive: true });
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/tests/a11y.json",
|
||||||
|
`${JSON.stringify(
|
||||||
|
{
|
||||||
|
schemaVersion: 1,
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
scope: ["APP_HOME", "SAMPLE_RESOURCE_LIST", "NOT_FOUND"],
|
||||||
|
threshold: { critical: 0, serious: 0 },
|
||||||
|
automatedStatus: "passed",
|
||||||
|
manualReview: "see artifacts/tests/a11y-manual/report.json",
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2,
|
||||||
|
)}\n`,
|
||||||
|
);
|
||||||
@@ -1,7 +1,12 @@
|
|||||||
/** @param {{ label?: string }} props */
|
/** @param {{ label?: string }} props */
|
||||||
export function LoadingSurface({ label = "불러오는 중" }) {
|
export function LoadingSurface({ label = "불러오는 중" }) {
|
||||||
return (
|
return (
|
||||||
<section aria-busy="true" aria-label={label}>
|
<section
|
||||||
|
aria-busy="true"
|
||||||
|
aria-label={label}
|
||||||
|
aria-live="polite"
|
||||||
|
aria-atomic="true"
|
||||||
|
>
|
||||||
<div className="ui-skeleton" aria-hidden="true" />
|
<div className="ui-skeleton" aria-hidden="true" />
|
||||||
<span className="sr-only">{label}</span>
|
<span className="sr-only">{label}</span>
|
||||||
</section>
|
</section>
|
||||||
@@ -11,7 +16,7 @@ export function LoadingSurface({ label = "불러오는 중" }) {
|
|||||||
/** @param {{ title?: string, action?: React.ReactNode }} props */
|
/** @param {{ title?: string, action?: React.ReactNode }} props */
|
||||||
export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
|
export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
|
||||||
return (
|
return (
|
||||||
<section className="ui-empty">
|
<section className="ui-empty" aria-live="polite">
|
||||||
<p>{title}</p>
|
<p>{title}</p>
|
||||||
{action}
|
{action}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import AxeBuilder from "@axe-core/playwright";
|
||||||
|
import { expect, test } from "@playwright/test";
|
||||||
|
|
||||||
|
for (const route of ["/", "/sample/resources", "/not-found"]) {
|
||||||
|
test(`@a11y ${route} has no critical or serious axe violations`, async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.goto(route);
|
||||||
|
await expect(page.getByRole("main")).toBeVisible();
|
||||||
|
const results = await new AxeBuilder({ page })
|
||||||
|
.withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
|
||||||
|
.analyze();
|
||||||
|
const blocking = results.violations.filter((violation) =>
|
||||||
|
["critical", "serious"].includes(violation.impact ?? ""),
|
||||||
|
);
|
||||||
|
expect(blocking).toEqual([]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test("@a11y keyboard reaches the primary route action with visible focus", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.goto("/");
|
||||||
|
await page.keyboard.press("Tab");
|
||||||
|
const action = page.getByRole("link", { name: "샘플 리소스" });
|
||||||
|
await expect(action).toBeFocused();
|
||||||
|
await expect(action).toHaveCSS("outline-style", "solid");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("@a11y reduced-motion policy disables long animation", async ({ page }) => {
|
||||||
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
||||||
|
await page.goto("/");
|
||||||
|
const duration = await page
|
||||||
|
.locator("body")
|
||||||
|
.evaluate((body) => getComputedStyle(body).animationDuration);
|
||||||
|
expect(["0s", "0.00001s", "1e-05s"]).toContain(duration);
|
||||||
|
});
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
import { validateManualA11yEvidence } from "../../scripts/lib/manual-a11y-evidence.mjs";
|
||||||
|
|
||||||
|
const reviewed = `Status: reviewed
|
||||||
|
Route ID: APP_HOME
|
||||||
|
Release ID: release-1
|
||||||
|
Reviewer: reviewer@example.test
|
||||||
|
Reviewed at: 2026-07-25T12:00:00Z
|
||||||
|
Signature: review-record-1
|
||||||
|
Attestation: accepted
|
||||||
|
M1 Keyboard: pass
|
||||||
|
M2 Visible focus: pass
|
||||||
|
M3 Route focus: pass
|
||||||
|
M4 Modal focus: not-applicable (no modal)
|
||||||
|
M5 Error association: not-applicable (no form error)
|
||||||
|
M6 Color signal: pass
|
||||||
|
M7 Reduced motion: pass
|
||||||
|
Screen reader: pass
|
||||||
|
Notes: no defects`;
|
||||||
|
|
||||||
|
describe("manual accessibility evidence", () => {
|
||||||
|
it("accepts a complete signed human review record", () => {
|
||||||
|
expect(validateManualA11yEvidence(reviewed)).toMatchObject({
|
||||||
|
failures: [],
|
||||||
|
passed: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects pending, unsigned, or incomplete evidence", () => {
|
||||||
|
expect(
|
||||||
|
validateManualA11yEvidence(
|
||||||
|
reviewed
|
||||||
|
.replace("Status: reviewed", "Status: pending-manual-review")
|
||||||
|
.replace("Signature: review-record-1", "Signature:")
|
||||||
|
.replace("Screen reader: pass", "Screen reader: pending"),
|
||||||
|
),
|
||||||
|
).toMatchObject({
|
||||||
|
failures: ["Status", "Signature", "Screen reader"],
|
||||||
|
passed: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("does not treat an unexplained not-applicable verdict as evidence", () => {
|
||||||
|
expect(
|
||||||
|
validateManualA11yEvidence(
|
||||||
|
reviewed.replace(
|
||||||
|
"M4 Modal focus: not-applicable (no modal)",
|
||||||
|
"M4 Modal focus: not-applicable",
|
||||||
|
),
|
||||||
|
),
|
||||||
|
).toMatchObject({
|
||||||
|
failures: ["M4 Modal focus"],
|
||||||
|
passed: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user