voyager-ionic-core 8.7.1 → 8.7.6

package/dist/collection/components/input/input.js

@@ -39,6 +39,10 @@ export class Input {
          * is applied in both cases.
          */
         this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements
+         */
+        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -223,10 +227,35 @@ export class Input {
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
     }
+    /**
+     * Checks if the input is in an invalid state based on Ionic validation classes
+     */
+    checkInvalidState() {
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        return hasIonTouched && hasIonInvalid;
+    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        // Watch for class changes to update validation state
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = this.checkInvalidState();
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    // Force a re-render to update aria-describedby immediately
+                    forceUpdate(this);
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = this.checkInvalidState();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -263,6 +292,11 @@ export class Input {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        // Clean up validation observer to prevent memory leaks
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /**
      * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
@@ -364,15 +398,15 @@ export class Input {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -485,7 +519,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8a51f0300d5bc66392f9ab9a6fa0b5d388072a33', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -496,14 +530,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '9f8cf88d7d0e27931b51bd9c67f048c7fc6f5703', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '7ad30bf9777774062a6ccf9a3ba804f251eef1bb', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '8af0b0325d101df8eed7d24f2767d6ca4d307319', name: "start" }), h("input", Object.assign({ key: '1c53f7f9fa2567f3df19681cf4e7c21be382eae6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'b081d0e1ec1444b4c9cca145fc9cd2ad4a68b3da', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '01535299241c3635460c05646420acf62a1ff567', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '480f3eb58b08ae792866a5b9b4c068748c5567cc', name: "end" })), shouldRenderHighlight && h("div", { key: 'a8609cacee88e4a09f1cca65b6a47cb79a56f35e', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -523,7 +557,6 @@ export class Input {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -544,11 +577,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "color"
             },
             "autocapitalize": {
                 "type": "string",
-                "attribute": "autocapitalize",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -564,11 +597,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocapitalize",
                 "defaultValue": "'off'"
             },
             "autocomplete": {
                 "type": "string",
-                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
@@ -590,11 +623,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete",
                 "defaultValue": "'off'"
             },
             "autocorrect": {
                 "type": "string",
-                "attribute": "autocorrect",
                 "mutable": false,
                 "complexType": {
                     "original": "'on' | 'off'",
@@ -610,11 +643,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocorrect",
                 "defaultValue": "'off'"
             },
             "autofocus": {
                 "type": "boolean",
-                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -630,11 +663,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autofocus",
                 "defaultValue": "false"
             },
             "clearInput": {
                 "type": "boolean",
-                "attribute": "clear-input",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -650,11 +683,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clear-input",
                 "defaultValue": "false"
             },
             "clearInputIcon": {
                 "type": "string",
-                "attribute": "clear-input-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -669,11 +702,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "clear-input-icon"
             },
             "clearOnEdit": {
                 "type": "boolean",
-                "attribute": "clear-on-edit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -688,11 +721,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "clear-on-edit"
             },
             "counter": {
                 "type": "boolean",
-                "attribute": "counter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -708,11 +741,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "counter",
                 "defaultValue": "false"
             },
             "counterFormatter": {
                 "type": "unknown",
-                "attribute": "counter-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "(inputLength: number, maxLength: number) => string",
@@ -730,7 +763,6 @@ export class Input {
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -745,11 +777,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "debounce"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -765,11 +797,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "enterkeyhint": {
                 "type": "string",
-                "attribute": "enterkeyhint",
                 "mutable": false,
                 "complexType": {
                     "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
@@ -784,11 +816,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "enterkeyhint"
             },
             "errorText": {
                 "type": "string",
-                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -803,11 +835,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "error-text"
             },
             "fill": {
                 "type": "string",
-                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "'outline' | 'solid'",
@@ -822,11 +854,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "fill"
             },
             "inputmode": {
                 "type": "string",
-                "attribute": "inputmode",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
@@ -841,11 +873,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "inputmode"
             },
             "helperText": {
                 "type": "string",
-                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -860,11 +892,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -879,11 +911,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelPlacement": {
                 "type": "string",
-                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
@@ -899,11 +931,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-placement",
                 "defaultValue": "'start'"
             },
             "max": {
                 "type": "any",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -918,11 +950,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max"
             },
             "maxlength": {
                 "type": "number",
-                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -937,11 +969,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "maxlength"
             },
             "min": {
                 "type": "any",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -956,11 +988,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "min"
             },
             "minlength": {
                 "type": "number",
-                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -975,11 +1007,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "minlength"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -994,11 +1026,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "multiple"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1014,11 +1046,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "pattern": {
                 "type": "string",
-                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1033,11 +1065,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "pattern"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1052,11 +1084,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1072,11 +1104,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1092,11 +1124,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "shape": {
                 "type": "string",
-                "attribute": "shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'round'",
@@ -1111,11 +1143,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "shape"
             },
             "spellcheck": {
                 "type": "boolean",
-                "attribute": "spellcheck",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1131,11 +1163,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "spellcheck",
                 "defaultValue": "false"
             },
             "step": {
                 "type": "string",
-                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1150,11 +1182,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "step"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TextFieldTypes",
@@ -1176,11 +1208,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | number | null",
@@ -1196,13 +1228,15 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "isInvalid": {}
         };
     }
     static get events() {