test: write test for required inputs to read messages

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -7,7 +7,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBCheckboxProps, DBCheckboxState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls, delay, hasVoiceOver, uuid } from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -33,6 +33,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_validMessageId: this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX,
 		_invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 		_descByIds: '',
+		_voiceOverFallback: '',
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -46,11 +47,23 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			/* For a11y reasons we need to map the correct message with the checkbox */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.invalidMessage ??
+						ref?.validationMessage ??
+						DEFAULT_INVALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (
 				props.customValidity === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.validMessage ?? DEFAULT_VALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (props.message) {
 				state._descByIds = state._messageId;
 			} else {
@@ -179,6 +192,13 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
+
+			{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+			 * Currently VoiceOver isn't supporting changes from aria-describedby.
+			 * This is an internal Fallback */}
+			<span data-visually-hidden="true" role="status">
+				{state._voiceOverFallback}
+			</span>
 		</div>
 	);
 }

packages/components/src/components/drawer/drawer.lite.tsx

@@ -10,7 +10,7 @@ import {
 import { DBDrawerProps, DBDrawerState } from './model';
 import { DBButton } from '../button';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
-import { cls } from '../../utils';
+import { cls, delay } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -54,7 +54,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = true;
 					}
-					setTimeout(() => {
+					delay(() => {
 						if (dialogContainerRef) {
 							dialogContainerRef.hidden = false;
 						}

packages/components/src/components/input/input.lite.tsx

@@ -7,7 +7,7 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { cls, isArrayOfStrings, uuid } from '../../utils';
+import { cls, delay, hasVoiceOver, isArrayOfStrings, uuid } from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
 	DEFAULT_DATALIST_ID_SUFFIX,
@@ -42,6 +42,7 @@ export default function DBInput(props: DBInputProps) {
 		_dataListId: this._id + DEFAULT_DATALIST_ID_SUFFIX,
 		_descByIds: '',
 		_value: '',
+		_voiceOverFallback: '',
 		defaultValues: {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
@@ -69,6 +70,13 @@ export default function DBInput(props: DBInputProps) {
 			/* For a11y reasons we need to map the correct message with the input */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.invalidMessage ??
+						ref?.validationMessage ??
+						DEFAULT_INVALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (
 				props.customValidity === 'valid' ||
 				(ref?.validity.valid &&
@@ -78,6 +86,11 @@ export default function DBInput(props: DBInputProps) {
 						props.pattern))
 			) {
 				state._descByIds = state._validMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.validMessage ?? DEFAULT_VALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (props.message) {
 				state._descByIds = state._messageId;
 			} else {
@@ -230,6 +243,13 @@ export default function DBInput(props: DBInputProps) {
 					ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
+
+			{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+			 * Currently VoiceOver isn't supporting changes from aria-describedby.
+			 * This is an internal Fallback */}
+			<span data-visually-hidden="true" role="status">
+				{state._voiceOverFallback}
+			</span>
 		</div>
 	);
 	// jscpd:ignore-end

packages/components/src/components/select/select.lite.tsx

@@ -8,7 +8,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls, delay, hasVoiceOver, uuid } from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -47,6 +47,7 @@ export default function DBSelect(props: DBSelectProps) {
 		_descByIds: '',
 		_value: '',
 		initialized: false,
+		_voiceOverFallback: '',
 		handleClick: (event: ClickEvent<HTMLSelectElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -75,11 +76,23 @@ export default function DBSelect(props: DBSelectProps) {
 			/* For a11y reasons we need to map the correct message with the select */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.invalidMessage ??
+						ref?.validationMessage ??
+						DEFAULT_INVALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (
 				props.customValidity === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.validMessage ?? DEFAULT_VALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (props.message) {
 				state._descByIds = state._messageId;
 			} else {
@@ -156,7 +169,7 @@ export default function DBSelect(props: DBSelectProps) {
 				name={props.name}
 				value={props.value ?? state._value}
 				autocomplete={props.autocomplete}
-				onInput={(event: ChangeEvent<HTMLInputElement>) =>
+				onInput={(event: ChangeEvent<HTMLSelectElement>) =>
 					state.handleInput(event)
 				}
 				onClick={(event: ClickEvent<HTMLSelectElement>) =>
@@ -243,6 +256,13 @@ export default function DBSelect(props: DBSelectProps) {
 					ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
+
+			{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+			 * Currently VoiceOver isn't supporting changes from aria-describedby.
+			 * This is an internal Fallback */}
+			<span data-visually-hidden="true" role="status">
+				{state._voiceOverFallback}
+			</span>
 		</div>
 	);
 	// jscpd:ignore-end

packages/components/src/components/textarea/textarea.lite.tsx

@@ -8,7 +8,7 @@ import {
 } from '@builder.io/mitosis';
 import { DBTextareaProps, DBTextareaState } from './model';
 import { DBInfotext } from '../infotext';
-import { cls, uuid } from '../../utils';
+import { cls, delay, hasVoiceOver, uuid } from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -40,6 +40,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			placeholder: ' ',
 			rows: '4'
 		},
+		_voiceOverFallback: '',
 		handleInput: (event: InputEvent<HTMLTextAreaElement>) => {
 			if (props.onInput) {
 				props.onInput(event);
@@ -63,12 +64,24 @@ export default function DBTextarea(props: DBTextareaProps) {
 			/* For a11y reasons we need to map the correct message with the textarea */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.invalidMessage ??
+						ref?.validationMessage ??
+						DEFAULT_INVALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (
 				props.customValidity === 'valid' ||
 				(ref?.validity.valid &&
 					(props.required || props.minLength || props.maxLength))
 			) {
 				state._descByIds = state._validMessageId;
+				if (hasVoiceOver()) {
+					state._voiceOverFallback =
+						props.validMessage ?? DEFAULT_VALID_MESSAGE;
+					delay(() => (state._voiceOverFallback = ''), 1000);
+				}
 			} else if (props.message) {
 				state._descByIds = state._messageId;
 			} else {
@@ -143,7 +156,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				wrap={props.wrap}
 				spellcheck={props.spellCheck}
 				autocomplete={props.autocomplete}
-				onInput={(event: ChangeEvent<HTMLInputElement>) =>
+				onInput={(event: ChangeEvent<HTMLTextAreaElement>) =>
 					state.handleInput(event)
 				}
 				onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
@@ -188,6 +201,13 @@ export default function DBTextarea(props: DBTextareaProps) {
 					ref?.validationMessage ??
 					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
+
+			{/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+			 * Currently VoiceOver isn't supporting changes from aria-describedby.
+			 * This is an internal Fallback */}
+			<span data-visually-hidden="true" role="status">
+				{state._voiceOverFallback}
+			</span>
 		</div>
 	);
 	// jscpd:ignore-end

packages/components/src/shared/model.ts

@@ -355,6 +355,13 @@ export type FormState = {
 	_invalidMessageId?: string;
 	_descByIds?: string;
 	_value?: string;
+
+	/**
+	 * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html
+	 * Currently VoiceOver isn't supporting changes from aria-describedby.
+	 * This is an internal Fallback
+	 */
+	_voiceOverFallback?: string;
 };
 
 export type InitializedState = {

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

@@ -7,6 +7,8 @@
 @use "@db-ui/foundations/build/scss/helpers";
 @use "component";
 
+@forward "visually-hidden";
+
 $dropdown-icon-transition: transform variables.$db-transition-straight-emotional;
 $dropdown-icon-transform: rotate(-180deg);
 

packages/components/src/styles/visually-hidden.scss

@@ -0,0 +1,6 @@
+@use "@db-ui/foundations/build/scss/helpers";
+
+.db-visually-hidden,
+[data-visually-hidden="true"] {
+	@extend %a11y-visually-hidden;
+}

packages/components/src/utils/index.ts

@@ -194,6 +194,14 @@ export const handleDataOutside = (el: Element): DBDataOutsidePair => {
 export const isArrayOfStrings = (value: unknown): value is string[] =>
 	Array.isArray(value) && value.every((item) => typeof item === 'string');
 
+const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
+export const hasVoiceOver = (): boolean =>
+	typeof window !== 'undefined' &&
+	appleOs.some((os) => window.navigator.userAgent.includes(os));
+
+export const delay = (fn: () => void, ms: number) =>
+	new Promise(() => setTimeout(fn, ms));
+
 export default {
 	filterPassingProps,
 	cls,
@@ -203,5 +211,7 @@ export default {
 	visibleInVY,
 	isInView,
 	handleDataOutside,
-	isArrayOfStrings
+	isArrayOfStrings,
+	hasVoiceOver,
+	delay
 };

packages/foundations/scss/helpers/_a11y.scss

@@ -1,8 +1,17 @@
 %a11y-visually-hidden {
-	clip: rect(0, 0, 0, 0);
-	block-size: 1px;
-	overflow: hidden;
+	clip: rect(0, 0, 0, 0) !important;
+	overflow: hidden !important;
+	white-space: nowrap !important;
+	font-size: 0 !important;
+	all: initial;
+	inset-block-start: 0 !important;
+	block-size: 1px !important;
 	position: absolute !important;
-	white-space: nowrap;
-	inline-size: 1px;
+	inline-size: 1px !important;
+	border-width: 0 !important;
+	border-style: initial !important;
+	border-color: initial !important;
+	border-image: initial !important;
+	padding: 0 !important;
+	pointer-events: none !important;
 }

showcases/screen-reader/__snapshots__/macos/webkit/DBInput-required-1.txt

@@ -0,0 +1 @@
+["Label * Label* Required required edit text","TODO: Add a validMessage. Test","Test selected","Test. Fill out this field","TODO: Add a validMessage. Test"]

showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.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,20 +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'],
-	unknown: ['Unbekannt'],
-	dialog: ['Dialogfeld'],
-	document: ['Dokument']
-};
+import { translations } from './translations';
 
 const standardPhrases = [
 	'You are currently',