test(guidepup): accordion

showcases/screen-reader/README.md

@@ -1,14 +1,25 @@
 # Screen Automated Reader (ScAR 🦁🔥💀)
 
+## 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:
 
-## 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-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt

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

showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt

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

showcases/screen-reader/default.ts

@@ -41,7 +41,8 @@ const cleanSpeakInstructions = (phraseLog: string[]): string[] =>
 						sPhrase.includes('To click') ||
 						sPhrase.includes('To select') ||
 						sPhrase.includes('To interact') ||
-						sPhrase.includes('Press Control')
+						sPhrase.includes('Press Control') ||
+						sPhrase.includes('To expand')
 					)
 			)
 			.join('. ')

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

@@ -0,0 +1,53 @@
+import { getTest, testDefault } from '../default';
+
+const test = getTest();
+
+test.describe('DBAccordion', () => {
+	testDefault({
+		test,
+		title: 'should open two items while both remain unfolded (next)',
+		url: './#/04/accordion?page=behaviour',
+		async testFn(voiceOver, nvda) {
+			if (nvda) {
+				await nvda?.next();
+			}
+
+			const screenReader = voiceOver ?? nvda;
+			await screenReader?.clearSpokenPhraseLog();
+			await screenReader?.next(); // Focus: "item 1"
+			await screenReader?.act(); // Interact: "item 1"
+			await screenReader?.next(); // Focus: "content 1"
+			await screenReader?.next(); // Focus: "item 2"
+			await screenReader?.act(); // Interact: "item 2"
+			await screenReader?.next(); // Focus: "content 2"
+			await screenReader?.previous(); // Focus: "item 2"
+			await screenReader?.previous(); // Focus: "content 1"
+			await screenReader?.previous(); // Focus: "item 1"
+		}
+	});
+	testDefault({
+		test,
+		title: 'one item should open, then the next, whereby the first should then close automatically (next)',
+		url: './#/04/accordion?page=behaviour',
+		async testFn(voiceOver, nvda) {
+			if (nvda) {
+				await nvda?.next();
+			}
+
+			const screenReader = voiceOver ?? nvda;
+			await screenReader?.next();
+			await screenReader?.next();
+			await screenReader?.next();
+			await screenReader?.next();
+			await screenReader?.clearSpokenPhraseLog();
+			await screenReader?.next(); // Focus example "Single","Item 1"
+			await screenReader?.act(); // Interact: "item 1"
+			await screenReader?.next(); // Focus: "content 1"
+			await screenReader?.next(); // Focus: "item 2"
+			await screenReader?.act(); // Interact: "item 2"
+			await screenReader?.next(); // Focus: "content 2"
+			await screenReader?.previous(); // Focus: "item 2"
+			await screenReader?.previous(); // Focus: "item 1"
+		}
+	});
+});