diff --git a/change/@fluentui-react-headless-components-preview-jest-axe-conformance.json b/change/@fluentui-react-headless-components-preview-jest-axe-conformance.json
new file mode 100644
index 0000000000000..7e1aca3744a39
--- /dev/null
+++ b/change/@fluentui-react-headless-components-preview-jest-axe-conformance.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "test: add axe accessibility checks to component conformance tests",
+ "packageName": "@fluentui/react-headless-components-preview",
+ "email": "dmytrokirpa@microsoft.com",
+ "dependentChangeType": "none"
+}
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Avatar/Avatar.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Avatar/Avatar.test.tsx
index 7e5b1a5e64428..76e1ad28d64fe 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Avatar/Avatar.test.tsx
@@ -7,6 +7,7 @@ describe('Avatar', () => {
isConformant({
Component: Avatar,
displayName: 'Avatar',
+ requiredProps: { name: 'John Doe' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/AvatarGroup/AvatarGroupItem/AvatarGroupItem.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/AvatarGroup/AvatarGroupItem/AvatarGroupItem.test.tsx
index 174234e1f525c..ec01aa26c1986 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/AvatarGroup/AvatarGroupItem/AvatarGroupItem.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/AvatarGroup/AvatarGroupItem/AvatarGroupItem.test.tsx
@@ -9,6 +9,7 @@ describe('AvatarGroupItem', () => {
isConformant({
Component: AvatarGroupItem,
displayName: 'AvatarGroupItem',
+ requiredProps: { name: 'John Doe' },
disabledTests: ['has-top-level-file-extra', 'component-has-root-ref'],
});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Button/Button.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Button/Button.test.tsx
index f4e9898ca2dd3..f462790a29919 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Button/Button.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Button/Button.test.tsx
@@ -7,6 +7,7 @@ describe('Button', () => {
isConformant({
Component: Button,
displayName: 'Button',
+ requiredProps: { children: 'Button' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Checkbox/Checkbox.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Checkbox/Checkbox.test.tsx
index c00a1358b6544..38bfe97434170 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Checkbox/Checkbox.test.tsx
@@ -8,6 +8,7 @@ describe('Checkbox', () => {
Component: Checkbox,
displayName: 'Checkbox',
primarySlot: 'input',
+ requiredProps: { label: 'Checkbox' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/AlphaSlider/AlphaSlider.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/AlphaSlider/AlphaSlider.test.tsx
index 1ac4824af83b4..5f9e970badccb 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/AlphaSlider/AlphaSlider.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/AlphaSlider/AlphaSlider.test.tsx
@@ -9,6 +9,7 @@ describe('AlphaSlider', () => {
displayName: 'AlphaSlider',
disabledTests: ['has-top-level-file-extra'],
primarySlot: 'input',
+ requiredProps: { 'aria-label': 'Alpha' },
});
it('renders opacity as a native range value', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorArea/ColorArea.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorArea/ColorArea.test.tsx
index 9f825faa0c625..54984efb52dd7 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorArea/ColorArea.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorArea/ColorArea.test.tsx
@@ -7,6 +7,10 @@ describe('ColorArea', () => {
isConformant({
Component: ColorArea,
displayName: 'ColorArea',
+ requiredProps: {
+ inputX: { 'aria-label': 'Saturation' },
+ inputY: { 'aria-label': 'Value' },
+ },
disabledTests: ['has-top-level-file-extra'],
});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx
index f244d7fc0284b..e8e2a2cf57368 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/ColorPicker/ColorSlider/ColorSlider.test.tsx
@@ -9,6 +9,7 @@ describe('ColorSlider', () => {
displayName: 'ColorSlider',
disabledTests: ['has-top-level-file-extra'],
primarySlot: 'input',
+ requiredProps: { 'aria-label': 'Color' },
});
it('renders a native range input with channel semantics', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Combobox/Combobox.test.tsx
index 524715aac6478..249917a9a321a 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Combobox/Combobox.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Combobox/Combobox.test.tsx
@@ -10,6 +10,7 @@ describe('Combobox', () => {
displayName: 'Combobox',
primarySlot: 'input',
requiredProps: {
+ 'aria-label': 'Options',
open: true,
children: (
<>
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/CompoundButton/CompoundButton.test.tsx
index 4c313a0857ef0..608d44802c791 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/CompoundButton/CompoundButton.test.tsx
@@ -8,6 +8,7 @@ describe('CompoundButton', () => {
isConformant({
Component: CompoundButton,
displayName: 'CompoundButton',
+ requiredProps: { children: 'Action' },
});
it('renders a button with primary and secondary text in its accessible name', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Dropdown/Dropdown.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Dropdown/Dropdown.test.tsx
index 6014ae40100c1..9fd3beff14e38 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Dropdown/Dropdown.test.tsx
@@ -10,6 +10,7 @@ describe('Dropdown', () => {
displayName: 'Dropdown',
primarySlot: 'button',
requiredProps: {
+ 'aria-label': 'Options',
open: true,
children: (
<>
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Image/Image.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Image/Image.test.tsx
index 0ea6915d85e7d..351bc8ff2c7f7 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Image/Image.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Image/Image.test.tsx
@@ -7,6 +7,7 @@ describe('Image', () => {
isConformant({
Component: Image,
displayName: 'Image',
+ requiredProps: { alt: 'Image' },
});
it('renders an image element with the correct attributes', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Input/Input.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Input/Input.test.tsx
index b430dd4b53004..c14d2ff859f50 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Input/Input.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Input/Input.test.tsx
@@ -8,6 +8,7 @@ describe('Input', () => {
Component: Input,
displayName: 'Input',
primarySlot: 'input',
+ requiredProps: { 'aria-label': 'Text' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Link/Link.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Link/Link.test.tsx
index cdea20fcb54d3..dc41a1d9105e7 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Link/Link.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Link/Link.test.tsx
@@ -7,6 +7,7 @@ describe('Link', () => {
isConformant({
Component: Link,
displayName: 'Link',
+ requiredProps: { children: 'Link' },
});
it('renders as a button when no href is provided', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.test.tsx
index e24c9542a92fa..1130e601ecf14 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.test.tsx
@@ -7,6 +7,7 @@ describe('MenuButton', () => {
isConformant({
Component: MenuButton,
displayName: 'MenuButton',
+ requiredProps: { children: 'Open menu' },
});
it('renders a default state without a default menu icon', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx
index 1157334274ca0..72e64f3b8aaee 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx
@@ -7,6 +7,7 @@ describe('Persona', () => {
isConformant({
Component: Persona,
displayName: 'Persona',
+ requiredProps: { name: 'User' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/ProgressBar/ProgressBar.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/ProgressBar/ProgressBar.test.tsx
index c9d555d8639fa..c975cce0a859d 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/ProgressBar/ProgressBar.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/ProgressBar/ProgressBar.test.tsx
@@ -7,6 +7,7 @@ describe('ProgressBar', () => {
isConformant({
Component: ProgressBar,
displayName: 'ProgressBar',
+ requiredProps: { 'aria-label': 'Progress' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/RatingDisplay/RatingDisplay.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/RatingDisplay/RatingDisplay.test.tsx
index 7cbae13514590..52789cfd39360 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/RatingDisplay/RatingDisplay.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/RatingDisplay/RatingDisplay.test.tsx
@@ -8,6 +8,7 @@ describe('RatingDisplay', () => {
isConformant({
Component: RatingDisplay,
displayName: 'RatingDisplay',
+ requiredProps: { 'aria-label': 'Rating' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SearchBox/SearchBox.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SearchBox/SearchBox.test.tsx
index c3cf9ceb39f5b..aebdf777247bc 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SearchBox/SearchBox.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SearchBox/SearchBox.test.tsx
@@ -8,6 +8,7 @@ describe('SearchBox', () => {
Component: SearchBox,
displayName: 'SearchBox',
primarySlot: 'input',
+ requiredProps: { 'aria-label': 'Search' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Select/Select.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Select/Select.test.tsx
index 6b9ba7d9dc39f..8d4f94763ebfe 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Select/Select.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Select/Select.test.tsx
@@ -8,6 +8,7 @@ describe('Select', () => {
Component: Select,
displayName: 'Select',
primarySlot: 'select',
+ requiredProps: { 'aria-label': 'Options' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Skeleton/Skeleton.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Skeleton/Skeleton.test.tsx
index 4b98b6c6958bb..682b10a738ec4 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Skeleton/Skeleton.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Skeleton/Skeleton.test.tsx
@@ -7,6 +7,7 @@ describe('Skeleton', () => {
isConformant({
Component: Skeleton,
displayName: 'Skeleton',
+ requiredProps: { 'aria-label': 'Loading' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Slider/Slider.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Slider/Slider.test.tsx
index 0bab0fdbc4a5b..c1ab322aa0458 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Slider/Slider.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Slider/Slider.test.tsx
@@ -8,6 +8,7 @@ describe('Slider', () => {
Component: Slider,
displayName: 'Slider',
primarySlot: 'input',
+ requiredProps: { 'aria-label': 'Value' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SpinButton/SpinButton.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SpinButton/SpinButton.test.tsx
index fbc499f008a3a..b4ee2ec5f8985 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SpinButton/SpinButton.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SpinButton/SpinButton.test.tsx
@@ -8,6 +8,7 @@ describe('SpinButton', () => {
Component: SpinButton,
displayName: 'SpinButton',
primarySlot: 'input',
+ requiredProps: { 'aria-label': 'Value' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Spinner/Spinner.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Spinner/Spinner.test.tsx
index 7e15dfb3cc437..5622bfcb68b1f 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Spinner/Spinner.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Spinner/Spinner.test.tsx
@@ -7,6 +7,7 @@ describe('Spinner', () => {
isConformant({
Component: Spinner,
displayName: 'Spinner',
+ requiredProps: { 'aria-label': 'Loading' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SplitButton/SplitButton.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SplitButton/SplitButton.test.tsx
index 9c06f59507c8b..936e0387a29b3 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SplitButton/SplitButton.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SplitButton/SplitButton.test.tsx
@@ -8,6 +8,7 @@ describe('SplitButton', () => {
isConformant({
Component: SplitButton,
displayName: 'SplitButton',
+ requiredProps: { children: 'Action' },
});
it('renders both the primary action button and the menu button', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ColorSwatch/ColorSwatch.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ColorSwatch/ColorSwatch.test.tsx
index 3ada7f41c6b38..4e5c8b29e801b 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ColorSwatch/ColorSwatch.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ColorSwatch/ColorSwatch.test.tsx
@@ -8,6 +8,11 @@ describe('ColorSwatch', () => {
isConformant({
Component: ColorSwatch,
displayName: 'ColorSwatch',
+ requiredProps: { color: '#f09', value: 'pink', 'aria-label': 'Pink' },
+ renderOptions: {
+ wrapper: ({ children }) => {children},
+ },
+ getTargetElement: result => result.getByRole('radio'),
disabledTests: ['has-top-level-file-extra'],
});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/EmptySwatch/EmptySwatch.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/EmptySwatch/EmptySwatch.test.tsx
index ee7adf43040ff..136063b65f7ec 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/EmptySwatch/EmptySwatch.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/EmptySwatch/EmptySwatch.test.tsx
@@ -4,7 +4,12 @@ import { isConformant } from '../../../testing/isConformant';
import { EmptySwatch } from './EmptySwatch';
describe('EmptySwatch', () => {
- isConformant({ Component: EmptySwatch, displayName: 'EmptySwatch', disabledTests: ['has-top-level-file-extra'] });
+ isConformant({
+ Component: EmptySwatch,
+ displayName: 'EmptySwatch',
+ requiredProps: { 'aria-label': 'Empty' },
+ disabledTests: ['has-top-level-file-extra'],
+ });
it('renders a native radio swatch with state attributes', () => {
const swatch = render().getByRole('radio');
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ImageSwatch/ImageSwatch.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ImageSwatch/ImageSwatch.test.tsx
index 8e6f342d5933c..6807bf71a11ba 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ImageSwatch/ImageSwatch.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/ImageSwatch/ImageSwatch.test.tsx
@@ -5,7 +5,16 @@ import { ImageSwatch } from './ImageSwatch';
import { SwatchPicker } from '../SwatchPicker';
describe('ImageSwatch', () => {
- isConformant({ Component: ImageSwatch, displayName: 'ImageSwatch', disabledTests: ['has-top-level-file-extra'] });
+ isConformant({
+ Component: ImageSwatch,
+ displayName: 'ImageSwatch',
+ requiredProps: { src: 'image.png', value: 'image', 'aria-label': 'Image' },
+ renderOptions: {
+ wrapper: ({ children }) => {children},
+ },
+ getTargetElement: result => result.getByRole('radio'),
+ disabledTests: ['has-top-level-file-extra'],
+ });
it('renders an image swatch with its selection state', () => {
const { getByRole } = render(, {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/SwatchPickerRow/SwatchPickerRow.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/SwatchPickerRow/SwatchPickerRow.test.tsx
index 1d0ab0d80a027..1e16f4dd24785 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/SwatchPickerRow/SwatchPickerRow.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/SwatchPickerRow/SwatchPickerRow.test.tsx
@@ -2,11 +2,29 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import { isConformant } from '../../../testing/isConformant';
import { SwatchPickerRow } from './SwatchPickerRow';
+import { ColorSwatch } from '../ColorSwatch/ColorSwatch';
+import { SwatchPicker } from '../SwatchPicker';
describe('SwatchPickerRow', () => {
isConformant({
Component: SwatchPickerRow,
displayName: 'SwatchPickerRow',
+ requiredProps: {
+ children: (
+ <>
+
+
+
+ ),
+ },
+ renderOptions: {
+ wrapper: ({ children }) => (
+
+ {children}
+
+ ),
+ },
+ getTargetElement: result => result.getByRole('row'),
disabledTests: ['has-top-level-file-extra'],
});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Switch/Switch.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Switch/Switch.test.tsx
index 2553afa0002a4..ea7ad4e9b9802 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Switch/Switch.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Switch/Switch.test.tsx
@@ -8,6 +8,7 @@ describe('Switch', () => {
Component: Switch,
displayName: 'Switch',
primarySlot: 'input',
+ requiredProps: { label: 'Switch' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Textarea/Textarea.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Textarea/Textarea.test.tsx
index 3e27d494a4bbe..a9fa347ec910a 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Textarea/Textarea.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Textarea/Textarea.test.tsx
@@ -8,6 +8,7 @@ describe('Textarea', () => {
Component: Textarea,
displayName: 'Textarea',
primarySlot: 'textarea',
+ requiredProps: { 'aria-label': 'Text' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx
index 8c7b3e36b594f..8b9eeb6e9177a 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx
@@ -38,6 +38,10 @@ describe('ToastContainer', () => {
Component: ToastContainer,
displayName: 'ToastContainer',
requiredProps: defaultToastContainerProps,
+ axeRenderOptions: {
+ // ToastContainer is a list of toasts, so we need to wrap it in a list for accessibility.
+ wrapper: ({ children }) => {children}
,
+ },
disabledTests: [
// Callback argument signature includes toast metadata from ToastData.
'consistent-callback-args',
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/ToggleButton/ToggleButton.test.tsx
index 6a92bba543142..97810a79fe418 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/ToggleButton/ToggleButton.test.tsx
@@ -7,6 +7,7 @@ describe('ToggleButton', () => {
isConformant({
Component: ToggleButton,
displayName: 'ToggleButton',
+ requiredProps: { children: 'Toggle' },
});
it('renders a default state', () => {
diff --git a/packages/react-components/react-headless-components-preview/library/src/testing/isConformant.ts b/packages/react-components/react-headless-components-preview/library/src/testing/isConformant.ts
index 6be6f0142cf42..47453e7c56e56 100644
--- a/packages/react-components/react-headless-components-preview/library/src/testing/isConformant.ts
+++ b/packages/react-components/react-headless-components-preview/library/src/testing/isConformant.ts
@@ -1,5 +1,21 @@
+import * as React from 'react';
+import { render, type RenderOptions } from '@testing-library/react';
import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
import type { IsConformantOptions } from '@fluentui/react-conformance';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+type HeadlessIsConformantOptions = Omit, 'componentPath'> & {
+ /**
+ * Path to component file. This is optional because the test file is usually in the same folder as the component file.
+ */
+ componentPath?: string;
+ /**
+ * Custom render options applied only to the axe test.
+ */
+ axeRenderOptions?: RenderOptions;
+};
function kebabCase(str: string): string {
return str
@@ -8,9 +24,8 @@ function kebabCase(str: string): string {
.toLowerCase();
}
-export function isConformant(
- testInfo: Omit, 'componentPath'> & { componentPath?: string },
-): void {
+export function isConformant(testInfo: HeadlessIsConformantOptions): void {
+ const { axeRenderOptions, ...baseTestInfo } = testInfo;
const name = kebabCase(testInfo.displayName);
const defaultOptions: Partial> = {
@@ -26,6 +41,16 @@ export function isConformant(
],
disableTypeTests: true,
extraTests: {
+ 'component-has-no-axe-violations': ({ Component, requiredProps, renderOptions }: IsConformantOptions) => {
+ it('has no axe violations (component-has-no-axe-violations)', async () => {
+ const { container } = render(
+ React.createElement(Component as React.ComponentType>, requiredProps),
+ { ...renderOptions, ...axeRenderOptions },
+ );
+
+ expect(await axe(container)).toHaveNoViolations();
+ });
+ },
'has-top-level-file-extra': ({ displayName, Component }: IsConformantOptions) => {
it(`has corresponding top-level file 'src/${name}.ts' (has-top-level-file)`, () => {
const topLevelFile = require(`../${name}.ts`);
@@ -53,5 +78,5 @@ export function isConformant(
},
};
- baseIsConformant(defaultOptions, testInfo);
+ baseIsConformant(defaultOptions, baseTestInfo);
}