merge release-8.7.17

.github/ionic-issue-bot.yml

@@ -40,7 +40,7 @@ comment:
 
 
         If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
-        
+
 
         The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
 
@@ -83,6 +83,7 @@ stale:
   exemptLabels:
     - "good first issue"
     - "triage"
+    - "bug: external"
     - "type: bug"
     - "type: feature request"
     - "needs: investigation"

CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+
+### Bug Fixes
+
+* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
+* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
+* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+
+### Bug Fixes
+
+* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+
+### Bug Fixes
+
+* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
+* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
+* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
+* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
+
+
+
+
+
 ## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
 
 

core/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+
+### Bug Fixes
+
+* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
+* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
+* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+
+### Bug Fixes
+
+* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+
+### Bug Fixes
+
+* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
+* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
+* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
+* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
+
+
+
+
+
 ## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
 
 **Note:** Version bump only for package @ionic/core

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.14",
+  "version": "8.7.17",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"

core/src/components/app/test/safe-area/app.e2e.ts

@@ -18,20 +18,66 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
 
       await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`));
     };
+
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/app/test/safe-area`, config);
     });
-    test('should not have visual regressions with action sheet', async ({ page }) => {
-      await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
-    });
-    test('should not have visual regressions with menu', async ({ page }) => {
-      await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
-    });
-    test('should not have visual regressions with picker', async ({ page }) => {
-      await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+
+    test.describe(title('Ionic safe area variables'), () => {
+      test.beforeEach(async ({ page }) => {
+        const htmlTag = page.locator('html');
+        const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area'));
+
+        expect(hasSafeAreaClass).toBe(true);
+      });
+
+      test('should not have visual regressions with action sheet', async ({ page }) => {
+        await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+      });
+      test('should not have visual regressions with menu', async ({ page }) => {
+        await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
+      });
+      test('should not have visual regressions with picker', async ({ page }) => {
+        await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+      });
+      test('should not have visual regressions with toast', async ({ page }) => {
+        await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+      });
     });
-    test('should not have visual regressions with toast', async ({ page }) => {
-      await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+
+    test.describe(title('Capacitor safe area variables'), () => {
+      test('should use safe-area-inset vars when safe-area class is not defined', async ({ page }) => {
+        await page.evaluate(() => {
+          const html = document.documentElement;
+
+          // Remove the safe area class
+          html.classList.remove('safe-area');
+
+          // Set the safe area inset variables
+          html.style.setProperty('--safe-area-inset-top', '10px');
+          html.style.setProperty('--safe-area-inset-bottom', '20px');
+          html.style.setProperty('--safe-area-inset-left', '30px');
+          html.style.setProperty('--safe-area-inset-right', '40px');
+        });
+
+        const top = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-top').trim()
+        );
+        const bottom = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-bottom').trim()
+        );
+        const left = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-left').trim()
+        );
+        const right = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-right').trim()
+        );
+
+        expect(top).toBe('10px');
+        expect(bottom).toBe('20px');
+        expect(left).toBe('30px');
+        expect(right).toBe('40px');
+      });
     });
   });
 });

core/src/components/button/button.tsx

@@ -170,6 +170,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    */
   @Watch('aria-checked')
   @Watch('aria-label')
+  @Watch('aria-pressed')
   onAriaChanged(newValue: string, _oldValue: string, propName: string) {
     this.inheritedAttributes = {
       ...this.inheritedAttributes,

core/src/components/footer/footer.tsx

@@ -22,6 +22,7 @@ export class Footer implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private contentScrollCallback?: () => void;
   private keyboardCtrl: KeyboardController | null = null;
+  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
 
   @State() private keyboardVisible = false;
 
@@ -52,7 +53,7 @@ export class Footer implements ComponentInterface {
   }
 
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
       /**
        * If the keyboard is hiding, then we need to wait
        * for the webview to resize. Otherwise, the footer
@@ -64,11 +65,32 @@ export class Footer implements ComponentInterface {
 
       this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
     });
+    this.keyboardCtrlPromise = promise;
+
+    const keyboardCtrl = await promise;
+
+    /**
+     * Only assign if this is still the current promise.
+     * Otherwise, a new connectedCallback has started or
+     * disconnectedCallback was called, so destroy this instance.
+     */
+    if (this.keyboardCtrlPromise === promise) {
+      this.keyboardCtrl = keyboardCtrl;
+      this.keyboardCtrlPromise = null;
+    } else {
+      keyboardCtrl.destroy();
+    }
   }
 
   disconnectedCallback() {
+    if (this.keyboardCtrlPromise) {
+      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
+      this.keyboardCtrlPromise = null;
+    }
+
     if (this.keyboardCtrl) {
       this.keyboardCtrl.destroy();
+      this.keyboardCtrl = null;
     }
   }
 

core/src/components/header/header.md.scss

@@ -8,7 +8,7 @@
   box-shadow: $header-md-box-shadow;
 }
 
