@db-ux/ngx-core-components 3.1.19 → 3.1.20

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @db-ux/ngx-core-components
 
+## 3.1.20
+
+### Patch Changes
+
+- fix(input): iOS Safari VoiceOver bug for types `date`, `datetime-local`, `week`, `month`, `time` and `color` - [see commit 2ca96c8](https://github.com/db-ux-design-system/core-web/commit/2ca96c8852b7413f9a3281d69e9c4fc6f79c4f13)
+
 ## 3.1.19
 
 _version bump_
 
-
 ## 3.1.18
 
 ### Patch Changes

package/components/input/input.d.ts

@@ -84,6 +84,7 @@ export declare class DBInput implements AfterViewInit, ControlValueAccessor {
     handleBlur(event: InteractionEvent<HTMLInputElement> | any): void;
     handleFocus(event: InteractionEvent<HTMLInputElement> | any): void;
     getDataList(): ValueLabelType[];
+    isIOSSafari(): boolean;
     trackByOption0(_: number, option: any): string;
     constructor(renderer: Renderer2);
     /**

package/components/input/model.d.ts

@@ -43,8 +43,8 @@ export type DBInputDefaultProps = {
      */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     /**
-    * The size of the message infotext. Defaults to "small".
-    */
+     * The size of the message infotext. Defaults to "small".
+     */
     messageSize?: SizeType;
     /**
      * The size of the valid message infotext. Defaults to "small".
@@ -59,5 +59,6 @@ export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & I
 export type DBInputDefaultState = {
     _dataListId?: string;
     getDataList: () => ValueLabelType[];
+    isIOSSafari: () => boolean;
 };
 export type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState;

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -2159,6 +2159,16 @@ class DBInput {
             }))
             : _list) || []);
     }
+    isIOSSafari() {
+        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;
+    }
     trackByOption0(_, option) {
         return this._dataListId() + "-option-" + option.value;
     }
@@ -2390,6 +2400,7 @@ class DBInput {
       (focus)="handleFocus($event)"
       [attr.list]="dataList() && _dataListId()"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
+      [attr.role]="['datetime-local', 'date', 'time', 'week', 'month', 'color'].includes(type() ?? '') && isIOSSafari() ? 'textbox' : undefined"
     />
     @if(dataList()){
     <datalist [attr.id]="_dataListId()">
@@ -2477,6 +2488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
       (focus)="handleFocus($event)"
       [attr.list]="dataList() && _dataListId()"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
+      [attr.role]="['datetime-local', 'date', 'time', 'week', 'month', 'color'].includes(type() ?? '') && isIOSSafari() ? 'textbox' : undefined"
     />
     @if(dataList()){
     <datalist [attr.id]="_dataListId()">