feat(testing): add Playwright accessibility testing POC for Badge and Status Light

.gitignore

@@ -137,6 +137,14 @@ chromatic-build-*.xml
 chromatic-diagnostics*.json
 chromatic.config.json
 
+# Playwright test reports (generated)
+1st-gen/test/playwright-a11y/report/
+2nd-gen/test/playwright-a11y/report/
+
+# Playwright test results (generated)
+playwright-report/
+test-results/
+
 # yarn
 .pnp.*
 .yarn/*

.stylelintignore

@@ -8,4 +8,6 @@ HEADER
 !*.css
 1st-gen/projects/example-project/dist
 1st-gen/tools/styles
-1st-gen/spectrum-*.css
+1st-gen/spectrum-*.css
+1st-gen/test/playwright-a11y/report/
+2nd-gen/test/playwright-a11y/report/

1st-gen/package.json

@@ -62,6 +62,11 @@
         "storybook:quick": "run-p build:watch storybook:run",
         "storybook:run": "web-dev-server --config wds-storybook.config.js",
         "test": "yarn test:focus unit",
+        "test:a11y": "playwright test --config=../2nd-gen/playwright.a11y.config.ts",
+        "test:a11y:1st": "playwright test --config=../2nd-gen/playwright.a11y.config.ts --project=1st-gen",
+        "test:a11y:2nd": "playwright test --config=../2nd-gen/playwright.a11y.config.ts --project=2nd-gen",
+        "test:a11y:report": "playwright show-report ../2nd-gen/test/playwright-a11y/report",
+        "test:a11y:ui": "playwright test --config=../2nd-gen/playwright.a11y.config.ts --ui",
         "test:bench": "yarn build:tests && node test/benchmark/cli.js",
         "test:changed": "node ./scripts/test-changes.js",
         "test:ci": "yarn test:start",
@@ -87,10 +92,11 @@
         "react/*"
     ],
     "devDependencies": {
+        "@axe-core/playwright": "^4.11.0",
         "@changesets/changelog-github": "0.5.1",
         "@changesets/cli": "2.29.7",
         "@commitlint/cli": "19.8.1",
-        "@commitlint/config-conventional": "19.8.1",
+        "@commitlint/config-conventional": "^19.8.1",
         "@custom-elements-manifest/analyzer": "0.10.6",
         "@geometricpanda/storybook-addon-badges": "2.0.5",
         "@lit/react": "1.0.8",
@@ -167,7 +173,7 @@
         "jsonc-eslint-parser": "2.4.1",
         "latest-version": "9.0.0",
         "lightningcss": "1.30.1",
-        "lint-staged": "16.2.6",
+        "lint-staged": "^16.1.2",
         "lit": "^2.5.0 || ^3.1.3",
         "lit-analyzer": "2.0.3",
         "lit-html": "^2.4.0 || ^3.1.3",
@@ -181,7 +187,7 @@
         "prettier-plugin-package": "1.4.0",
         "pretty-bytes": "7.1.0",
         "re-template-tag": "2.0.1",
-        "replace-in-file": "8.3.0",
+        "replace-in-file": "^8.3.0",
         "rimraf": "6.0.1",
         "rollup": "4.52.2",
         "sinon": "17.0.2",

1st-gen/packages/badge/test/badge.a11y.spec.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { expect, test } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { gotoStory } from '../../../../2nd-gen/test/a11y-helpers.js';
+
+/**
+ * Accessibility tests for Badge component
+ *
+ * Tests both ARIA snapshot structure and aXe WCAG compliance
+ */
+
+test.describe('Badge - ARIA Snapshots', () => {
+    test('should have correct accessibility tree for default badge', async ({
+        page,
+    }) => {
+        const badge = await gotoStory(page, 'badge--default', 'sp-badge');
+        const snapshot = await badge.ariaSnapshot();
+
+        expect(snapshot).toBeTruthy();
+        await expect(badge).toMatchAriaSnapshot();
+    });
+
+    test('should handle badge with icon', async ({ page }) => {
+        const badge = await gotoStory(page, 'badge--icons', 'sp-badge');
+        const snapshot = await badge.ariaSnapshot();
+
+        expect(snapshot).toBeTruthy();
+    });
+
+    test('should maintain accessibility with semantic variants', async ({
+        page,
+    }) => {
+        await gotoStory(page, 'badge--semantic', 'sp-badge');
+        const badges = page.locator('sp-badge');
+
+        const count = await badges.count();
+        expect(count).toBeGreaterThan(0);
+
+        // Verify each badge is accessible
+        for (let i = 0; i < count; i++) {
+            const badge = badges.nth(i);
+            const snapshot = await badge.ariaSnapshot();
+            expect(snapshot).toBeTruthy();
+        }
+    });
+});
+
+test.describe('Badge - aXe Validation', () => {
+    test('should not have accessibility violations - default', async ({
+        page,
+    }) => {
+        await gotoStory(page, 'badge--default', 'sp-badge');
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+
+    test('should not have violations - semantic variants', async ({ page }) => {
+        await gotoStory(page, 'badge--semantic', 'sp-badge');
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+
+    test('should not have violations - with icon', async ({ page }) => {
+        await gotoStory(page, 'badge--icons', 'sp-badge');
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+
+    test('should verify color contrast', async ({ page }) => {
+        await gotoStory(page, 'badge--semantic', 'sp-badge');
+
+        const results = await new AxeBuilder({ page })
+            .withRules(['color-contrast'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+});

1st-gen/packages/badge/test/badge.a11y.spec.ts-snapshots/Badge---ARIA-Snapshots-should-have-correct-accessibility-tree-for-default-badge-1.aria.yml

@@ -0,0 +1 @@
+- text: Badge

1st-gen/packages/status-light/test/status-light.a11y.spec.ts

@@ -0,0 +1,111 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { expect, test } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { gotoStory } from '../../../../2nd-gen/test/a11y-helpers.js';
+
+/**
+ * Accessibility tests for Status Light component
+ *
+ * Tests both ARIA snapshot structure and aXe WCAG compliance
+ */
+
+test.describe('Status Light - ARIA Snapshots', () => {
+    test('should have correct accessibility tree structure', async ({
+        page,
+    }) => {
+        const statusLight = await gotoStory(
+            page,
+            'statuslight--m',
+            'sp-status-light'
+        );
+
+        const snapshot = await statusLight.ariaSnapshot();
+        expect(snapshot).toBeTruthy();
+        await expect(statusLight).toMatchAriaSnapshot();
+    });
+
+    test('should reflect different sizes', async ({ page }) => {
+        const sizes = ['s', 'm', 'l'];
+
+        for (const size of sizes) {
+            const statusLight = await gotoStory(
+                page,
+                `statuslight--${size}`,
+                'sp-status-light'
+            );
+
+            const snapshot = await statusLight.ariaSnapshot();
+            expect(snapshot).toBeTruthy();
+        }
+    });
+
+    test('should handle disabled state', async ({ page }) => {
+        const statusLight = await gotoStory(
+            page,
+            'statuslight--disabled-true',
+            'sp-status-light'
+        );
+
+        const snapshot = await statusLight.ariaSnapshot();
+        expect(snapshot).toBeTruthy();
+    });
+});
+
+test.describe('Status Light - aXe Validation', () => {
+    test('should not have accessibility violations - medium size', async ({
+        page,
+    }) => {
+        await gotoStory(page, 'statuslight--m', 'sp-status-light');
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+
+    test('should not have violations - different sizes', async ({ page }) => {
+        const sizes = ['s', 'l'];
+
+        for (const size of sizes) {
+            await gotoStory(page, `statuslight--${size}`, 'sp-status-light');
+
+            const results = await new AxeBuilder({ page })
+                .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+                .analyze();
+
+            expect(results.violations).toEqual([]);
+        }
+    });
+
+    test('should not have violations - disabled state', async ({ page }) => {
+        await gotoStory(page, 'statuslight--disabled-true', 'sp-status-light');
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+
+    test('should verify color contrast', async ({ page }) => {
+        await gotoStory(page, 'statuslight--m', 'sp-status-light');
+
+        const results = await new AxeBuilder({ page })
+            .withRules(['color-contrast'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+});

1st-gen/packages/status-light/test/status-light.a11y.spec.ts-snapshots/Status-Light---ARIA-Snapshots-should-have-correct-accessibility-tree-structure-1.aria.yml

@@ -0,0 +1 @@
+- text: accent

1st-gen/tsconfig-all.json

@@ -1,20 +1,22 @@
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
-        "rootDir": "./",
+        "emitDeclarationOnly": false,
         "noEmit": true,
-        "emitDeclarationOnly": false
+        "rootDir": "./"
     },
+    "exclude": [
+        "packages/*/node_modules/**/*.ts",
+        "tools/*/node_modules/**/*.ts",
+        "packages/**/test/*.a11y.spec.ts",
+        "test/**/*.ts"
+    ],
     "include": [
         "packages/**/*.ts",
         "tools/**/*.ts",
         "projects/story-decorator/**/*.ts",
         "projects/vrt-compare/**/*.ts"
     ],
-    "exclude": [
-        "packages/*/node_modules/**/*.ts",
-        "tools/*/node_modules/**/*.ts"
-    ],
     "references": [
         {
             "path": "packages/accordion"

2nd-gen/package.json

@@ -24,12 +24,19 @@
         "start": "run-p dev:core dev:analyze storybook",
         "storybook": "yarn workspace @adobe/swc storybook",
         "storybook:build": "yarn workspace @adobe/swc storybook:build",
-        "test": "yarn workspace @adobe/swc test"
+        "test": "yarn workspace @adobe/swc test",
+        "test:a11y": "playwright test --config=playwright.a11y.config.ts",
+        "test:a11y:1st": "playwright test --config=playwright.a11y.config.ts --project=1st-gen",
+        "test:a11y:2nd": "playwright test --config=playwright.a11y.config.ts --project=2nd-gen",
+        "test:a11y:report": "playwright show-report test/playwright-a11y/report",
+        "test:a11y:ui": "playwright test --config=playwright.a11y.config.ts --ui"
     },
     "workspaces": [
         "packages/*"
     ],
     "devDependencies": {
+        "@axe-core/playwright": "^4.11.0",
+        "@playwright/test": "1.53.1",
         "eslint": "8.57.1",
         "eslint-plugin-simple-import-sort": "12.1.1",
         "npm-run-all2": "8.0.4"