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"
+}

packages/web-components/package.json

@@ -90,6 +90,7 @@
     "test:dev": "playwright test"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.0",
     "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.0",
     "@storybook/html": "7.6.20",

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

@@ -1,9 +1,12 @@
 import { test } from '@playwright/test';
-import { expect, fixtureURL } from '../helpers.tests.js';
+import AxeBuilder from '@axe-core/playwright';
+import { createElementInternalsTrapsForAxe, expect, fixtureURL } from '../helpers.tests.js';
+
+const storybookDocId = 'components-button-button--docs';
 
 test.describe('Button', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(fixtureURL('components-button-button--button'));
+    await page.goto(fixtureURL(storybookDocId));
 
     await page.waitForFunction(() => customElements.whenDefined('fluent-button'));
   });
@@ -649,3 +652,14 @@ test.describe('Button', () => {
     expect(wasInvalid).toBeTruthy();
   });
 });
+
+test('should not have auto detectable accessibility issues', async ({ page }) => {
+  await createElementInternalsTrapsForAxe(page);
+
+  await page.goto(fixtureURL(storybookDocId));
+  await page.waitForFunction(() => customElements.whenDefined('fluent-button'));
+
+  const results = await new AxeBuilder({ page }).include('.sb-story').analyze();
+
+  expect(results.violations).toEqual([]);
+});

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

@@ -77,7 +77,7 @@ export class BaseButton extends FASTElement {
    */
   public disabledFocusableChanged(previous: boolean, next: boolean): void {
     if (this.$fastController.isConnected) {
-      this.elementInternals.ariaDisabled = `${!!next}`;
+      this.elementInternals.ariaDisabled = `${!!next || !!this.disabled}`;
     }
   }
 
@@ -260,7 +260,7 @@ export class BaseButton extends FASTElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
+    this.elementInternals.ariaDisabled = `${!!this.disabledFocusable || !!this.disabled}`;
   }
 
   constructor() {

packages/web-components/src/helpers.tests.ts

@@ -1,5 +1,5 @@
 import qs from 'qs';
-import { expect as baseExpect, type ExpectMatcherState, type Locator } from '@playwright/test';
+import { expect as baseExpect, type ExpectMatcherState, type Locator, type Page } from '@playwright/test';
 
 /**
  * Returns a formatted URL for a given Storybook fixture.
@@ -84,3 +84,45 @@ async function toHaveCustomState(
 export const expect = baseExpect.extend({
   toHaveCustomState,
 });
+
+/**
+ * A helper function to override the built-in `HTMLElement.prototype.attachInternals()`
+ * method, the overridden `attachInternals()` would set ARIA-related attributes
+ * on the host element when they are set on the `ElementInternals` object, so that
+ * Axe is able to assess the element’s accessibility properly.
+ * @see https://github.com/dequelabs/axe-core/issues/4259
+ *
+ * This function should be called before calling `page.goto(..)`.
+ */
+export async function createElementInternalsTrapsForAxe(page: Page) {
+  await page.addInitScript(() => {
+    function getAriaAttrName(prop: string | symbol): string | null {
+      return typeof prop === 'string' && (prop === 'role' || prop.startsWith('aria')) ?
+        prop.replace(/(?:aria)(\w+)/, (_, w) => `aria-${w.toLowerCase()}`) :
+        null;
+    }
+
+    const original =HTMLElement.prototype.attachInternals;
+    HTMLElement.prototype.attachInternals = function() {
+      const originalInternals = original.call(this);
+
+      return new Proxy(({} as ElementInternals), {
+        get(target, prop) {
+          return getAriaAttrName(prop) ?
+            Reflect.get(target, prop) ?? null :
+            Reflect.get(originalInternals, prop);
+        },
+        set(target, prop, value) {
+          const attrName = getAriaAttrName(prop);
+          if (attrName) {
+            Reflect.set(target, prop, value);
+            originalInternals.shadowRoot?.host.setAttribute(attrName, value);
+          } else {
+            Reflect.set(originalInternals, prop, value);
+          }
+          return true;
+        },
+      });
+    };
+  });
+}

yarn.lock

@@ -52,6 +52,13 @@
   dependencies:
     default-browser-id "3.0.0"
 
+"@axe-core/playwright@^4.10.0":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@axe-core/playwright/-/playwright-4.10.0.tgz#c9e8d0d694e8c0bd18c4636516dc22496fc03bfe"
+  integrity sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==
+  dependencies:
+    axe-core "~4.10.0"
+
 "@azure/abort-controller@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-1.1.0.tgz#788ee78457a55af8a1ad342acb182383d2119249"
@@ -7161,6 +7168,11 @@ axe-core@^4.2.0, axe-core@^4.9.1:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.9.1.tgz#fcd0f4496dad09e0c899b44f6c4bb7848da912ae"
   integrity sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==
 
+axe-core@~4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.0.tgz#d9e56ab0147278272739a000880196cdfe113b59"
+  integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==
+
 axios@^1.6.7, axios@^1.7.4:
   version "1.7.7"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"