chore: add aria snapshot tests

packages/components/src/components/accordion-item/accordion-item.spec.tsx

@@ -20,6 +20,11 @@ const testComponent = () => {
 };
 
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/accordion/accordion.spec.tsx

@@ -98,6 +98,11 @@ const testAction = () => {
 };
 
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/badge/badge.spec.tsx

@@ -19,6 +19,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/brand/brand.spec.tsx

@@ -18,6 +18,11 @@ const testBrand = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/button/button.spec.tsx

@@ -46,6 +46,11 @@ const testButton = () => {
 };
 
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(defaultButton);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/card/card.spec.tsx

@@ -35,6 +35,11 @@ const testCardVariants = () => {
 	}
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(defaultComp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/checkbox/checkbox.spec.tsx

@@ -19,6 +19,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/divider/divider.spec.tsx

@@ -22,6 +22,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/drawer/drawer.spec.tsx

@@ -26,6 +26,11 @@ const testComponent = (viewport) => {
 };
 
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/infotext/infotext.spec.tsx

@@ -33,6 +33,11 @@ const testVariants = () => {
 	}
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/input/input.spec.tsx

@@ -19,6 +19,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/navigation-item/navigation-item.spec.tsx

@@ -31,6 +31,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('DBNavigationItem should not have any automatically detectable accessibility issues', async ({
 		page,
 		mount

packages/components/src/components/navigation/navigation.spec.tsx

@@ -53,6 +53,11 @@ const testComponent = (viewport: any) => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any automatically detectable accessibility issues', async ({
 		page,
 		mount

packages/components/src/components/notification/notification.spec.tsx

@@ -49,6 +49,11 @@ const testAction = () => {
 };
 
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any accessibility issues', async ({
 		page,
 		mount

packages/components/src/components/popover/popover.spec.tsx

@@ -46,6 +46,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/radio/radio.spec.tsx

@@ -19,6 +19,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/select/select.spec.tsx

@@ -24,6 +24,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/tabs/tabs.spec.tsx

@@ -52,6 +52,11 @@ const testActions = () => {
 };
 
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/tag/tag.spec.tsx

@@ -35,6 +35,11 @@ const testVariants = () => {
 	}
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

packages/components/src/components/textarea/textarea.spec.tsx

@@ -19,6 +19,11 @@ const testComponent = () => {
 	});
 };
 const testA11y = () => {
+	test('should have same aria-snapshot', async ({ mount }, testInfo) => {
+		const component = await mount(comp);
+		const snapshot = await component.ariaSnapshot();
+		expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`);
+	});
 	test('should not have any A11y issues', async ({ page, mount }) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })

showcases/screen-reader/__snapshots__/macos/webkit/DBNavigation-default-1.txt

@@ -1 +1 @@
-["Functional navigation","list 3 items","Navi-Item 1 menu pop up button 1 of 3","list 2 items level 2","Sub-Navi-Item 1 menu pop up button 1 of 2","list 2 items level 3","current page link Sub-Sub-Navi-Item 1 1 of 2","link Sub-Sub-Navi-Item 2 2 of 2","end of list","link Sub-Navi-Item 2 2 of 2","end of list","link Navi-Item 2 2 of 3","dimmed link Navi-Item 3 3 of 3. This item is dimmed.","end of list"]
+["Functional navigation","list 3 items","Navi-Item 1 menu pop up button 1 of 3","list 3 items level 2","Back button 1 of 3","Sub-Navi-Item 1 menu pop up button 2 of 3","list 3 items level 3","Back button 1 of 3","current page link Sub-Sub-Navi-Item 1 2 of 3","link Sub-Sub-Navi-Item 2 3 of 3","end of list","link Sub-Navi-Item 2 3 of 3","end of list","link Navi-Item 2 2 of 3"]

showcases/screen-reader/__snapshots__/macos/webkit/DBTabs-default-1.txt

@@ -1 +1 @@
-["Test 1 selected tab","Test 1","Test 2 tab","selected Test 2 tab","Test 2","Test 3 tab","Test 3","on tab panel","Tab Panel 2"]
+["Test 1 selected tab","Test 1","Test 2 tab","selected Test 2 tab","Test 2","Test 3 tab","Test 3","on tab panel","Tab Panel 1"]