Merge pull request #3005 from db-ui/test-guidepup-checkbox

test: adds guidepup test for checkbox

packages/components/src/styles/_form-components.scss

@@ -265,9 +265,8 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		&:is(label),
 		label {
 			&::after {
-				content: "*";
-				// Hiding asterisk from screenreaders, https://www.w3.org/TR/css-content-3/#alt
-				content: "*" / "";
+				@include icons.icon-content("*");
+
 				padding-inline-start: variables.$db-spacing-fixed-2xs;
 			}
 		}

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

@@ -0,0 +1 @@
+["Required required unchecked checkbox","Required","Required - Indeterminate mixed checkbox","Required","Required required unchecked checkbox","TODO: Add a validMessage","Required","TODO: Add a validMessage","Required - Indeterminate mixed checkbox","TODO: Add a validMessage","Required","Required TODO: Add a validMessage required checked checkbox","Select this checkbox","Required","Select this checkbox","Required - Indeterminate mixed checkbox"]

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

@@ -0,0 +1 @@
+["check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","TODO: Add a valid Message","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed.","check box, half checked, Required Indeterminate"]

showcases/screen-reader/default.ts

@@ -32,18 +32,29 @@ const standardPhrases = [
 	'To expand'
 ];
 
+const flakyExpressions: Record<string, string> = {
+	'pop-up': 'pop up',
+	'checked. checked': 'checked',
+	'selected. selected': 'selected'
+};
+
 const cleanSpeakInstructions = (phraseLog: string[]): string[] =>
-	phraseLog.map((phrase) =>
-		phrase
+	phraseLog.map((phrase) => {
+		let result = phrase
 			.split('. ')
 			.filter(
 				(sPhrase) =>
 					!standardPhrases.some((string) => sPhrase.includes(string))
 			)
-			.join('. ')
-			// We need to replace specific phrases, as they are being reported differently on localhost and within CI/CD
-			.replaceAll('pop-up', 'pop up')
-	);
+			.join('. ');
+
+		// We need to replace specific phrases, as they are being reported differently on localhost and within CI/CD
+		for (const [key, value] of Object.entries(flakyExpressions)) {
+			result = result.replaceAll(key, value);
+		}
+
+		return result;
+	});
 
 export const generateSnapshot = async (
 	screenReader?: VoiceOverPlaywright | NVDAPlaywright,

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

@@ -0,0 +1,48 @@
+import { getTest, testDefault } from '../default';
+
+const test = getTest();
+
+test.describe('DBCheckbox', () => {
+	testDefault({
+		test,
+		title: 'default',
+		description:
+			'should tick and untick checkbox, feedback messages must appear',
+		url: './#/03/checkbox?page=requirement',
+		async testFn(voiceOver, nvda) {
+			if (nvda) {
+				await nvda?.next(); // Focus checkbox 2
+				await nvda?.act(); // Tick checkbox 2
+				await nvda?.next(); // Focus checkbox 2 label
+				await nvda?.next(); // Focus checkbox 2 message
+				await nvda?.previous(); // Focus checkbox 2 label
+				await nvda?.previous(); // Focus checkbox 2
+				await nvda?.act(); // Tick checkbox 2
+				await nvda?.next(); // Focus checkbox 2 label
+				await nvda?.next(); // Focus checkbox 2 message
+				await nvda?.next(); // Focus checkbox 3
+			} else if (voiceOver) {
+				await voiceOver?.next(); // Focus checkbox 1
+				await voiceOver?.next(); // Focus checkbox 1 label
+				await voiceOver?.clearSpokenPhraseLog();
+
+				await voiceOver?.next(); // Focus checkbox 2
+				await voiceOver?.next(); // Focus checkbox 2 label
+				await voiceOver?.next(); // Focus checkbox 3
+				await voiceOver?.previous(); // Focus checkbox 2 label
+				await voiceOver?.previous(); // Focus checkbox 2
+				await voiceOver?.act(); // Tick checkbox 2
+				await voiceOver?.next(); // Focus checkbox 2 label
+				await voiceOver?.next(); // Focus checkbox 2 message
+				await voiceOver?.next(); // Focus checkbox 3
+				await voiceOver?.previous(); // Focus checkbox 2 message
+				await voiceOver?.previous(); // Focus checkbox 2 label
+				await voiceOver?.previous(); // Focus checkbox 2
+				await voiceOver?.act(); // Tick checkbox 2
+				await voiceOver?.next(); // Focus checkbox 2 label
+				await voiceOver?.next(); // Focus checkbox 2 message
+				await voiceOver?.next(); // Focus checkbox 3
+			}
+		}
+	});
+});

showcases/screen-reader/translations.ts

@@ -4,6 +4,8 @@ export const translations: Record<string, string[]> = {
 	edit: ['Eingabefeld'],
 	'radio button': ['Auswahlschalter'],
 	blank: ['Leer'],
+	not: ['Nicht'],
+	'half checked': ['teilweise aktiviert'],
 	checked: ['aktiviert'],
 	' of ': [' von '],
 	clickable: ['anklickbar'],
@@ -17,6 +19,7 @@ export const translations: Record<string, string[]> = {
 	dialog: ['Dialogfeld'],
 	document: ['Dokument'],
 	unavailable: ['nicht verfügbar'],
+	'check box': ['Kontrollfeld'],
 	collapsed: ['reduziert'],
 	expanded: ['erweitert']
 };