voyager-ionic-core 8.7.6 → 8.7.11

package/components/ion-datetime.js

@@ -790,6 +790,28 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                 destroyKeyboardMO();
             }
         };
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback to ensure the datetime becomes ready even if
+         * IntersectionObserver never reports it as intersecting.
+         *
+         * This is primarily used in environments where the observer
+         * might not fire as expected, such as when running under
+         * synthetic tests that stub IntersectionObserver.
+         */
+        this.ensureReadyIfVisible = () => {
+            if (this.el.classList.contains('datetime-ready')) {
+                return;
+            }
+            const rect = this.el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                return;
+            }
+            this.initializeListeners();
+            writeTask(() => {
+                this.el.classList.add('datetime-ready');
+            });
+        };
         this.processValue = (value) => {
             const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
             const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
@@ -1107,6 +1129,17 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
          * triggering the `hiddenIO` observer below.
          */
         raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback: If IntersectionObserver never reports that the
+         * datetime is visible but the host clearly has layout, ensure
+         * we still initialize listeners and mark the component as ready.
+         *
+         * We schedule this after everything has had a chance to run.
+         */
+        setTimeout(() => {
+            this.ensureReadyIfVisible();
+        }, 100);
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -1862,7 +1895,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1872,7 +1905,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-input.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, h, Host } from '@stencil/core/internal/client';
 import { c as createNotchController } from './notch-controller.js';
+import { c as checkInvalidState } from './validity.js';
 import { l as debounceEvent, i as inheritAriaAttributes, d as inheritAttributes, c as componentOnReady } from './helpers.js';
 import { c as createSlotMutationController, g as getCounterText } from './input.utils.js';
 import { h as hostContext, c as createColorClasses } from './theme.js';
@@ -233,14 +234,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
     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));
@@ -248,7 +241,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = this.checkInvalidState();
+                const newIsInvalid = checkInvalidState(el);
                 if (this.isInvalid !== newIsInvalid) {
                     this.isInvalid = newIsInvalid;
                     // Force a re-render to update aria-describedby immediately
@@ -261,7 +254,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             });
         }
         // Always set initial state