-.header-collapse-condense {
+.header-md.header-collapse-condense {
   display: none;
 }
 

core/src/components/header/test/condense-modal/header.e2e.ts

@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This test verifies that collapsible headers with mode="ios" work correctly
+ * when both iOS and MD stylesheets are loaded. The bug occurred because
+ * `.header-collapse-condense { display: none }` in the MD stylesheet was not
+ * scoped to `.header-md`, causing it to hide iOS condense headers when both
+ * stylesheets were present.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('header: condense with iOS mode override'), () => {
+    test('should show iOS condense header when both MD and iOS styles are loaded', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29929',
+      });
+
+      // Include both an MD header and an iOS modal to force both stylesheets to load
+      await page.setContent(
+        `
+        <!-- MD header to force MD stylesheet to load -->
+        <ion-header mode="md" id="mdHeader">
+          <ion-toolbar>
+            <ion-title>MD Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <!-- Modal with iOS condense header -->
+        <ion-modal>
+          <ion-header mode="ios" id="smallTitleHeader">
+            <ion-toolbar>
+              <ion-title>Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content fullscreen="true">
+            <ion-header collapse="condense" mode="ios" id="largeTitleHeader">
+              <ion-toolbar>
+                <ion-title size="large">Large Header</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <p>Content</p>
+          </ion-content>
+        </ion-modal>
+        `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      const largeTitleHeader = modal.locator('#largeTitleHeader');
+
+      // The large title header should be visible, not hidden by MD styles
+      await expect(largeTitleHeader).toBeVisible();
+
+      // Verify it has the iOS mode class
+      await expect(largeTitleHeader).toHaveClass(/header-ios/);
+
+      // Verify it does NOT have display: none applied
+      // This would fail if the MD stylesheet's unscoped .header-collapse-condense rule applies
+      const display = await largeTitleHeader.evaluate((el) => {
+        return window.getComputedStyle(el).display;
+      });
+      expect(display).not.toBe('none');
+    });
+  });
+});

core/src/components/input-password-toggle/input-password-toggle.tsx

@@ -126,9 +126,8 @@ export class InputPasswordToggle implements ComponentInterface {
           color={color}
           fill="clear"
           shape="round"
-          aria-checked={isPasswordVisible ? 'true' : 'false'}
           aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-          role="switch"
+          aria-pressed={isPasswordVisible ? 'true' : 'false'}
           type="button"
           onPointerDown={(ev) => {
             /**

core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts

@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 
   test.describe(title('input password toggle: aria attributes'), () => {
-    test('should inherit aria attributes to inner button on load', async ({ page }) => {
+    test('should have correct aria attributes on load', async ({ page }) => {
       await page.setContent(
         `
         <ion-input label="input" type="password">
@@ -35,9 +35,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       const nativeButton = page.locator('ion-input-password-toggle button');
 
       await expect(nativeButton).toHaveAttribute('aria-label', 'Show password');
-      await expect(nativeButton).toHaveAttribute('aria-checked', 'false');
+      await expect(nativeButton).toHaveAttribute('aria-pressed', 'false');
     });
-    test('should inherit aria attributes to inner button after toggle', async ({ page }) => {
+    test('should update aria attributes after toggle', async ({ page }) => {
       await page.setContent(
         `
         <ion-input label="input" type="password">
@@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await nativeButton.click();
 
       await expect(nativeButton).toHaveAttribute('aria-label', 'Hide password');
-      await expect(nativeButton).toHaveAttribute('aria-checked', 'true');
+      await expect(nativeButton).toHaveAttribute('aria-pressed', 'true');
     });
   });
 });