@ionic/core 8.0.0-dev.11713809015.1aabd368 → 8.0.0-dev.11713893672.15a2b23e

package/components/ion-datetime.js

@@ -1450,7 +1450,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (h("ion-picker-column", { "aria-label": "Select a day", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
@@ -1760,7 +1760,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: 'ea2ff775f17d5990cb9bb56a1372986e40b94fab', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '131cd9d8f73805ea76158c0ad05d86809fe8dfce', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1770,7 +1770,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: 'acc8a91a57d090c0092066f543d921792b7cbed2', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '3be6976d484d9ccebac77630b2fd66388b2b85e4', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker-column.js

@@ -20,6 +20,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
         this.isScrolling = false;
         this.isColumnVisible = false;
         this.canExitInputMode = true;
+        this.updateValueTextOnScroll = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -34,6 +35,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
+                    this.updateValueTextOnScroll = false;
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -103,9 +105,10 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
             const enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
             let timeout;
-            let { activeItem: activeEl } = this.activeItem;
+            let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
+                    var _a;
                     if (!scrollEl)
                         return;
                     if (timeout) {
@@ -186,8 +189,23 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
                     }
                     activeEl = newActiveElement;
                     this.setPickerItemActiveState(newActiveElement, true);
+                    /**
+                     * Set the aria-valuetext even though the value prop has not been updated yet.
+                     * This enables some screen readers to announce the value as the users drag
+                     * as opposed to when their release their pointer from the screen.
+                     *
+                     * When the value is programmatically updated, we will smoothly scroll
+                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
+                     * as that can cause the old value to be briefly set before being set to the
+                     * correct option. This will cause some screen readers to announce the old value
+                     * again before announcing the new value. The correct valuetext will be set on render.
+                     */
+                    if (this.updateValueTextOnScroll) {
+                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                    }
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
                         enableHaptics && hapticSelectionEnd();
                         /**
                          * Certain tasks (such as those that
@@ -255,7 +273,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
          * may be past the stride if the option at the stride is disabled.
          */
         this.findNextOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
+            const { activeItem } = this;
             if (!activeItem)
                 return null;
             let prevNode = activeItem;
@@ -282,7 +300,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
          *  may be past the stride if the option at the stride is disabled.
          */
         this.findPreviousOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
+            const { activeItem } = this;
             if (!activeItem)
                 return null;
             let nextNode = activeItem;
@@ -336,6 +354,13 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
                 ev.preventDefault();
             }
         };
+        /**
+         * Utility to generate the correct text for aria-valuetext.
+         */
+        this.getOptionValueText = (el) => {
+            var _a;
+            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+        };
         /**
          * Render an element that overlays the column. This element is for assistive
          * tech to allow users to navigate the column up/down. This element should receive
@@ -343,11 +368,15 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
          * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
          */
         this.renderAssistiveFocusable = () => {
-            var _a;
-            const { activeItem, activeItemIndex } = this.activeItem;
-            const { el } = this;
-            const valueText = activeItem ? (_a = activeItem.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : activeItem.innerText : '';
-            return (h("div", { class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": el.childElementCount - 1, "aria-valuenow": activeItemIndex >= 0 ? activeItemIndex : 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
         };
         this.ariaLabel = null;
         this.isActive = false;
@@ -389,8 +418,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
              */
             const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
-                const { activeItem } = this.activeItem;
-                const { el } = this;
+                const { activeItem, el } = this;
                 this.isColumnVisible = true;
                 /**
                  * Because this initial call to scrollActiveItemIntoView has to fire before
@@ -430,8 +458,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
         }
     }
     componentDidRender() {
-        const { activeItem } = this.activeItem;
-        const { el, isColumnVisible, value } = this;
+        const { el, activeItem, isColumnVisible, value } = this;
         if (isColumnVisible && !activeItem) {
             const firstOption = el.querySelector('ion-picker-column-option');
             /**
@@ -448,7 +475,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
     }
     /** @internal  */
     async scrollActiveItemIntoView(smooth = false) {
-        const { activeItem: activeEl } = this.activeItem;
+        const activeEl = this.activeItem;
         if (activeEl) {
             this.centerPickerItemInView(activeEl, smooth, false);
         }
@@ -482,33 +509,29 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
     }
     get activeItem() {
         const { value } = this;
-        const options = this.el.querySelectorAll('ion-picker-column-option');
-        for (let i = 0; i <= options.length - 1; i++) {
-            const option = options[i];
+        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
+        return options.find((option) => {
             /**
              * If the whole picker column is disabled, the current value should appear active
              * If the current value item is specifically disabled, it should not appear active
              */
-            if (option.value === value && !option.disabled) {
-                return {
-                    activeItem: option,
-                    activeItemIndex: i,
-                };
+            if (!this.disabled && option.disabled) {
+                return false;
             }
-        }
-        return { activeItem: undefined, activeItemIndex: -1 };
+            return option.value === value;
+        });
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '87534568ba47096dca1be00fee184052767087f5', class: createColorClasses(color, {
+        return (h(Host, { key: '50fe50a49f88aa9ec435436083f3cd1ef49c8c9c', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '8dedc4f294f1a6658a12151a765f6fa790f4d854', name: "prefix" }), h("div", { key: 'c82975dc3996d3ddb8dee12ad381ee733466a069', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '6350829748690895ab3ef101b9f2ae993852de7d', name: "prefix" }), h("div", { key: 'eaff9925aa8553f63ba2a1ae2bdfaa02963e0a5d', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: '2de49979f9339f4a9a384e115ea5a073b6467e50', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '304e0bcc506f4c4d35d053e95c85de9c9bdc303c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3da0eb1d7e1d8b196112f7d695447b40716eef1d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '43668a05c3eb39749bde1137e33872e1b406cba9' }), h("div", { key: '95d4ae922ad45aa541a70b08958b08a2d3c79fbe', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '412aca51c2d3b4cc1bcc1fffca68922db64f7745', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2319fa61c7649dec3efa2ec2e7b93d5e9a775708', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '010cee6ffdbe1a6d5331cb4e185b1aa0b6effd2d', name: "suffix" })));
+            } }, h("div", { key: '25a24c4174782f2ec8a1fe06cbaf1f564b1f632f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7f4e9a5f1f74f7e8d5ad74178894edc80c0fb523', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '329b88b4af1d0e37da347e5f3fe9b462efcc2886', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '82b9d5d541d41801bce06db0867d6cfbcee4ac3e' }), h("div", { key: '288ae193601d1eb49ead06f79eb1affa478f31d3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '29661d0b74d11d650c2b23be66f857dd008dc5a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a7bd71b4abcb027654a828ffa65d87b6874d7484', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '83ddd19d09ec48fe31b51f9f272a562320f90098', name: "suffix" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -1452,7 +1452,7 @@ const Datetime = class {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = data.isLocaleDayPeriodRTL(this.locale);
-        return (index$1.h("ion-picker-column", { "aria-label": "Select a day", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = data.calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
@@ -1762,7 +1762,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index$1.h(index$1.Host, { key: 'ea2ff775f17d5990cb9bb56a1372986e40b94fab', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index$1.h(index$1.Host, { key: '131cd9d8f73805ea76158c0ad05d86809fe8dfce', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1772,7 +1772,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, index$1.h("div", { key: 'acc8a91a57d090c0092066f543d921792b7cbed2', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, index$1.h("div", { key: '3be6976d484d9ccebac77630b2fd66388b2b85e4', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-picker-column.cjs.entry.js

@@ -23,6 +23,7 @@ const PickerColumn = class {
         this.isScrolling = false;
         this.isColumnVisible = false;
         this.canExitInputMode = true;
+        this.updateValueTextOnScroll = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -37,6 +38,7 @@ const PickerColumn = class {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
+                    this.updateValueTextOnScroll = false;
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -106,9 +108,10 @@ const PickerColumn = class {
             const enableHaptics = ionicGlobal.isPlatform('ios');
             const { el, scrollEl } = this;
             let timeout;
-            let { activeItem: activeEl } = this.activeItem;
+            let activeEl = this.activeItem;
             const scrollCallback = () => {
                 helpers.raf(() => {
+                    var _a;
                     if (!scrollEl)
                         return;
                     if (timeout) {
@@ -189,8 +192,23 @@ const PickerColumn = class {
                     }
                     activeEl = newActiveElement;
                     this.setPickerItemActiveState(newActiveElement, true);
+                    /**
+                     * Set the aria-valuetext even though the value prop has not been updated yet.
+                     * This enables some screen readers to announce the value as the users drag
+                     * as opposed to when their release their pointer from the screen.
+                     *
+                     * When the value is programmatically updated, we will smoothly scroll
+                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
+                     * as that can cause the old value to be briefly set before being set to the
+                     * correct option. This will cause some screen readers to announce the old value
+                     * again before announcing the new value. The correct valuetext will be set on render.
+                     */
+                    if (this.updateValueTextOnScroll) {
+                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                    }
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
                         enableHaptics && haptic.hapticSelectionEnd();
                         /**
                          * Certain tasks (such as those that
@@ -258,7 +276,7 @@ const PickerColumn = class {
          * may be past the stride if the option at the stride is disabled.
          */
         this.findNextOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
+            const { activeItem } = this;
             if (!activeItem)
                 return null;
             let prevNode = activeItem;
@@ -285,7 +303,7 @@ const PickerColumn = class {
          *  may be past the stride if the option at the stride is disabled.
          */
         this.findPreviousOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
+            const { activeItem } = this;
             if (!activeItem)
                 return null;
             let nextNode = activeItem;
@@ -339,6 +357,13 @@ const PickerColumn = class {
                 ev.preventDefault();
             }
         };
+        /**
+         * Utility to generate the correct text for aria-valuetext.
+         */
+        this.getOptionValueText = (el) => {
+            var _a;
+            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+        };
         /**
          * Render an element that overlays the column. This element is for assistive
          * tech to allow users to navigate the column up/down. This element should receive
@@ -346,11 +371,15 @@ const PickerColumn = class {
          * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
          */
         this.renderAssistiveFocusable = () => {
-            var _a;
-            const { activeItem, activeItemIndex } = this.activeItem;
-            const { el } = this;
-            const valueText = activeItem ? (_a = activeItem.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : activeItem.innerText : '';
-            return (index.h("div", { class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": el.childElementCount - 1, "aria-valuenow": activeItemIndex >= 0 ? activeItemIndex : 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            return (index.h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
         };
         this.ariaLabel = null;
         this.isActive = false;
@@ -392,8 +421,7 @@ const PickerColumn = class {
              */
             const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
-                const { activeItem } = this.activeItem;
-                const { el } = this;
+                const { activeItem, el } = this;
                 this.isColumnVisible = true;
                 /**
                  * Because this initial call to scrollActiveItemIntoView has to fire before
@@ -433,8 +461,7 @@ const PickerColumn = class {
         }
     }
     componentDidRender() {
-        const { activeItem } = this.activeItem;
-        const { el, isColumnVisible, value } = this;
+        const { el, activeItem, isColumnVisible, value } = this;
         if (isColumnVisible && !activeItem) {
             const firstOption = el.querySelector('ion-picker-column-option');
             /**
@@ -451,7 +478,7 @@ const PickerColumn = class {
     }
     /** @internal  */
     async scrollActiveItemIntoView(smooth = false) {
-        const { activeItem: activeEl } = this.activeItem;
+        const activeEl = this.activeItem;
         if (activeEl) {
             this.centerPickerItemInView(activeEl, smooth, false);
         }
@@ -485,33 +512,29 @@ const PickerColumn = class {
     }
     get activeItem() {
         const { value } = this;
-        const options = this.el.querySelectorAll('ion-picker-column-option');
-        for (let i = 0; i <= options.length - 1; i++) {
-            const option = options[i];
+        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
+        return options.find((option) => {
             /**
              * If the whole picker column is disabled, the current value should appear active
              * If the current value item is specifically disabled, it should not appear active
              */
-            if (option.value === value && !option.disabled) {
-                return {
-                    activeItem: option,
-                    activeItemIndex: i,
-                };
+            if (!this.disabled && option.disabled) {
+                return false;
             }
-        }
-        return { activeItem: undefined, activeItemIndex: -1 };
+            return option.value === value;
+        });
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '87534568ba47096dca1be00fee184052767087f5', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '50fe50a49f88aa9ec435436083f3cd1ef49c8c9c', class: theme.createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), index.h("slot", { key: '8dedc4f294f1a6658a12151a765f6fa790f4d854', name: "prefix" }), index.h("div", { key: 'c82975dc3996d3ddb8dee12ad381ee733466a069', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), index.h("slot", { key: '6350829748690895ab3ef101b9f2ae993852de7d', name: "prefix" }), index.h("div", { key: 'eaff9925aa8553f63ba2a1ae2bdfaa02963e0a5d', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, index.h("div", { key: '2de49979f9339f4a9a384e115ea5a073b6467e50', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '304e0bcc506f4c4d35d053e95c85de9c9bdc303c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '3da0eb1d7e1d8b196112f7d695447b40716eef1d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '43668a05c3eb39749bde1137e33872e1b406cba9' }), index.h("div", { key: '95d4ae922ad45aa541a70b08958b08a2d3c79fbe', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '412aca51c2d3b4cc1bcc1fffca68922db64f7745', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '2319fa61c7649dec3efa2ec2e7b93d5e9a775708', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: '010cee6ffdbe1a6d5331cb4e185b1aa0b6effd2d', name: "suffix" })));
+            } }, index.h("div", { key: '25a24c4174782f2ec8a1fe06cbaf1f564b1f632f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '7f4e9a5f1f74f7e8d5ad74178894edc80c0fb523', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '329b88b4af1d0e37da347e5f3fe9b462efcc2886', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '82b9d5d541d41801bce06db0867d6cfbcee4ac3e' }), index.h("div", { key: '288ae193601d1eb49ead06f79eb1affa478f31d3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '29661d0b74d11d650c2b23be66f857dd008dc5a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'a7bd71b4abcb027654a828ffa65d87b6874d7484', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: '83ddd19d09ec48fe31b51f9f272a562320f90098', name: "suffix" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/datetime/datetime.js

@@ -1246,7 +1246,7 @@ export class Datetime {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (h("ion-picker-column", { "aria-label": "Select a day", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
@@ -1556,7 +1556,7 @@ export class Datetime {
         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: 'ea2ff775f17d5990cb9bb56a1372986e40b94fab', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '131cd9d8f73805ea76158c0ad05d86809fe8dfce', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1566,7 +1566,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: 'acc8a91a57d090c0092066f543d921792b7cbed2', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '3be6976d484d9ccebac77630b2fd66388b2b85e4', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-column/picker-column.js

@@ -19,6 +19,7 @@ export class PickerColumn {
         this.isScrolling = false;
         this.isColumnVisible = false;
         this.canExitInputMode = true;
+        this.updateValueTextOnScroll = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -33,6 +34,7 @@ export class PickerColumn {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
+                    this.updateValueTextOnScroll = false;
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -102,9 +104,10 @@ export class PickerColumn {
             const enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
             let timeout;
-            let { activeItem: activeEl } = this.activeItem;
+            let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
+                    var _a;
                     if (!scrollEl)
                         return;
                     if (timeout) {
@@ -185,8 +188,23 @@ export class PickerColumn {
                     }
                     activeEl = newActiveElement;
                     this.setPickerItemActiveState(newActiveElement, true);
+                    /**
+                     * Set the aria-valuetext even though the value prop has not been updated yet.
+                     * This enables some screen readers to announce the value as the users drag
+                     * as opposed to when their release their pointer from the screen.
+                     *
+                     * When the value is programmatically updated, we will smoothly scroll
+                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
+                     * as that can cause the old value to be briefly set before being set to the
+                     * correct option. This will cause some screen readers to announce the old value
+                     * again before announcing the new value. The correct valuetext will be set on render.
+                     */
+                    if (this.updateValueTextOnScroll) {
+                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                    }
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
                         enableHaptics && hapticSelectionEnd();
                         /**
                          * Certain tasks (such as those that
@@ -254,7 +272,7 @@ export class PickerColumn {
          * may be past the stride if the option at the stride is disabled.
          */
         this.findNextOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
+            const { activeItem } = this;
             if (!activeItem)
                 return null;
             let prevNode = activeItem;
@@ -281,7 +299,7 @@ export class PickerColumn {
          *  may be past the stride if the option at the stride is disabled.
          */
         this.findPreviousOption = (stride = 1) => {
-            const { activeItem } = this.activeItem;
+            const { activeItem } = this;
             if (!activeItem)
                 return null;
             let nextNode = activeItem;
@@ -337,6 +355,13 @@ export class PickerColumn {
                 ev.preventDefault();
             }
         };
+        /**
+         * Utility to generate the correct text for aria-valuetext.
+         */
+        this.getOptionValueText = (el) => {
+            var _a;
+            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+        };
         /**
          * Render an element that overlays the column. This element is for assistive
          * tech to allow users to navigate the column up/down. This element should receive
@@ -344,11 +369,15 @@ export class PickerColumn {
          * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
          */
         this.renderAssistiveFocusable = () => {
-            var _a;
-            const { activeItem, activeItemIndex } = this.activeItem;
-            const { el } = this;
-            const valueText = activeItem ? (_a = activeItem.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : activeItem.innerText : '';
-            return (h("div", { class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": el.childElementCount - 1, "aria-valuenow": activeItemIndex >= 0 ? activeItemIndex : 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
         };
         this.ariaLabel = null;
         this.isActive = false;
@@ -390,8 +419,7 @@ export class PickerColumn {
              */
             const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
-                const { activeItem } = this.activeItem;
-                const { el } = this;
+                const { activeItem, el } = this;
                 this.isColumnVisible = true;
                 /**
                  * Because this initial call to scrollActiveItemIntoView has to fire before
@@ -431,8 +459,7 @@ export class PickerColumn {
         }
     }
     componentDidRender() {
-        const { activeItem } = this.activeItem;
-        const { el, isColumnVisible, value } = this;
+        const { el, activeItem, isColumnVisible, value } = this;
         if (isColumnVisible && !activeItem) {
             const firstOption = el.querySelector('ion-picker-column-option');
             /**
@@ -449,7 +476,7 @@ export class PickerColumn {
     }
     /** @internal  */
     async scrollActiveItemIntoView(smooth = false) {
-        const { activeItem: activeEl } = this.activeItem;
+        const activeEl = this.activeItem;
         if (activeEl) {
             this.centerPickerItemInView(activeEl, smooth, false);
         }
@@ -483,33 +510,29 @@ export class PickerColumn {
     }
     get activeItem() {
         const { value } = this;
-        const options = this.el.querySelectorAll('ion-picker-column-option');
-        for (let i = 0; i <= options.length - 1; i++) {
-            const option = options[i];
+        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
+        return options.find((option) => {
             /**
              * If the whole picker column is disabled, the current value should appear active
              * If the current value item is specifically disabled, it should not appear active
              */
-            if (option.value === value && !option.disabled) {
-                return {
-                    activeItem: option,
-                    activeItemIndex: i,
-                };
+            if (!this.disabled && option.disabled) {
+                return false;
             }
-        }
-        return { activeItem: undefined, activeItemIndex: -1 };
+            return option.value === value;
+        });
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '87534568ba47096dca1be00fee184052767087f5', class: createColorClasses(color, {
+        return (h(Host, { key: '50fe50a49f88aa9ec435436083f3cd1ef49c8c9c', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '8dedc4f294f1a6658a12151a765f6fa790f4d854', name: "prefix" }), h("div", { key: 'c82975dc3996d3ddb8dee12ad381ee733466a069', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '6350829748690895ab3ef101b9f2ae993852de7d', name: "prefix" }), h("div", { key: 'eaff9925aa8553f63ba2a1ae2bdfaa02963e0a5d', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: '2de49979f9339f4a9a384e115ea5a073b6467e50', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '304e0bcc506f4c4d35d053e95c85de9c9bdc303c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3da0eb1d7e1d8b196112f7d695447b40716eef1d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '43668a05c3eb39749bde1137e33872e1b406cba9' }), h("div", { key: '95d4ae922ad45aa541a70b08958b08a2d3c79fbe', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '412aca51c2d3b4cc1bcc1fffca68922db64f7745', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2319fa61c7649dec3efa2ec2e7b93d5e9a775708', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '010cee6ffdbe1a6d5331cb4e185b1aa0b6effd2d', name: "suffix" })));
+            } }, h("div", { key: '25a24c4174782f2ec8a1fe06cbaf1f564b1f632f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7f4e9a5f1f74f7e8d5ad74178894edc80c0fb523', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '329b88b4af1d0e37da347e5f3fe9b462efcc2886', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '82b9d5d541d41801bce06db0867d6cfbcee4ac3e' }), h("div", { key: '288ae193601d1eb49ead06f79eb1affa478f31d3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '29661d0b74d11d650c2b23be66f857dd008dc5a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a7bd71b4abcb027654a828ffa65d87b6874d7484', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '83ddd19d09ec48fe31b51f9f272a562320f90098', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }