test(guidepup): 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","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/tests/checkbox.spec.ts

@@ -0,0 +1,46 @@
+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 message
+				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'],
@@ -16,5 +18,6 @@ export const translations: Record<string, string[]> = {
 	unknown: ['Unbekannt'],
 	dialog: ['Dialogfeld'],
 	document: ['Dokument'],
+	'check box': ['Kontrollfeld'],
 	unavailable: ['nicht verfügbar']
 };