@ionic/core 8.7.3-dev.11755600455.1e79c35a → 8.7.3-dev.11755696506.17b8097b

package/components/ion-refresher.js

@@ -182,6 +182,14 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
                         this.beginRefresh();
                         this.didRefresh = true;
                         hapticImpact({ style: ImpactStyle.Light });
+                        /**
+                         * Clear focus from any active element to prevent scroll jumps
+                         * when the refresh completes
+                         */
+                        const activeElement = document.activeElement;
+                        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+                            activeElement.blur();
+                        }
                         /**
                          * Translate the content element otherwise when pointer is removed
                          * from screen the scroll content will bounce back over the refresher
@@ -597,6 +605,15 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
         this.state = 8 /* RefresherState.Refreshing */;
         // place the content in a hangout position while it thinks
         this.setCss(this.pullMin, this.snapbackDuration, true, '');
+        /**
+         * Clear focus from any active element to prevent the browser
+         * from restoring focus and causing scroll jumps after refresh.
+         * This ensures the view stays at the top after refresh completes.
+         */
+        const activeElement = document.activeElement;
+        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+            activeElement.blur();
+        }
         // emit "refresh" because it was pulled down far enough
         // and they let go to begin refreshing
         this.ionRefresh.emit({
@@ -679,7 +696,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
+        return (h(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/components/overlays.js

@@ -5,7 +5,7 @@ import { d as doc } from './index9.js';
 import { h as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
 import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
 import { c as config, a as printIonError, p as printIonWarning } from './index4.js';
-import { b as getIonMode } from './ionic-global.js';
+import { b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { C as CoreDelegate } from './framework-delegate.js';
 import { B as BACKDROP_NO_SCROLL } from './gesture-controller.js';
 
@@ -508,6 +508,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     if (overlay.presented) {
         return;
     }
+    console.log("presenting overlay...");
     /**
      * Due to accessibility guidelines, toasts do not have
      * focus traps.
@@ -517,8 +518,9 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     if (overlay.el.tagName !== 'ION-TOAST') {
         setRootAriaHidden(true);
-        document.body.classList.add(BACKDROP_NO_SCROLL);
     }
+    hideUnderlyingOverlaysFromScreenReaders(overlay.el);
+    hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -565,6 +567,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * screen readers.
      */
     overlay.el.removeAttribute('aria-hidden');
+    overlay.el.removeAttribute('inert');
 };
 /**
  * When an overlay component is dismissed,
@@ -644,6 +647,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     }
     overlay.presented = false;
     try {
+        /**
+         * There is no need to show the overlay to screen readers during
+         * the dismiss animation. This is because the overlay will be removed
+         * from the DOM after the animation is complete.
+         */
+        hideAnimatingOverlayFromScreenReaders(overlay.el);
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
@@ -682,6 +691,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -877,6 +887,96 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * The overlay that is being animated also needs to hide from screen
+ * readers during its animation. This ensures that assistive technologies
+ * like TalkBack do not announce or interact with the content until the
+ * animation is complete, avoiding confusion for users.
+ *
+ * When the overlay is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
+ *
+ * If this solution is applied to iOS devices, then it leads to a bug where
+ * the overlays cannot be accessed by screen readers. This is due to
+ * VoiceOver not being able to update the accessibility tree when the
+ * `aria-hidden` is removed.
+ *
+ * @param overlay - The overlay that is being animated.
+ */
+const hideAnimatingOverlayFromScreenReaders = (overlay) => {
+    if (doc === undefined)
+        return;
+    if (isPlatform('android')) {
+        /**
+         * Once the animation is complete, this attribute will be removed.
+         * This is done at the end of the `present` method.
+         */
+        overlay.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('inert', '');
+    }
+};
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+            presentedOverlay.setAttribute('inert', '');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        currentOverlay.removeAttribute('inert');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
 export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };

package/dist/cjs/index.cjs.js

@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
 var config = require('./config-CKhELRRu.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$3 = require('./index-D24wggHR.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 require('./index-DkNv4J_i.js');
 require('./gesture-controller-dtqlP_q4.js');
 require('./hardware-back-button-BxdNu76F.js');

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
 var buttonActive = require('./button-active-BzZenWWH.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

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

@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
 var buttonActive = require('./button-active-BzZenWWH.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

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

@@ -6,7 +6,7 @@
 var index = require('./index-DNh170BW.js');
 var focusVisible = require('./focus-visible-CCvKiLh3.js');
 var helpers = require('./helpers-DgwmcYAu.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$1 = require('./index-DqmRDbxg.js');

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

@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
 var config = require('./config-CKhELRRu.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

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

@@ -5,7 +5,7 @@
 
 var index = require('./index-DNh170BW.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
 var helpers = require('./helpers-DgwmcYAu.js');

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

@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
 var capacitor = require('./capacitor-DmA66EwP.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$4 = require('./index-BzEyuIww.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');

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

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-DNh170BW.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');

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

@@ -375,6 +375,14 @@ const Refresher = class {
                         this.beginRefresh();
                         this.didRefresh = true;
                         haptic.hapticImpact({ style: haptic.ImpactStyle.Light });
+                        /**
+                         * Clear focus from any active element to prevent scroll jumps
+                         * when the refresh completes
+                         */
+                        const activeElement = document.activeElement;
+                        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+                            activeElement.blur();
+                        }
                         /**
                          * Translate the content element otherwise when pointer is removed
                          * from screen the scroll content will bounce back over the refresher
@@ -790,6 +798,15 @@ const Refresher = class {
         this.state = 8 /* RefresherState.Refreshing */;
         // place the content in a hangout position while it thinks
         this.setCss(this.pullMin, this.snapbackDuration, true, '');
+        /**
+         * Clear focus from any active element to prevent the browser
+         * from restoring focus and causing scroll jumps after refresh.
+         * This ensures the view stays at the top after refresh completes.
+         */
+        const activeElement = document.activeElement;
+        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+            activeElement.blur();
+        }
         // emit "refresh" because it was pulled down far enough
         // and they let go to begin refreshing
         this.ionRefresh.emit({
@@ -872,7 +889,7 @@ const Refresher = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
+        return (index.h(index.Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-DNh170BW.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var theme = require('./theme-CeDs6Hcv.js');
 require('./index-DkNv4J_i.js');
 require('./helpers-DgwmcYAu.js');

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

@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
 var notchController = require('./notch-controller-Bf5Rr4R5.js');
 var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
 var helpers = require('./helpers-DgwmcYAu.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var watchOptions = require('./watch-options-CviOsrTS.js');

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

@@ -7,7 +7,7 @@ var index$1 = require('./index-DNh170BW.js');
 var config = require('./config-CKhELRRu.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DUsEBICv.js');
+var overlays = require('./overlays-DFkeeMZX.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

package/dist/cjs/{overlays-DUsEBICv.js → overlays-DFkeeMZX.js}

@@ -510,6 +510,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     if (overlay.presented) {
         return;
     }
+    console.log("presenting overlay...");
     /**
      * Due to accessibility guidelines, toasts do not have
      * focus traps.
@@ -519,8 +520,9 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     if (overlay.el.tagName !== 'ION-TOAST') {
         setRootAriaHidden(true);
-        document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
+    hideUnderlyingOverlaysFromScreenReaders(overlay.el);
+    hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -567,6 +569,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * screen readers.
      */
     overlay.el.removeAttribute('aria-hidden');
+    overlay.el.removeAttribute('inert');
 };
 /**
  * When an overlay component is dismissed,
@@ -646,6 +649,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     }
     overlay.presented = false;
     try {
+        /**
+         * There is no need to show the overlay to screen readers during
+         * the dismiss animation. This is because the overlay will be removed
+         * from the DOM after the animation is complete.
+         */
+        hideAnimatingOverlayFromScreenReaders(overlay.el);
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
@@ -684,6 +693,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         index.printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -879,6 +889,96 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * The overlay that is being animated also needs to hide from screen
+ * readers during its animation. This ensures that assistive technologies
+ * like TalkBack do not announce or interact with the content until the
+ * animation is complete, avoiding confusion for users.
+ *
+ * When the overlay is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
+ *
+ * If this solution is applied to iOS devices, then it leads to a bug where
+ * the overlays cannot be accessed by screen readers. This is due to
+ * VoiceOver not being able to update the accessibility tree when the
+ * `aria-hidden` is removed.
+ *
+ * @param overlay - The overlay that is being animated.
+ */
+const hideAnimatingOverlayFromScreenReaders = (overlay) => {
+    if (index$1.doc === undefined)
+        return;
+    if (ionicGlobal.isPlatform('android')) {
+        /**
+         * Once the animation is complete, this attribute will be removed.
+         * This is done at the end of the `present` method.
+         */
+        overlay.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('inert', '');
+    }
+};
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (index$1.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(index$1.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+            presentedOverlay.setAttribute('inert', '');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (index$1.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(index$1.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        currentOverlay.removeAttribute('inert');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
 exports.BACKDROP = BACKDROP;

package/dist/collection/components/refresher/refresher.js

@@ -175,6 +175,14 @@ export class Refresher {
                         this.beginRefresh();
                         this.didRefresh = true;
                         hapticImpact({ style: ImpactStyle.Light });
+                        /**
+                         * Clear focus from any active element to prevent scroll jumps
+                         * when the refresh completes
+                         */
+                        const activeElement = document.activeElement;
+                        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+                            activeElement.blur();
+                        }
                         /**
                          * Translate the content element otherwise when pointer is removed
                          * from screen the scroll content will bounce back over the refresher
@@ -590,6 +598,15 @@ export class Refresher {
         this.state = 8 /* RefresherState.Refreshing */;
         // place the content in a hangout position while it thinks
         this.setCss(this.pullMin, this.snapbackDuration, true, '');
+        /**
+         * Clear focus from any active element to prevent the browser
+         * from restoring focus and causing scroll jumps after refresh.
+         * This ensures the view stays at the top after refresh completes.
+         */
+        const activeElement = document.activeElement;
+        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+            activeElement.blur();
+        }
         // emit "refresh" because it was pulled down far enough
         // and they let go to begin refreshing
         this.ionRefresh.emit({
@@ -672,7 +689,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
+        return (h(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,