test: add axe accessibility testing

change/@fluentui-web-components-c7f76868-02ae-4651-82cc-a43a6f56208c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add axe automated a11y testing",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "@actions/core": "1.9.1",
     "@actions/github": "5.0.3",
+    "@axe-core/playwright": "^4.10.0",
     "@babel/core": "7.24.6",
     "@babel/generator": "7.24.6",
     "@babel/parser": "7.24.6",

packages/web-components/src/accordion/accordion.spec.ts

@@ -1,10 +1,12 @@
 import type { Locator } from '@playwright/test';
 import { test } from '@playwright/test';
-import { expect, fixtureURL } from '../helpers.tests.js';
+import { analyzePageWithAxe, createElementInternalsTrapsForAxe, expect, fixtureURL } from '../helpers.tests.js';
+
+const storybookDocId = 'components-accordion--docs';
 
 test.describe('Accordion', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(fixtureURL('components-accordion--accordion'));
+    await page.goto(fixtureURL(storybookDocId));
 
     await page.waitForFunction(() =>
       Promise.all([
@@ -435,3 +437,20 @@ test.describe('Accordion', () => {
     await expect(item).toHaveAttribute('expanded');
   });
 });
+
+test('should not have auto detectable accessibility issues', async ({ page }) => {
+  await createElementInternalsTrapsForAxe(page);
+
+  await page.goto(fixtureURL(storybookDocId));
+  await page.waitForFunction(() =>
+    Promise.all([
+      customElements.whenDefined('fluent-accordion'),
+      customElements.whenDefined('fluent-accordion-item'),
+      customElements.whenDefined('fluent-checkbox'),
+    ]),
+  );
+
+  const results = await analyzePageWithAxe(page);
+
+  expect(results.violations).toEqual([]);
+});

packages/web-components/src/anchor-button/anchor-button.spec.ts

@@ -1,6 +1,8 @@
 import { spinalCase } from '@microsoft/fast-web-utilities';
 import { test } from '@playwright/test';
-import { expect, fixtureURL } from '../helpers.tests.js';
+import { analyzePageWithAxe, createElementInternalsTrapsForAxe, expect, fixtureURL } from '../helpers.tests.js';
+
+const storybookDocId = 'components-button-anchor--docs';
 
 const proxyAttributes = {
   href: 'href',
@@ -27,7 +29,7 @@ const booleanAttributes = {
 
 test.describe('Anchor Button', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(fixtureURL('components-button-anchor--anchor-button'));
+    await page.goto(fixtureURL(storybookDocId));
 
     await page.waitForFunction(() => customElements.whenDefined('fluent-anchor-button'));
   });
@@ -143,3 +145,14 @@ test.describe('Anchor Button', () => {
     expect(newPage.url()).toContain(expectedUrl);
   });
 });
+
+test('should not have auto detectable accessibility issues', async ({ page }) => {
+  await createElementInternalsTrapsForAxe(page);
+
+  await page.goto(fixtureURL(storybookDocId));
+  await page.waitForFunction(() => customElements.whenDefined('fluent-anchor-button'));
+
+  const results = await analyzePageWithAxe(page);
+
+  expect(results.violations).toEqual([]);
+});

packages/web-components/src/avatar/avatar.spec.ts

@@ -1,11 +1,13 @@
 import { test } from '@playwright/test';
-import { expect, fixtureURL } from '../helpers.tests.js';
+import { analyzePageWithAxe, createElementInternalsTrapsForAxe, expect, fixtureURL } from '../helpers.tests.js';
 import type { Avatar } from './avatar.js';
-import { AvatarAppearance, AvatarColor, AvatarSize } from './avatar.options.js';
+import type { AvatarAppearance, AvatarColor, AvatarSize } from './avatar.options.js';
+
+const storybookDocId = 'components-avatar--docs';
 
 test.describe('Avatar Component', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(fixtureURL('components-avatar--image'));
+    await page.goto(fixtureURL(storybookDocId));
 
     await page.waitForFunction(() => customElements.whenDefined('fluent-avatar'));
   });
@@ -81,6 +83,10 @@ test.describe('Avatar Component', () => {
   test('should have a role of img', async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     await expect(element).toHaveJSProperty('elementInternals.role', 'img');
   });
 
@@ -119,6 +125,10 @@ test.describe('Avatar Component', () => {
   test('should render correctly in active state', async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     await element.evaluate((node: Avatar) => {
       node.active = 'active';
     });
@@ -129,6 +139,10 @@ test.describe('Avatar Component', () => {
   test('should render correctly in inactive state', async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     await element.evaluate((node: Avatar) => {
       node.active = 'inactive';
     });
@@ -139,6 +153,10 @@ test.describe('Avatar Component', () => {
   test('default color should be neutral', async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     await expect(element).toHaveCustomState('neutral');
   });
 
@@ -165,6 +183,10 @@ test.describe('Avatar Component', () => {
   test(`should set the color attribute on the internal control`, async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     for (const [, value] of Object.entries(colorAttributes)) {
       await test.step(value, async () => {
         await element.evaluate((node: Avatar, colorValue: string) => {
@@ -181,6 +203,10 @@ test.describe('Avatar Component', () => {
   test(`should set the size attribute on the internal control`, async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     for (const [, value] of Object.entries(sizeAttributes)) {
       await test.step(`${value}`, async () => {
         await element.evaluate((node: Avatar, sizeValue: number) => {
@@ -197,6 +223,10 @@ test.describe('Avatar Component', () => {
   test(`should set and reflect the appearance attribute on the internal control`, async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
+    await page.setContent(/* html */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     for (const [, value] of Object.entries(appearanceAttributes)) {
       await test.step(value, async () => {
         await element.evaluate((node: Avatar, appearanceValue: string) => {
@@ -209,3 +239,14 @@ test.describe('Avatar Component', () => {
     }
   });
 });
+
+test('should not have auto detectable accessibility issues', async ({ page }) => {
+  await createElementInternalsTrapsForAxe(page);
+
+  await page.goto(fixtureURL(storybookDocId));
+  await page.waitForFunction(() => customElements.whenDefined('fluent-avatar'));
+
+  const results = await analyzePageWithAxe(page);
+
+  expect(results.violations).toEqual([]);
+});