feat: accessibility tests in all pages + inline setup of dark theme

AmadeusITGroup · Feb 14, 2024 · 6affbb1 · 6affbb1
1 parent 6dfef7e
commit 6affbb1
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 11 deletions.
diff --git a/angular/demo/src/app/samples/directives/usage.route.ts b/angular/demo/src/app/samples/directives/usage.route.ts
@@ -13,7 +13,7 @@ import {createSampleDirective} from '@agnos-ui/common/samples/directives/sample-
 			<button class="btn btn-primary" id="test2">button 2</button>
 		</div>
 		<hr />
-		<input class="form-control" id="clickText" type="text" [(ngModel)]="config" />
+		<input class="form-control" id="clickText" type="text" aria-label="text input to configure the directive" [(ngModel)]="config" />
 		<hr />
 		<span>(Open the console to see the outputs)</span>
 	`,

diff --git a/demo/src/app.html b/demo/src/app.html
@@ -6,6 +6,12 @@
 		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/agnosui-logo.svg" />
 		%sveltekit.head%
 		<title>AgnosUI</title>
+		<script>
+			const theme = localStorage.getItem('theme');
+			if (theme === 'dark' || ((theme === 'auto' || !theme) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+				document.documentElement.setAttribute('data-bs-theme', 'dark');
+			}
+		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div id="root">%sveltekit.body%</div>

diff --git a/demo/src/routes/menu/Theme.svelte b/demo/src/routes/menu/Theme.svelte
@@ -72,7 +72,7 @@
 <div class="nav-item ms-3">
 	<div class="dropdown">
 		<button
-			class="btn nav-link dropdown-toggle align-items-center d-flex"
+			class="btn nav-link dropdown-toggle align-items-center d-flex btn-dark-mode"
 			aria-label="toggle the dark mode"
 			on:click={() => ($open$ = !$open$)}
 			type="button"

diff --git a/e2e/demo.spec.ts b/e2e/demo.spec.ts
@@ -7,9 +7,20 @@ import path from 'path';
 import {normalizePath} from './utils';
 
 const pathToFrameworkDir = normalizePath(path.join(__dirname, '../demo/src/routes'));
-const allRoutes = globSync(`${pathToFrameworkDir}/**/+page.svelte`).map((route) =>
-	normalizePath(route).replace(pathToFrameworkDir, '').replace('/+page.svelte', ''),
-);
+const pathToDocsDir = normalizePath(path.join(__dirname, '../docs'));
+
+const allRoutes = globSync(`**/+page.svelte`, {cwd: pathToFrameworkDir}).flatMap((route) => {
+	const normalizedRoute = normalizePath(route)
+		.replace(/\/?\+page\.svelte$/g, '')
+		.replace('[framework]', 'svelte');
+	return normalizedRoute === 'docs/svelte/[...slug]'
+		? globSync('**/*.md', {cwd: pathToDocsDir, ignore: '**/doc.md'}).map((mdRoute) =>
+				normalizePath(mdRoute)
+					.replace(/^\d{2}-([^/]*)\/\d{2}-([^/]*)\.md$/, 'docs/svelte/$1/$2')
+					.toLowerCase(),
+			)
+		: normalizedRoute;
+});
 
 async function analyze(page: Page, route: string): Promise<AxeResults> {
 	const analyser = new AxeBuilder({page}).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
@@ -21,16 +32,19 @@ async function analyze(page: Page, route: string): Promise<AxeResults> {
 
 test.describe.parallel('Demo Website', () => {
 	for (const route of allRoutes) {
-		const svelteRoute = route.replace('[framework]', 'svelte');
-		test(`Route ${svelteRoute || '/'} should be accessible`, async ({page}) => {
-			await page.goto(svelteRoute);
+		test(`Route ${route || '/'} should be accessible`, async ({page}) => {
+			await page.goto(route);
 			const frames = page.frames();
 			if (frames.length > 1) {
 				const iframes = frames.slice(1);
 				await Promise.all(iframes.map((frame) => expect.poll(() => frame.url()).not.toBe('about:blank')));
 				await Promise.all(iframes.map((frame) => frame.waitForURL(frame.url())));
 			}
-			expect((await analyze(page, svelteRoute)).violations).toEqual([]);
+			expect((await analyze(page, route)).violations).toEqual([]);
+			await page.evaluate(() => document.documentElement.setAttribute('data-bs-theme', 'dark'));
+			await page.locator('.btn-dark-mode').first().click();
+			await page.locator('.dropdown-menu button:has-text("Dark")').click();
+			expect((await analyze(page, route)).violations).toEqual([]);
 		});
 	}
 });

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/directives-usage.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/directives-usage.html
@@ -21,6 +21,7 @@
 			</div>
 			<hr />
 			<input
+			 aria-label="text input to configure the directive"
 			 class="form-control"
 			 id="clickText"
 			 type="text"

diff --git a/react/demo/src/app/samples/directives/Usage.route.tsx b/react/demo/src/app/samples/directives/Usage.route.tsx
@@ -18,7 +18,14 @@ const Usage = () => {
 				</button>
 			</div>
 			<hr />
-			<input className="form-control" id="clickText" type="text" defaultValue={text} onChange={(data) => setText(data.target.value)} />
+			<input
+				className="form-control"
+				id="clickText"
+				type="text"
+				defaultValue={text}
+				aria-label="text input to configure the directive"
+				onChange={(data) => setText(data.target.value)}
+			/>
 			<hr />
 			<span>(Open the console to see the outputs)</span>
 		</>

diff --git a/svelte/demo/src/app/samples/directives/Usage.route.svelte b/svelte/demo/src/app/samples/directives/Usage.route.svelte
@@ -10,6 +10,6 @@
 	<button class="btn btn-primary" id="test2">button 2</button>
 </div>
 <hr />
-<input class="form-control" id="clickText" type="text" bind:value={text} />
+<input class="form-control" id="clickText" type="text" bind:value={text} aria-label="text input to configure the directive" />
 <hr />
 <span>(Open the console to see the outputs)</span>