tests: Move to snapshots for accessiblity tests

Signed-off-by: Julius Knorr <jus@bitgrid.net>

Author: juliusknorr

playwright/e2e/accessibility.spec.ts

@@ -10,6 +10,7 @@ import { test as uploadFileTest } from '../support/fixtures/upload-file'
 import {
 	formatViolations,
 	getAccessibilitySummary,
+	violationFingerprints,
 } from '../support/utils/accessibility'
 
 const test = mergeTests(accessibilityTest, editorTest, uploadFileTest)
@@ -41,11 +42,11 @@ test.describe('Editor Accessibility', () => {
 			contentType: 'application/json',
 		})
 
-		// Expect no violations
+		// Snapshot test for violations to track changes over time
 		expect(
-			accessibilityScanResults.violations,
+			violationFingerprints(accessibilityScanResults),
 			formatViolations(accessibilityScanResults),
-		).toEqual([])
+		).toMatchSnapshot('accessibility-violations.json')
 	})
 
 	test('should not have accessibility violations in the editor content area', async ({
@@ -71,9 +72,9 @@ test.describe('Editor Accessibility', () => {
 		})
 
 		expect(
-			accessibilityScanResults.violations,
+			violationFingerprints(accessibilityScanResults),
 			formatViolations(accessibilityScanResults),
-		).toEqual([])
+		).toMatchSnapshot('editor-content-violations.json')
 	})
 
 	test('should not have accessibility violations in the menu bar', async ({
@@ -97,9 +98,9 @@ test.describe('Editor Accessibility', () => {
 		})
 
 		expect(
-			accessibilityScanResults.violations,
+			violationFingerprints(accessibilityScanResults),
 			formatViolations(accessibilityScanResults),
-		).toEqual([])
+		).toMatchSnapshot('menubar-violations.json')
 	})
 
 	test('should have proper keyboard navigation support', async ({
@@ -125,9 +126,9 @@ test.describe('Editor Accessibility', () => {
 
 		// Check that interactive elements are keyboard accessible
 		expect(
-			accessibilityScanResults.violations,
+			violationFingerprints(accessibilityScanResults),
 			formatViolations(accessibilityScanResults),
-		).toEqual([])
+		).toMatchSnapshot('keyboard-navigation-violations.json')
 	})
 
 	test('should have proper ARIA labels on interactive elements', async ({
@@ -156,9 +157,9 @@ test.describe('Editor Accessibility', () => {
 		})
 
 		expect(
-			accessibilityScanResults.violations,
+			violationFingerprints(accessibilityScanResults),
 			formatViolations(accessibilityScanResults),
-		).toEqual([])
+		).toMatchSnapshot('aria-labels-violations.json')
 	})
 
 	test('should maintain accessibility after text formatting', async ({
@@ -191,8 +192,8 @@ test.describe('Editor Accessibility', () => {
 		})
 
 		expect(
-			accessibilityScanResults.violations,
+			violationFingerprints(accessibilityScanResults),
 			formatViolations(accessibilityScanResults),
-		).toEqual([])
+		).toMatchSnapshot('formatted-content-violations.json')
 	})
 })

playwright/e2e/accessibility.spec.ts-snapshots/accessibility-violations-chromium-linux.json

@@ -0,0 +1,22 @@
+[
+  {
+    "rule": "aria-input-field-name",
+    "description": "Ensure every ARIA input field has an accessible name",
+    "targets": [
+      [
+        ".tiptap"
+      ]
+    ],
+    "impact": "serious"
+  },
+  {
+    "rule": "label",
+    "description": "Ensure every form element has a label",
+    "targets": [
+      [
+        "input[data-cy-upload-picker-input=\"\"]"
+      ]
+    ],
+    "impact": "critical"
+  }
+]

playwright/e2e/accessibility.spec.ts-snapshots/aria-labels-violations-chromium-linux.json

@@ -0,0 +1,22 @@
+[
+  {
+    "rule": "aria-input-field-name",
+    "description": "Ensure every ARIA input field has an accessible name",
+    "targets": [
+      [
+        ".tiptap"
+      ]
+    ],
+    "impact": "serious"
+  },
+  {
+    "rule": "label",
+    "description": "Ensure every form element has a label",
+    "targets": [
+      [
+        "input[data-cy-upload-picker-input=\"\"]"
+      ]
+    ],
+    "impact": "critical"
+  }
+]

playwright/e2e/accessibility.spec.ts-snapshots/editor-content-violations-chromium-linux.json

@@ -0,0 +1,12 @@
+[
+  {
+    "rule": "aria-input-field-name",
+    "description": "Ensure every ARIA input field has an accessible name",
+    "targets": [
+      [
+        ".tiptap"
+      ]
+    ],
+    "impact": "serious"
+  }
+]

playwright/e2e/accessibility.spec.ts-snapshots/formatted-content-violations-chromium-linux.json

@@ -0,0 +1,12 @@
+[
+  {
+    "rule": "aria-input-field-name",
+    "description": "Ensure every ARIA input field has an accessible name",
+    "targets": [
+      [
+        ".tiptap"
+      ]
+    ],
+    "impact": "serious"
+  }
+]

playwright/e2e/accessibility.spec.ts-snapshots/keyboard-navigation-violations-chromium-linux.json

@@ -0,0 +1,12 @@
+[
+  {
+    "rule": "label",
+    "description": "Ensure every form element has a label",
+    "targets": [
+      [
+        "form > input[multiple=\"multiple\"]"
+      ]
+    ],
+    "impact": "critical"
+  }
+]

playwright/e2e/accessibility.spec.ts-snapshots/menubar-violations-chromium-linux.json

@@ -0,0 +1 @@
+[]

playwright/support/fixtures/accessibility.ts

@@ -20,8 +20,6 @@ export const test = base.extend<AxeFixture>({
 			// See: https://github.com/dequelabs/axe-core-npm/blob/develop/packages/playwright/error-handling.md
 			.setLegacyMode()
 
-			// TODO: Fix these accessibility issues in the application
-			.exclude('input[data-cy-upload-picker-input]') // Upload input needs proper label
 
 		await use(makeAxeBuilder)
 	},