-        this.isInvalid = this.checkInvalidState();
+        this.isInvalid = checkInvalidState(el);
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -525,7 +518,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '8a51f0300d5bc66392f9ab9a6fa0b5d388072a33', class: createColorClasses(this.color, {
+        return (h(Host, { key: '97b5308021064d9e7434ef2d3d96f27045c1b0c4', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -536,14 +529,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, 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) => {
+            }) }, h("label", { key: '353f68726ce180299bd9adc81e5ff7d26a48f54f', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2034b4bad04fc157f3298a1805819216b6f439d0', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '96bb5e30176b2bd76dfb75bfbf6c1c3d4403f4bb', name: "start" }), h("input", Object.assign({ key: '1a1d75b0e414a95c89d5a760757c33548d234aca', 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: '95f3df17b7691d9a2e7dcd4a51f16a94aa3ca36f', "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: '01535299241c3635460c05646420acf62a1ff567', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '480f3eb58b08ae792866a5b9b4c068748c5567cc', name: "end" })), shouldRenderHighlight && h("div", { key: 'a8609cacee88e4a09f1cca65b6a47cb79a56f35e', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '16b0af75eed50c8115fb5597f73b5fbf71c2530e', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'c48da0f8ddb3764ac43efa705bb4a6bb2d9cc2fd', name: "end" })), shouldRenderHighlight && h("div", { key: 'f15238481fc20de56ca7ecb6e350b3c024cc755e', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-select.js

@@ -1,9 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host, forceUpdate } from '@stencil/core/internal/client';
 import { c as createNotchController } from './notch-controller.js';
 import { i as isOptionSelected, d as defineCustomElement$8, c as compareOptions } from './radio.js';
+import { c as checkInvalidState } from './validity.js';
 import { d as inheritAttributes, e as renderHiddenInput, h as focusVisibleElement } from './helpers.js';
 import { p as printIonWarning } from './index4.js';
 import { c as popoverController, b as actionSheetController, a as alertController, m as modalController } from './overlays.js';
@@ -65,6 +66,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
          * is applied in both cases.
          */
         this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The text to display on the cancel button.
          */
@@ -194,9 +199,46 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
              */
             forceUpdate(this);
         });
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(this.el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+        this.hintTextId = this.getHintTextId();
     }
     componentDidLoad() {
         /**
@@ -220,6 +262,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /**
      * Open the select overlay. The overlay is either an alert, action sheet, or popover,
@@ -690,11 +737,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     renderListbox() {
         const { disabled, inputId, isExpanded, required } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -706,10 +753,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      * 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", part: "supporting-text helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText),
+            h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     /**
@@ -757,7 +804,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'c03fb65e8fc9f9aab295e07b282377d57d910519', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '35b5e18e6f79a802ff2d46d1242e80ff755cc0b9', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -775,7 +822,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '0d0c8ec55269adcac625f2899a547f4e7f3e3741', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f6dfc93c0e23cbe75a2947abde67d842db2dad78', class: "select-wrapper-inner" }, h("slot", { key: '957bfadf9f101f519091419a362d3abdc2be66f6', name: "start" }), h("div", { key: 'ca349202a484e7f2e884533fd330f0b136754f7d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'f0e62a6533ff1c8f62bd2d27f60b23385c4fa9ed', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fb840d46bafafb09898ebeebbe8c181906a3d8a2', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '6005b34a0c50bc4d7653a4276bc232ecd02e083c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'c7e07aa81ae856c057f16275dd058f37c5670a47', class: "select-wrapper-inner" }, h("slot", { key: '7fc2deefe0424404caacdbbd9e08ed43ba55d28a', name: "start" }), h("div", { key: '157d74ee717b1bc30b5f1c233a09b0c8456aa68e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ea66db304528b82bf9317730b6dce3db2612f235', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '786eb1530b7476f0615d4e7c0bf4e7e4dc66509c', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -813,6 +860,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "required": [4],
         "isExpanded": [32],
         "hasFocus": [32],
+        "isInvalid": [32],
+        "hintTextId": [32],
         "open": [64]
     }, undefined, {
         "disabled": ["styleChanged"],

package/components/ion-textarea.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, writeTask, h, Host } from '@stencil/core/internal/client';
 import { c as createNotchController } from './notch-controller.js';
+import { c as checkInvalidState } from './validity.js';
 import { l as debounceEvent, i as inheritAriaAttributes, d as inheritAttributes, c as componentOnReady } from './helpers.js';
 import { c as createSlotMutationController, g as getCounterText } from './input.utils.js';
 import { h as hostContext, c as createColorClasses } from './theme.js';
@@ -192,14 +193,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
             this.el.click();
         }
     }
-    /**
-     * Checks if the textarea is in an invalid state based on Ionic validation classes
-     */
-    checkValidationState() {
-        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));
@@ -207,7 +200,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = this.checkValidationState();
+                const newIsInvalid = checkInvalidState(this.el);
                 if (this.isInvalid !== newIsInvalid) {
                     this.isInvalid = newIsInvalid;
                     // Force a re-render to update aria-describedby immediately
@@ -220,7 +213,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
             });
         }
         // Always set initial state
-        this.isInvalid = this.checkValidationState();
+        this.isInvalid = checkInvalidState(this.el);
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -484,7 +477,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '26b46666a92b3f652775bb1c46661f9a30392104', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a70a62d7aae3831a50acd74f60b930925ada1326', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -493,7 +486,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '2649da816216959ebe1f34cafd9dedbac20ec3c2', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'dca98593efece1b044dbcda045fa70882d715cb2', class: "textarea-wrapper-inner" }, h("div", { key: '2019daf87fddca5ec0b2e336f0376fd9642bae1b', class: "start-slot-wrapper" }, h("slot", { key: '36c423c394a71d08261705b9d6729e756bf65924', name: "start" })), h("div", { key: '0c3ea34105c7eddfa4094371c5d288c50ed10db3', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'ce173b83b16aff43d293fa1edef9b66c6676227b', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '756e343cfd208bb5ad9ecf08d77cbb0a9606dc7b', class: "end-slot-wrapper" }, h("slot", { key: '0eb596814a037fa4634ff8c5bac0045540edfe21', name: "end" }))), shouldRenderHighlight && h("div", { key: 'df62f896eb6e0e2d1217aa487c198eb82a52bcb8', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '8a2dd59a60f7469df84018eb0ede3a9ec3862703', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '1bfc368236e3da7a225a45118c27fbfc1fe5fa46', class: "textarea-wrapper-inner" }, h("div", { key: '215cbb2635ff52e31a8973376989b85e7245d40f', class: "start-slot-wrapper" }, h("slot", { key: '9f6b461cdee9d629deb695d2bea054ece2f32305', name: "start" })), h("div", { key: 'c1af35a2d5bc452bebe0b22a26d15ff52b4e9fc8', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '69a69b3cf0932baafbe37e6e846f1a571608d3f2', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'c053ea8b865d0e29763aed2e4939cc9c9e374c15', class: "end-slot-wrapper" }, h("slot", { key: '930aa641833b0df54b9ea10368fc2f46d5f491f6', name: "end" }))), shouldRenderHighlight && h("div", { key: '8d12597d15f5f429d80e8272ea99e64ed924e482', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toggle.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, e as renderHiddenInput } from './helpers.js';
+import { c as checkInvalidState } from './validity.js';
 import { d as hapticSelection } from './haptic.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
