fix(input): iOS Safari VoiceOver bug for date, time and color related types (#5207)

* fix: iOS Safari Voiceover input type date bug

* Apply suggestion from @mfranzke

* Apply suggestion from @mfranzke

* Apply suggestion from @mfranzke

* Apply suggestion from @mfranzke

* Fix iOS Safari Voiceover bug for date and time inputs

* fix: moved this code

* auto update snapshots (#5208)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update input.lite.tsx

* auto update snapshots (#5209)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply suggestion from @mfranzke

* Apply suggestion from @mfranzke

* Update .changeset/breezy-flies-burn.md

* fix: angular build

* auto update snapshots (#5210)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update input.lite.tsx

* auto update snapshots (#5211)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* refactor: added missing types

* Apply suggestions from code review

* Apply suggestions from code review

* Apply suggestions from code review

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

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: mfranzke

.changeset/breezy-flies-burn.md

@@ -0,0 +1,9 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/v-core-components": patch
+"@db-ux/wc-core-components": patch
+---
+
+fix(input): iOS Safari VoiceOver bug for types `date`, `datetime-local`, `week`, `month` or `time`

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

@@ -159,6 +159,22 @@ export default function DBInput(props: DBInputProps) {
 						}))
 					: _list) || []
 			);
+		},
+		// iOS Safari VoiceOver input:is([type="date"], [type="datetime-local"], [type="time"], [type="week"], [type="month"], [type="color"]) hack
+		// TODO: We could remove this one again, after https://bugs.webkit.org/show_bug.cgi?id=294649 (mentioned in https://github.com/facebook/react/issues/33541) has been resolved.
+		isIOSSafari: (): boolean => {
+			if (
+				typeof window === 'undefined' ||
+				typeof navigator === 'undefined'
+			)
+				return false;
+			const ua = navigator.userAgent;
+			// iOS detection
+			const isIOS = /iP(ad|hone|od)/.test(ua);
+			// Safari detection (not Chrome or Firefox on iOS)
+			const isSafari =
+				!!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
+			return isIOS && isSafari;
 		}
 	});
 
@@ -260,6 +276,15 @@ export default function DBInput(props: DBInputProps) {
 				}
 				list={props.dataList && state._dataListId}
 				aria-describedby={props.ariaDescribedBy ?? state._descByIds}
+				// iOS Safari VoiceOver input:is([type="date"], [type="datetime-local"], [type="time"], [type="week"], [type="month"], [type="color"]) hack
+				// TODO: We could remove this one again, after https://bugs.webkit.org/show_bug.cgi?id=294649 (mentioned in https://github.com/facebook/react/issues/33541) has been resolved.
+				role={
+					['datetime-local', 'date', 'time', 'week', 'month', 'color'].includes(
+						props.type ?? ''
+					) && state.isIOSSafari()
+						? 'textbox'
+						: undefined
+				}
 			/>
 			<Show when={props.dataList}>
 				<datalist id={state._dataListId}>

packages/components/src/components/input/model.ts

@@ -100,7 +100,7 @@ export type DBInputDefaultProps = {
 		| 'search'
 		| 'email'
 		| 'url';
-  /**
+	/**
 	 * The size of the message infotext. Defaults to "small".
 	 */
 	messageSize?: SizeType;
@@ -133,6 +133,7 @@ export type DBInputProps = DBInputDefaultProps &
 export type DBInputDefaultState = {
 	_dataListId?: string;
 	getDataList: () => ValueLabelType[];
+	isIOSSafari: () => boolean;
 };
 
 export type DBInputState = DBInputDefaultState &