test(guidepup): accordion

showcases/screen-reader/README.md

@@ -1,14 +1,25 @@
 # Screen Automated Reader Enhanced Development (scare devs 🦁🔥💀)
 
+## Install
+
+```shell
+npx playwright install
+npx @guidepup/setup
+```
+
+If errors occur after the automatic setup of Guidepup (e.g. no connection to Voiceover), the setup must be executed manually. See [instructions](https://www.guidepup.dev/docs/guides/manual-voiceover-setup).
+
+## Start
+
 Start a test with these commands (ensure a build or start a watcher previous to running these commands to ensure that any expected changes within the code base will be reflected):
 
-## MacOS
+### MacOS
 
 ```shell
 npm run test:screen-reader:macos --workspace=react-showcase -- --ui
 ```
 
-## Windows
+### Windows
 
 ```shell
 npm run test:screen-reader:windows --workspace=react-showcase -- --ui

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

@@ -0,0 +1 @@
+["Item 1 collapsed summary","Item 2 collapsed summary","Item 1 collapsed summary","","Content 1","Item 2 collapsed summary"]

showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-default-1.txt

@@ -0,0 +1 @@
+["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","button, collapsed, Item 3"]

showcases/screen-reader/default.ts

@@ -25,7 +25,8 @@ const standardPhrases = [
 	'Press Control',
 	'To begin interacting',
 	'To display a',
-	'To move between items'
+	'To move between items',
+	'To expand'
 ];
 
 const cleanSpeakInstructions = (phraseLog: string[]): string[] =>

showcases/screen-reader/tests/accordion.spec.ts

@@ -0,0 +1,43 @@
+import type { NVDAPlaywright, VoiceOverPlaywright } from '@guidepup/playwright';
+import { generateSnapshot, getTest, testDefault } from '../default';
+
+const test = getTest();
+
+const postTestFn = async (
+	voiceOver?: VoiceOverPlaywright,
+	nvda?: NVDAPlaywright,
+	retry?: number
+) => {
+	if (nvda) {
+		/*
+		 * There is an issue with nvda duplicating expanded sometimes
+		 */
+		await generateSnapshot(nvda, retry, (phraseLog) =>
+			phraseLog.map((log) =>
+				log.replace('expanded. expanded', 'expanded')
+			)
+		);
+	} else if (voiceOver) {
+		await generateSnapshot(voiceOver, retry);
+	}
+};
+
+test.describe('DBAccordion', () => {
+	testDefault({
+		test,
+		title: 'default',
+		description: 'should open first item (next)',
+		url: './#/04/accordion?page=behaviour',
+		async testFn(voiceOver, nvda) {
+			const screenReader = voiceOver ?? nvda;
+			await screenReader?.clearSpokenPhraseLog();
+			await screenReader?.next(); // Focus: "item 1"
+			await screenReader?.next(); // Focus: "item 2"
+			await screenReader?.previous(); // Focus: "item 1"
+			await screenReader?.act(); // Interact: "item 1"
+			await screenReader?.next(); // Focus: "content 1"
+			await screenReader?.next(); // Focus: "item 2"
+		},
+		postTestFn
+	});
+});

showcases/screen-reader/translations.ts

@@ -16,5 +16,7 @@ export const translations: Record<string, string[]> = {
 	unknown: ['Unbekannt'],
 	dialog: ['Dialogfeld'],
 	document: ['Dokument'],
-	unavailable: ['nicht verfügbar']
+	unavailable: ['nicht verfügbar'],
+	collapsed: ['reduziert'],
+	expanded: ['erweitert']
 };