@@ -33,6 +34,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.inheritedAttributes = {};
         this.didLoad = false;
         this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -140,22 +145,58 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         const { checked, value } = this;
         const isNowChecked = !checked;
         this.checked = isNowChecked;
-        this.setFocus();
         this.ionChange.emit({
             checked: isNowChecked,
             value,
         });
     }
     async connectedCallback() {
+        const { didLoad, el } = this;
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
          * But if we are moving ion-toggle via appendChild,
          * then toggleTrack will be defined.
          */
-        if (this.didLoad) {
+        if (didLoad) {
             this.setupGesture();
         }
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -166,9 +207,15 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
     }
     onStart() {
         this.activated = true;
@@ -191,9 +238,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         return this.value || '';
     }
     setFocus() {
-        if (this.focusEl) {
-            this.focusEl.focus();
-        }
+        this.el.focus();
     }
     renderOnOffSwitchLabels(mode, checked) {
         const icon = this.getSwitchLabelIcon(mode, checked);
@@ -211,9 +256,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -226,7 +271,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -235,15 +280,15 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
+        const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '21037ea2e8326f58c84becadde475f007f931924', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+        return (h(Host, { key: 'f569148edd89ee041a4719ffc4733c16b05229bd', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -253,10 +298,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '4d153679d118d01286f6633d1c19558a97745ff6', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '0dfcd4df15b8d41bec5ff5f8912503afbb7bec53', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'ffed3a07ba2ab70e5b232e6041bc3b6b34be8331', class: {
+            }) }, h("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd88e1e3dcdd8293f6b61f237cd7a0511dcbce300' }), this.renderHintText()), h("div", { key: '0e924225f5f0caf3c88738acb6c557bd8c1b68f6', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), h("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -279,7 +324,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         "justify": [1],
         "alignment": [1],
         "required": [4],
-        "activated": [32]
+        "activated": [32],
+        "isInvalid": [32],
+        "hintTextId": [32]
     }, undefined, {
         "disabled": ["disabledChanged"]
     }]);

package/components/radio-group.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { e as renderHiddenInput } from './helpers.js';
+import { c as checkInvalidState } from './validity.js';
 import { b as getIonMode } from './ionic-global.js';
 
 const radioGroupIosCss = "ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}";
@@ -21,6 +22,10 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.labelId = `${this.inputId}-lbl`;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * If `true`, the radios can be deselected.
          */
@@ -102,6 +107,52 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
                 this.labelId = label.id = this.name + '-lbl';
             }
         }
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(this.el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(this.el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
+    }
+    componentWillLoad() {
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     getRadios() {
         return Array.from(this.el.querySelectorAll('ion-radio'));
@@ -177,16 +228,16 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         const hasHintText = !!helperText || !!errorText;
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text" }, errorText)));
+        return (h("div", { class: "radio-group-top" }, 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) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -198,7 +249,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '81b8ebc96b2f383c36717f290d2959cc921ad6e8', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '45b09efc10776b889a8f372cba80d25a3fc849da', class: "radio-group-wrapper" }, h("slot", { key: '58714934542c2fdd7396de160364f3f06b32e8f8' }))));
+        return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, h("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -215,6 +266,8 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         "value": [1032],
         "helperText": [1, "helper-text"],
         "errorText": [1, "error-text"],
+        "isInvalid": [32],
+        "hintTextId": [32],
         "setFocus": [64]
     }, [[4, "keydown", "onKeydown"]], {
         "value": ["valueChanged"]