>`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`),
};
@@ -184,35 +189,35 @@ export const Color: Story = {
export const Colorful: Story = {
render: renderComponent(html>`
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
`),
};
export const Shape: Story = {
render: renderComponent(html>`
-
-
+
+
`),
};
export const Active: Story = {
render: renderComponent(html>`
`),
@@ -221,34 +226,36 @@ export const Active: Story = {
export const ActiveAppearance: Story = {
render: renderComponent(html>`
- R
- S
- RS
+ R
+ S
+ RS
`),
};
export const CustomInitials: Story = {
- render: renderComponent(html>` `),
+ render: renderComponent(
+ html>` `,
+ ),
};
export const Size: Story = {
render: renderComponent(html>`
- 16
- 20
- 24
- 28
- 32
- 36
- 40
- 48
- 56
- 64
- 72
- 96
- 120
- 128
+ 16
+ 20
+ 24
+ 28
+ 32
+ 36
+ 40
+ 48
+ 56
+ 64
+ 72
+ 96
+ 120
+ 128
`),
};
diff --git a/packages/web-components/src/badge/badge.spec.ts b/packages/web-components/src/badge/badge.spec.ts
index 9482c86f25bda..bb8d7d960861d 100644
--- a/packages/web-components/src/badge/badge.spec.ts
+++ b/packages/web-components/src/badge/badge.spec.ts
@@ -1,10 +1,12 @@
import { test } from '@playwright/test';
-import { expect, fixtureURL } from '../helpers.tests.js';
+import { analyzePageWithAxe, createElementInternalsTrapsForAxe, expect, fixtureURL } from '../helpers.tests.js';
import type { Badge } from './badge.js';
+const storybookDocId = 'components-badge-badge--docs';
+
test.describe('Badge component', () => {
test.beforeEach(async ({ page }) => {
- await page.goto(fixtureURL('components-badge--badge'));
+ await page.goto(fixtureURL(storybookDocId));
await page.waitForFunction(() => customElements.whenDefined('fluent-badge'));
});
@@ -209,3 +211,14 @@ test.describe('Badge component', () => {
await expect(element).toHaveJSProperty('shape', 'square');
});
});
+
+test('should not have auto detectable accessibility issues', async ({ page }) => {
+ await createElementInternalsTrapsForAxe(page);
+
+ await page.goto(fixtureURL(storybookDocId));
+ await page.waitForFunction(() => customElements.whenDefined('fluent-badge'));
+
+ const results = await analyzePageWithAxe(page);
+
+ expect(results.violations).toEqual([]);
+});
diff --git a/packages/web-components/src/button/button.spec.ts b/packages/web-components/src/button/button.spec.ts
index 7348cb470abc5..9761c40b82dab 100644
--- a/packages/web-components/src/button/button.spec.ts
+++ b/packages/web-components/src/button/button.spec.ts
@@ -1,9 +1,11 @@
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-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 +651,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 analyzePageWithAxe(page);
+
+ expect(results.violations).toEqual([]);
+});
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
index bff33807e42ad..a3c4e59981533 100644
--- a/packages/web-components/src/button/button.ts
+++ b/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() {
diff --git a/packages/web-components/src/checkbox/checkbox.spec.ts b/packages/web-components/src/checkbox/checkbox.spec.ts
index 1d945a1f09bd4..4cdd23c69dad7 100644
--- a/packages/web-components/src/checkbox/checkbox.spec.ts
+++ b/packages/web-components/src/checkbox/checkbox.spec.ts
@@ -1,10 +1,12 @@
import { test } from '@playwright/test';
-import { expect, fixtureURL } from '../helpers.tests.js';
+import { analyzePageWithAxe, createElementInternalsTrapsForAxe, expect, fixtureURL } from '../helpers.tests.js';
import type { Checkbox } from './checkbox.js';
+const storybookDocId = 'components-checkbox--docs';
+
test.describe('Checkbox', () => {
test.beforeEach(async ({ page }) => {
- await page.goto(fixtureURL('components-checkbox--checkbox'));
+ await page.goto(fixtureURL(storybookDocId));
await page.waitForFunction(() => customElements.whenDefined('fluent-checkbox'));
});
@@ -12,6 +14,10 @@ test.describe('Checkbox', () => {
test('should set and retrieve the `shape` property correctly', async ({ page }) => {
const element = page.locator('fluent-checkbox');
+ await page.setContent(/* html */ `
+
+ `);
+
await expect(element).toHaveCount(1);
await test.step('should set the `shape` property to `circular`', async () => {
@@ -70,6 +76,10 @@ test.describe('Checkbox', () => {
test('should set and retrieve the `size` property correctly', async ({ page }) => {
const element = page.locator('fluent-checkbox');
+ await page.setContent(/* html */ `
+
+ `);
+
await element.evaluate((node: Checkbox) => {
node.size = 'medium';
});
@@ -480,3 +490,14 @@ test.describe('Checkbox', () => {
expect(page.url()).toContain('?checkbox=foo&checkbox=bar');
});
});
+
+test('should not have auto detectable accessibility issues', async ({ page }) => {
+ await createElementInternalsTrapsForAxe(page);
+
+ await page.goto(fixtureURL(storybookDocId));
+ await page.waitForFunction(() => customElements.whenDefined('fluent-checkbox'));
+
+ const results = await analyzePageWithAxe(page);
+
+ expect(results.violations).toEqual([]);
+});
diff --git a/packages/web-components/src/checkbox/checkbox.stories.ts b/packages/web-components/src/checkbox/checkbox.stories.ts
index f17debf141537..a525ddc0e11b2 100644
--- a/packages/web-components/src/checkbox/checkbox.stories.ts
+++ b/packages/web-components/src/checkbox/checkbox.stories.ts
@@ -18,6 +18,7 @@ const storyTemplate = html>`
shape="${story => story.shape}"
size="${story => story.size}"
slot="${story => story.slot}"
+ aria-label="${story => (story.label ? null : 'Checkbox example')}"
>
${story => story.checkedIndicatorContent?.()} ${story => story.indeterminateIndicatorContent?.()}
@@ -252,8 +253,12 @@ export const Required: Story = {
render: renderComponent(html>`