test: write test for required inputs to read messages

showcases/screen-reader/__snapshots__/windows/chromium/DBInput-should-inform-user-for-changes.txt

@@ -0,0 +1 @@
+["Label star, edit, required, Required, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"]

showcases/screen-reader/default.ts

@@ -13,17 +13,7 @@ import {
 	type RunTestType,
 	type ScreenReaderTestType
 } from './data';
-
-const translations: Record<string, string[]> = {
-	button: ['Schalter'],
-	edit: ['Eingabefeld'],
-	'radio button': ['Auswahlschalter'],
-	blank: ['Leer'],
-	checked: ['aktiviert'],
-	' of ': [' von '],
-	clickable: ['anklickbar'],
-	'has auto complete': ['mit Auto Vervollständigung']
-};
+import { translations } from './translations';
 
 const cleanSpeakInstructions = (phraseLog: string[]): string[] =>
 	phraseLog.map((phrase) =>

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

@@ -21,7 +21,6 @@ test.describe('DBInput', () => {
 			await voiceOver?.next();
 		}
 	});
-	// We don't test default "next" here because we will be locked inside the textarea
 	testDefault({
 		test,
 		title: 'should have message and label (tab)',
@@ -38,4 +37,28 @@ test.describe('DBInput', () => {
 			await nvda?.press('Tab');
 		}
 	});
+	testDefault({
+		test,
+		title: 'should inform user for changes',
+		url: './#/03/input?page=requirement',
+		async testFn(voiceOver, nvda) {
+			if (voiceOver) {
+				/* Goto desired input */
+				await voiceOver?.next();
+				await voiceOver?.next();
+				await voiceOver?.next();
+
+				await voiceOver?.type('Test');
+				await voiceOver?.press('Command+A');
+				await voiceOver?.press('Delete');
+				await voiceOver?.type('Test');
+			} else {
+				await nvda?.press('Tab');
+				await nvda?.type('Test');
+				await nvda?.press('Control+A');
+				await nvda?.press('Delete');
+				await nvda?.type('Test');
+			}
+		}
+	});
 });

showcases/screen-reader/translations.ts

@@ -0,0 +1,16 @@
+export const translations: Record<string, string[]> = {
+	star: ['Stern'],
+	button: ['Schalter'],
+	edit: ['Eingabefeld'],
+	'radio button': ['Auswahlschalter'],
+	blank: ['Leer'],
+	checked: ['aktiviert'],
+	' of ': [' von '],
+	clickable: ['anklickbar'],
+	'has auto complete': ['mit Auto Vervollständigung'],
+	required: ['erforderlich'],
+	'Please fill out this field..': ['Fülle dieses Feld aus..'],
+	unselected: ['nicht ausgewählt'],
+	selected: ['ausgewählt'],
+	'': ['. Nummernblock eingeschaltet']
+};