feat: Add Storybook configuration and motion tokens implementation
- Introduced Storybook configuration files (`main.ts`, `preview.ts`, `tsconfig.json`) for Angular components. - Created motion tokens in `motion-tokens.ts` to define durations, easing functions, and transforms. - Developed a Storybook story for motion tokens showcasing their usage and reduced motion fallback. - Added SCSS variables for motion durations, easing, and transforms in `_motion.scss`. - Implemented accessibility smoke tests using Playwright and Axe for automated accessibility checks. - Created portable and sealed bundle structures with corresponding JSON files for evidence locker. - Added shell script for verifying notify kit determinism.
This commit is contained in:
44
src/Web/StellaOps.Web/tests/e2e/a11y-smoke.spec.ts
Normal file
44
src/Web/StellaOps.Web/tests/e2e/a11y-smoke.spec.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { test, expect, Page } from '@playwright/test';
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
|
||||
const shouldFail = process.env.FAIL_ON_A11Y === '1';
|
||||
const reportDir = path.join(process.cwd(), 'test-results');
|
||||
|
||||
async function writeReport(filename: string, data: unknown) {
|
||||
fs.mkdirSync(reportDir, { recursive: true });
|
||||
fs.writeFileSync(path.join(reportDir, filename), JSON.stringify(data, null, 2));
|
||||
}
|
||||
|
||||
async function runA11y(url: string, page: Page) {
|
||||
await page.goto(url);
|
||||
const results = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
|
||||
const violations = [...results.violations].sort((a, b) => a.id.localeCompare(b.id));
|
||||
await writeReport(
|
||||
`a11y-${url.replace(/\\W+/g, '_') || 'home'}.json`,
|
||||
{ url: page.url(), violations }
|
||||
);
|
||||
if (shouldFail) {
|
||||
expect(violations).toEqual([]);
|
||||
}
|
||||
return violations;
|
||||
}
|
||||
|
||||
test.describe('a11y-smoke', () => {
|
||||
test('home page baseline', async ({ page }, testInfo) => {
|
||||
const violations = await runA11y('/', page);
|
||||
testInfo.annotations.push({
|
||||
type: 'a11y',
|
||||
description: `${violations.length} violations (set FAIL_ON_A11Y=1 to fail on any)`,
|
||||
});
|
||||
});
|
||||
|
||||
test('graph explorer shell', async ({ page }, testInfo) => {
|
||||
const violations = await runA11y('/graph', page);
|
||||
testInfo.annotations.push({
|
||||
type: 'a11y',
|
||||
description: `${violations.length} violations (/graph)`,
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user