- {errorText}
+
+ {isInvalid ? errorText : null}
,
];
}
private getHintTextID(): string | undefined {
- const { el, helperText, errorText, helperTextId, errorTextId } = this;
+ const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
- if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+ if (isInvalid && errorText) {
return errorTextId;
}
@@ -777,7 +821,7 @@ export class Textarea implements ComponentInterface {
onFocus={this.onFocus}
onKeyDown={this.onKeyDown}
aria-describedby={this.getHintTextID()}
- aria-invalid={this.getHintTextID() === this.errorTextId}
+ aria-invalid={this.isInvalid ? 'true' : undefined}
{...this.inheritedAttributes}
>
{value}
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png
index a1b9494027f..7a196863be4 100644
Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png
index d6df1a91a90..3f28e8be5e7 100644
Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png
index b53e9afb48a..6bf73ae8c38 100644
Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png
index d061d544700..2a0696ce76d 100644
Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png
index cce758ccc44..083256f0dfa 100644
Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 9dfc0b63edd..0a362a6f8fc 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -32,7 +32,6 @@ import {
getElementRoot,
removeEventListener,
} from './helpers';
-import { isPlatform } from './platform';
let lastOverlayIndex = 0;
let lastId = 0;
@@ -487,7 +486,7 @@ export const getPresentedOverlay = (
*/
export const setRootAriaHidden = (hidden = false) => {
const root = getAppRoot(document);
- const viewContainer = root.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
+ const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
if (!viewContainer) {
return;
@@ -495,8 +494,10 @@ export const setRootAriaHidden = (hidden = false) => {
if (hidden) {
viewContainer.setAttribute('aria-hidden', 'true');
+ viewContainer.setAttribute('inert', '');
} else {
viewContainer.removeAttribute('aria-hidden');
+ viewContainer.removeAttribute('inert');
}
};
@@ -511,6 +512,18 @@ export const present = async
(
return;
}
+ /**
+ * When an overlay that steals focus
+ * is dismissed, focus should be returned
+ * to the element that was focused
+ * prior to the overlay opening. Toast
+ * does not steal focus and is excluded
+ * from returning focus as a result.
+ */
+ if (overlay.el.tagName !== 'ION-TOAST') {
+ restoreElementFocus(overlay.el);
+ }
+
/**
* Due to accessibility guidelines, toasts do not have
* focus traps.
@@ -523,9 +536,6 @@ export const present = async (
document.body.classList.add(BACKDROP_NO_SCROLL);
}
- hideUnderlyingOverlaysFromScreenReaders(overlay.el);
- hideAnimatingOverlayFromScreenReaders(overlay.el);
-
overlay.presented = true;
overlay.willPresent.emit();
overlay.willPresentShorthand?.emit();
@@ -542,18 +552,6 @@ export const present = async (
overlay.didPresentShorthand?.emit();
}
- /**
- * When an overlay that steals focus
- * is dismissed, focus should be returned
- * to the element that was focused
- * prior to the overlay opening. Toast
- * does not steal focus and is excluded
- * from returning focus as a result.
- */
- if (overlay.el.tagName !== 'ION-TOAST') {
- restoreElementFocus(overlay.el);
- }
-
/**
* If the focused element is already
* inside the overlay component then
@@ -577,6 +575,7 @@ export const present = async (
* screen readers.
*/
overlay.el.removeAttribute('aria-hidden');
+ overlay.el.removeAttribute('inert');
};
/**
@@ -595,6 +594,9 @@ const restoreElementFocus = async (overlayEl: any) => {
return;
}
+ // Ensure active element is blurred to prevent a11y warning issues
+ previousElement.blur();
+
const shadowRoot = previousElement?.shadowRoot;
if (shadowRoot) {
// If there are no inner focusable elements, just focus the host element.
@@ -674,13 +676,6 @@ export const dismiss = async (
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 });
@@ -728,8 +723,6 @@ export const dismiss = async (
overlay.el.remove();
- revealOverlaysToScreenReaders();
-
return true;
};
@@ -966,98 +959,4 @@ export const createTriggerController = () => {
};
};
-/**
- * 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: HTMLIonOverlayElement) => {
- 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');
- }
-};
-
-/**
- * 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: HTMLIonOverlayElement) => {
- if (doc === undefined) return;
-
- const overlays = getPresentedOverlays(doc);
-
- for (let i = overlays.length - 1; i >= 0; i--) {
- const presentedOverlay = overlays[i];
- const nextPresentedOverlay = overlays[i + 1] ?? 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');
- }
- }
-};
-
-/**
- * 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');
-
- /**
- * 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;
- }
- }
-};
-
export const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
diff --git a/core/src/utils/test/overlays/overlays.spec.ts b/core/src/utils/test/overlays/overlays.spec.ts
deleted file mode 100644
index 29a77c3c268..00000000000
--- a/core/src/utils/test/overlays/overlays.spec.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Modal } from '../../../components/modal/modal';
-import { Toast } from '../../../components/toast/toast';
-import { Nav } from '../../../components/nav/nav';
-import { RouterOutlet } from '../../../components/router-outlet/router-outlet';
-import { setRootAriaHidden } from '../../overlays';
-
-describe('setRootAriaHidden()', () => {
- it('should correctly remove and re-add router outlet from accessibility tree', async () => {
- const page = await newSpecPage({
- components: [RouterOutlet],
- html: `
-
- `,
- });
-
- const routerOutlet = page.body.querySelector('ion-router-outlet')!;
-
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
-
- setRootAriaHidden(true);
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
- setRootAriaHidden(false);
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should correctly remove and re-add nav from accessibility tree', async () => {
- const page = await newSpecPage({
- components: [Nav],
- html: `
-
- `,
- });
-
- const nav = page.body.querySelector('ion-nav')!;
-
- expect(nav.hasAttribute('aria-hidden')).toEqual(false);
-
- setRootAriaHidden(true);
- expect(nav.hasAttribute('aria-hidden')).toEqual(true);
-
- setRootAriaHidden(false);
- expect(nav.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should correctly remove and re-add custom container from accessibility tree', async () => {
- const page = await newSpecPage({
- components: [],
- html: `
-
-
- `,
- });
-
- const containerRoot = page.body.querySelector('#ion-view-container-root')!;
- const notContainerRoot = page.body.querySelector('#not-container-root')!;
-
- expect(containerRoot.hasAttribute('aria-hidden')).toEqual(false);
- expect(notContainerRoot.hasAttribute('aria-hidden')).toEqual(false);
-
- setRootAriaHidden(true);
- expect(containerRoot.hasAttribute('aria-hidden')).toEqual(true);
- expect(notContainerRoot.hasAttribute('aria-hidden')).toEqual(false);
-
- setRootAriaHidden(false);
- expect(containerRoot.hasAttribute('aria-hidden')).toEqual(false);
- expect(notContainerRoot.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should not error if router outlet was not found', async () => {
- await newSpecPage({
- components: [],
- html: `
-
- `,
- });
-
- setRootAriaHidden(true);
- });
-
- it('should remove router-outlet from accessibility tree when overlay is presented', async () => {
- const page = await newSpecPage({
- components: [RouterOutlet, Modal],
- html: `
-
-
-
- `,
- });
-
- const routerOutlet = page.body.querySelector('ion-router-outlet')!;
- const modal = page.body.querySelector('ion-modal')!;
-
- await modal.present();
-
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
- });
-
- it('should add router-outlet from accessibility tree when then final overlay is dismissed', async () => {
- const page = await newSpecPage({
- components: [RouterOutlet, Modal],
- html: `
-
-
-
-
- `,
- });
-
- const routerOutlet = page.body.querySelector('ion-router-outlet')!;
- const modalOne = page.body.querySelector('ion-modal#one')!;
- const modalTwo = page.body.querySelector('ion-modal#two')!;
-
- await modalOne.present();
-
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
- await modalTwo.present();
-
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
- await modalOne.dismiss();
-
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
- await modalTwo.dismiss();
-
- expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
- });
-});
-
-describe('aria-hidden on individual overlays', () => {
- it('should hide non-topmost overlays from screen readers', async () => {
- const page = await newSpecPage({
- components: [Modal],
- html: `
-
-
- `,
- });
-
- const modalOne = page.body.querySelector('ion-modal#one')!;
- const modalTwo = page.body.querySelector('ion-modal#two')!;
-
- await modalOne.present();
- await modalTwo.present();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
- expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should unhide new topmost overlay from screen readers when topmost is dismissed', async () => {
- const page = await newSpecPage({
- components: [Modal],
- html: `
-
-
- `,
- });
-
- const modalOne = page.body.querySelector('ion-modal#one')!;
- const modalTwo = page.body.querySelector('ion-modal#two')!;
-
- await modalOne.present();
- await modalTwo.present();
-
- // dismiss modalTwo so that modalOne becomes the new topmost overlay
- await modalTwo.dismiss();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should not keep overlays hidden from screen readers if presented after being dismissed while non-topmost', async () => {
- const page = await newSpecPage({
- components: [Modal],
- html: `
-
-
- `,
- });
-
- const modalOne = page.body.querySelector('ion-modal#one')!;
- const modalTwo = page.body.querySelector('ion-modal#two')!;
-
- await modalOne.present();
- await modalTwo.present();
-
- // modalOne is not the topmost overlay at this point and is hidden from screen readers
- await modalOne.dismiss();
-
- // modalOne will become the topmost overlay; ensure it isn't still hidden from screen readers
- await modalOne.present();
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should not hide previous overlay if top-most overlay is toast', async () => {
- const page = await newSpecPage({
- components: [Modal, Toast],
- html: `
-
-
-
-
- `,
- });
-
- const modalOne = page.body.querySelector('ion-modal#m-one')!;
- const modalTwo = page.body.querySelector('ion-modal#m-two')!;
- const toastOne = page.body.querySelector('ion-toast#t-one')!;
- const toastTwo = page.body.querySelector('ion-toast#t-two')!;
-
- await modalOne.present();
- await modalTwo.present();
- await toastOne.present();
- await toastTwo.present();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
- expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
- expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
- expect(toastTwo.hasAttribute('aria-hidden')).toEqual(false);
-
- await toastTwo.dismiss();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
- expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
- expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
-
- await toastOne.dismiss();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
- expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
- });
-
- it('should hide previous overlay even with a toast that is not the top-most overlay', async () => {
- const page = await newSpecPage({
- components: [Modal, Toast],
- html: `
-
-
-
- `,
- });
-
- const modalOne = page.body.querySelector('ion-modal#m-one')!;
- const modalTwo = page.body.querySelector('ion-modal#m-two')!;
- const toastOne = page.body.querySelector('ion-toast#t-one')!;
-
- await modalOne.present();
- await toastOne.present();
- await modalTwo.present();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
- expect(toastOne.hasAttribute('aria-hidden')).toEqual(true);
- expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-
- await modalTwo.dismiss();
-
- expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
- expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
- });
-});
diff --git a/lerna.json b/lerna.json
index d1d3184fc65..29cdc617c16 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
"core",
"packages/*"
],
- "version": "8.7.3"
+ "version": "8.7.4"
}
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 0f669b46907..a8b9fd6f838 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index bdf063c7256..05662502038 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/angular-server",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular-server",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.7.3"
+ "@ionic/core": "^8.7.4"
},
"devDependencies": {
"@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,9 +1031,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.36.2",
@@ -7306,9 +7306,9 @@
"dev": true
},
"@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"requires": {
"@stencil/core": "4.36.2",
"ionicons": "^8.0.13",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 4dee966fd96..5fd65a465ff 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular-server",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "Angular SSR Module for Ionic",
"keywords": [
"ionic",
@@ -62,6 +62,6 @@
},
"prettier": "@ionic/prettier-config",
"dependencies": {
- "@ionic/core": "^8.7.3"
+ "@ionic/core": "^8.7.4"
}
}
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index eccd3ceee47..b5df3e3df87 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **input:** improve error text accessibility ([#30635](https://github.com/ionic-team/ionic-framework/issues/30635)) ([c339bc3](https://github.com/ionic-team/ionic-framework/commit/c339bc36827b62ef871325869a9a5db9b17ac785))
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 058deef6ce4..31ceaa1a298 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.7.3",
+ "@ionic/core": "^8.7.4",
"ionicons": "^8.0.13",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@@ -1398,9 +1398,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.36.2",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 2159739c080..fc9a71b4e31 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -37,6 +37,7 @@
"eslint": "eslint . --ext .ts",
"prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
"sync": "./scripts/sync.sh",
+ "local.sync.and.pack": "./scripts/sync-and-pack.sh",
"test": "echo 'angular no tests yet'",
"tsc": "tsc -p .",
"validate": "npm i && npm run lint && npm run test && npm run build"
@@ -47,7 +48,7 @@
}
},
"dependencies": {
- "@ionic/core": "^8.7.3",
+ "@ionic/core": "^8.7.4",
"ionicons": "^8.0.13",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
diff --git a/packages/angular/scripts/sync-and-pack.sh b/packages/angular/scripts/sync-and-pack.sh
new file mode 100755
index 00000000000..c42633600c0
--- /dev/null
+++ b/packages/angular/scripts/sync-and-pack.sh
@@ -0,0 +1,30 @@
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Pack @ionic/core
+echo "\n📦 Packing @ionic/core..."
+npm pack ../../core
+
+# Update package.json with global path for the @ionic/core package
+echo "\n⚙️ Updating package.json with global path for @ionic/core..."
+CORE_PACKAGE=$(ls ionic-core-*.tgz | head -1)
+sed -i "" "s|\"@ionic/core\": \".*\"|\"@ionic/core\": \"file:$(pwd)/$CORE_PACKAGE\"|" package.json
+
+# Remove package-lock.json
+rm -f package-lock.json
+
+# Install Dependencies
+echo "\n🔧 Installing dependencies..."
+npm install
+
+# Build the project
+echo "\n🔨 Building the project..."
+npm run build
+
+# Pack @ionic/angular
+echo "\n📦 Packing @ionic/angular..."
+npm pack ./dist
+
+echo "\n✅ Packed ionic-angular package!\n $(pwd)/$(ls ionic-angular-*.tgz | head -1)\n"
diff --git a/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts b/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts
index caf27670d2d..ac0ebd501fb 100644
--- a/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts
+++ b/packages/angular/test/base/src/app/lazy/app-lazy/app.module.ts
@@ -28,6 +28,7 @@ import { AlertComponent } from '../alert/alert.component';
import { AccordionComponent } from '../accordion/accordion.component';
import { AccordionModalComponent } from '../accordion/accordion-modal/accordion-modal.component';
import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
+import { TemplateFormComponent } from '../template-form/template-form.component';
@NgModule({
declarations: [
@@ -53,7 +54,8 @@ import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
AlertComponent,
AccordionComponent,
AccordionModalComponent,
- TabsBasicComponent
+ TabsBasicComponent,
+ TemplateFormComponent
],
imports: [
CommonModule,
diff --git a/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts b/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
index 0e15ea2867d..1a46992f92c 100644
--- a/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
+++ b/packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts
@@ -19,6 +19,7 @@ import { NavigationPage3Component } from '../navigation-page3/navigation-page3.c
import { AlertComponent } from '../alert/alert.component';
import { AccordionComponent } from '../accordion/accordion.component';
import { TabsBasicComponent } from '../tabs-basic/tabs-basic.component';
+import { TemplateFormComponent } from '../template-form/template-form.component';
export const routes: Routes = [
{
@@ -33,6 +34,7 @@ export const routes: Routes = [
{ path: 'textarea', loadChildren: () => import('../textarea/textarea.module').then(m => m.TextareaModule) },
{ path: 'searchbar', loadChildren: () => import('../searchbar/searchbar.module').then(m => m.SearchbarModule) },
{ path: 'form', component: FormComponent },
+ { path: 'template-form', component: TemplateFormComponent },
{ path: 'modals', component: ModalComponent },
{ path: 'modal-inline', loadChildren: () => import('../modal-inline').then(m => m.ModalInlineModule) },
{ path: 'view-child', component: ViewChildComponent },
diff --git a/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html b/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
index 80418148c5e..136a0119d34 100644
--- a/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
+++ b/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
@@ -25,6 +25,11 @@
Form Test
+
+
+ Template-Driven Form Test
+
+
Modals Test
diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html
new file mode 100644
index 00000000000..d33aa4ae1e5
--- /dev/null
+++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html
@@ -0,0 +1,116 @@
+
+
+ Template-Driven Form Validation Test
+
+
+
+
+
+
+
+
Instructions to reproduce issue:
+
+ - Click in the "Required Input" field
+ - Click outside without entering text
+ - The field should show as touched and invalid
+ - The error text should appear below the input
+ - For screen readers, the validation state should be announced
+
+
Note: With template-driven forms, Angular applies validation classes to the wrapper element, not directly to ion-input/ion-textarea.
+
+
Screen Reader Testing Instructions:
+
+ - Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
+ - Tab through the form fields
+ - When you tab away from an empty required field, the error should be announced immediately
+ - The error text should be announced BEFORE the next field is announced
+ - Test in Chrome, Safari, and Firefox to verify consistent behavior
+
+
+ Submit Form
+ Reset Form
+
+
diff --git a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss
new file mode 100644
index 00000000000..add228ccab1
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss
@@ -0,0 +1,36 @@
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ grid-row-gap: 20px;
+ grid-column-gap: 20px;
+}
+
+h2 {
+ font-size: 12px;
+ font-weight: normal;
+ color: var(--ion-color-step-600);
+ margin-top: 10px;
+ margin-bottom: 5px;
+}
+
+.validation-info {
+ margin: 20px;
+ padding: 10px;
+ background: var(--ion-color-light);
+ border-radius: 4px;
+}
+
+.validation-info h2 {
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 10px;
+}
+
+.validation-info ol {
+ margin: 0;
+ padding-left: 20px;
+}
+
+.validation-info li {
+ margin-bottom: 5px;
+}
diff --git a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.ts b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.ts
new file mode 100644
index 00000000000..aee73b0735f
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.ts
@@ -0,0 +1,85 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+ FormBuilder,
+ ReactiveFormsModule,
+ Validators
+} from '@angular/forms';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonInput,
+ IonTitle,
+ IonToolbar
+} from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-input-validation',
+ templateUrl: './input-validation.component.html',
+ styleUrls: ['./input-validation.component.scss'],
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ IonInput,
+ IonButton,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonContent
+ ]
+})
+export class InputValidationComponent {
+ // Field metadata for labels and error messages
+ fieldMetadata = {
+ email: {
+ label: 'Email',
+ helperText: "We'll never share your email",
+ errorText: 'Please enter a valid email address'
+ },
+ name: {
+ label: 'Full Name',
+ helperText: 'First and last name',
+ errorText: 'Name is required'
+ },
+ phone: {
+ label: 'Phone',
+ helperText: 'Format: (555) 555-5555',
+ errorText: 'Please enter a valid phone number'
+ },
+ password: {
+ label: 'Password',
+ helperText: 'At least 8 characters',
+ errorText: 'Password must be at least 8 characters'
+ },
+ age: {
+ label: 'Age',
+ helperText: 'Must be 18 or older',
+ errorText: 'Please enter a valid age (18-120)'
+ },
+ optional: {
+ label: 'Optional Info',
+ helperText: 'You can skip this field',
+ errorText: ''
+ }
+ };
+
+ form = this.fb.group({
+ email: ['', [Validators.required, Validators.email]],
+ name: ['', Validators.required],
+ phone: ['', [Validators.required, Validators.pattern(/^\(\d{3}\) \d{3}-\d{4}$/)]],
+ password: ['', [Validators.required, Validators.minLength(8)]],
+ age: ['', [Validators.required, Validators.min(18), Validators.max(120)]],
+ optional: ['']
+ });
+
+ constructor(private fb: FormBuilder) {}
+
+ // Submit form
+ onSubmit(): void {
+ if (this.form.valid) {
+ alert('Form submitted successfully!');
+ }
+ }
+}
diff --git a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.html b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.html
new file mode 100644
index 00000000000..d32a9dd8627
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.html
@@ -0,0 +1,133 @@
+
+
+ Textarea - Validation Test
+
+
+
+
+
+
Screen Reader Testing Instructions:
+
+ - Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
+ - Tab through the form fields
+ - When you tab away from an empty required field, the error should be announced immediately
+ - The error text should be announced BEFORE the next field is announced
+ - Test in Chrome, Safari, and Firefox to verify consistent behavior
+
+
+ Submit Form
+ Reset Form
+
+
diff --git a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss
new file mode 100644
index 00000000000..6462ef79f69
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss
@@ -0,0 +1,36 @@
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ grid-row-gap: 20px;
+ grid-column-gap: 20px;
+}
+
+h2 {
+ font-size: 12px;
+ font-weight: normal;
+ color: var(--ion-color-step-600);
+ margin-top: 10px;
+ margin-bottom: 5px;
+}
+
+.validation-info {
+ margin: 20px;
+ padding: 10px;
+ background: var(--ion-color-light);
+ border-radius: 4px;
+}
+
+.validation-info h2 {
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 10px;
+}
+
+.validation-info ol {
+ margin: 0;
+ padding-left: 20px;
+}
+
+.validation-info li {
+ margin-bottom: 5px;
+}
diff --git a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.ts b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.ts
new file mode 100644
index 00000000000..a942bac78df
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.ts
@@ -0,0 +1,105 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+ AbstractControl,
+ FormBuilder,
+ ReactiveFormsModule,
+ ValidationErrors,
+ Validators
+} from '@angular/forms';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonTextarea,
+ IonTitle,
+ IonToolbar
+} from '@ionic/angular/standalone';
+
+// Custom validator for address (must be at least 10 chars and contain a digit)
+function addressValidator(control: AbstractControl): ValidationErrors | null {
+ const value = control.value;
+ if (!value || value.length < 10) {
+ return { invalidAddress: true };
+ }
+ // Check if it contains at least one number (for street/zip)
+ return /\d/.test(value) ? null : { invalidAddress: true };
+}
+
+@Component({
+ selector: 'app-textarea-validation',
+ templateUrl: './textarea-validation.component.html',
+ styleUrls: ['./textarea-validation.component.scss'],
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ IonTextarea,
+ IonButton,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonContent
+ ]
+})
+export class TextareaValidationComponent {
+ // Field metadata for labels and error messages
+ fieldMetadata = {
+ description: {
+ label: 'Description',
+ helperText: 'At least 20 characters',
+ errorText: 'Description must be at least 20 characters',
+ rows: 4
+ },
+ comments: {
+ label: 'Comments',
+ helperText: 'Please provide your feedback',
+ errorText: 'Comments are required',
+ rows: 4
+ },
+ bio: {
+ label: 'Bio',
+ helperText: 'Maximum 200 characters',
+ errorText: 'Bio is required',
+ rows: 4,
+ counter: true
+ },
+ address: {
+ label: 'Address',
+ helperText: 'Include street, city, state, and zip',
+ errorText: 'Please enter a complete address',
+ rows: 3
+ },
+ review: {
+ label: 'Product Review',
+ helperText: 'Between 50-500 characters',
+ errorText: 'Review must be between 50-500 characters',
+ rows: 5,
+ counter: true
+ },
+ notes: {
+ label: 'Additional Notes',
+ helperText: 'This field is optional',
+ errorText: '',
+ rows: 3
+ }
+ };
+
+ form = this.fb.group({
+ description: ['', [Validators.required, Validators.minLength(20)]],
+ comments: ['', Validators.required],
+ bio: ['', [Validators.required, Validators.maxLength(200)]],
+ address: ['', [Validators.required, addressValidator]],
+ review: ['', [Validators.required, Validators.minLength(50), Validators.maxLength(500)]],
+ notes: ['']
+ });
+
+ constructor(private fb: FormBuilder) {}
+
+ // Submit form
+ onSubmit(): void {
+ if (this.form.valid) {
+ alert('Form submitted successfully!');
+ }
+ }
+}
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index c79dd5233ae..d732ce1da44 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/docs
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 3024fac5486..84681be496d 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@ionic/docs",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/docs",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT"
}
}
diff --git a/packages/docs/package.json b/packages/docs/package.json
index fd63d2f88fe..0ef9ba6e49b 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/docs",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "Pre-packaged API documentation for the Ionic docs.",
"main": "core.json",
"types": "core.d.ts",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index e5273839847..96ce86fdad3 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index b72f19a9d82..9a00aa0b8f0 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/react-router",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/react-router",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT",
"dependencies": {
- "@ionic/react": "^8.7.3",
+ "@ionic/react": "^8.7.4",
"tslib": "*"
},
"devDependencies": {
@@ -238,9 +238,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.36.2",
@@ -415,12 +415,12 @@
}
},
"node_modules/@ionic/react": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.3.tgz",
- "integrity": "sha512-ArByomMeBNI1HpvfYc6E5E76wO2agg87LxLaNI13PYTb1UpFTw6vf7P+lU+cQc9roaC48KQwV0Ndyd3XmkkyfA==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.4.tgz",
+ "integrity": "sha512-ImJo4VLT687nGS72zGo87b+aaaD4tWWFGtpbmM21rnh2xkWQJKjvZQRAgA6AK9tdMMYHqy0bJvAkykFpzV68XA==",
"license": "MIT",
"dependencies": {
- "@ionic/core": "8.7.3",
+ "@ionic/core": "8.7.4",
"ionicons": "^8.0.13",
"tslib": "*"
},
@@ -4175,9 +4175,9 @@
"dev": true
},
"@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"requires": {
"@stencil/core": "4.36.2",
"ionicons": "^8.0.13",
@@ -4281,11 +4281,11 @@
"requires": {}
},
"@ionic/react": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.3.tgz",
- "integrity": "sha512-ArByomMeBNI1HpvfYc6E5E76wO2agg87LxLaNI13PYTb1UpFTw6vf7P+lU+cQc9roaC48KQwV0Ndyd3XmkkyfA==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.4.tgz",
+ "integrity": "sha512-ImJo4VLT687nGS72zGo87b+aaaD4tWWFGtpbmM21rnh2xkWQJKjvZQRAgA6AK9tdMMYHqy0bJvAkykFpzV68XA==",
"requires": {
- "@ionic/core": "8.7.3",
+ "@ionic/core": "8.7.4",
"ionicons": "^8.0.13",
"tslib": "*"
}
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 22ce42f2f25..3442afabbc7 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/react-router",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "React Router wrapper for @ionic/react",
"keywords": [
"ionic",
@@ -36,7 +36,7 @@
"dist/"
],
"dependencies": {
- "@ionic/react": "^8.7.3",
+ "@ionic/react": "^8.7.4",
"tslib": "*"
},
"peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 22d35736739..e88df89c730 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 474323ba379..576713eff59 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/react",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ionic/react",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.7.3",
+ "@ionic/core": "^8.7.4",
"ionicons": "^8.0.13",
"tslib": "*"
},
@@ -736,9 +736,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.36.2",
diff --git a/packages/react/package.json b/packages/react/package.json
index 0305d6cc985..cd0b987ca12 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/react",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "React specific wrapper for @ionic/core",
"keywords": [
"ionic",
@@ -30,7 +30,8 @@
"lint.fix": "npm run eslint -- --fix && npm run prettier -- --write --cache",
"copy": "node scripts/copy.js",
"test.spec": "jest --ci",
- "sync": "sh ./scripts/sync.sh"
+ "sync": "sh ./scripts/sync.sh",
+ "local.sync.and.pack": "./scripts/sync-and-pack.sh"
},
"main": "dist/index.js",
"types": "dist/types/index.d.ts",
@@ -39,7 +40,7 @@
"css/"
],
"dependencies": {
- "@ionic/core": "^8.7.3",
+ "@ionic/core": "^8.7.4",
"ionicons": "^8.0.13",
"tslib": "*"
},
diff --git a/packages/react/scripts/sync-and-pack.sh b/packages/react/scripts/sync-and-pack.sh
new file mode 100755
index 00000000000..6ae2b2a9b88
--- /dev/null
+++ b/packages/react/scripts/sync-and-pack.sh
@@ -0,0 +1,30 @@
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Pack @ionic/core
+echo "\n📦 Packing @ionic/core..."
+npm pack ../../core
+
+# Update package.json with global path for the @ionic/core package
+echo "\n⚙️ Updating package.json with global path for @ionic/core..."
+CORE_PACKAGE=$(ls ionic-core-*.tgz | head -1)
+sed -i "" "s|\"@ionic/core\": \".*\"|\"@ionic/core\": \"file:$(pwd)/$CORE_PACKAGE\"|" package.json
+
+# Remove package-lock.json
+rm -f package-lock.json
+
+# Install Dependencies
+echo "\n🔧 Installing dependencies..."
+npm install
+
+# Build the project
+echo "\n🔨 Building the project..."
+npm run build
+
+# Pack @ionic/react
+echo "\n📦 Packing @ionic/react..."
+npm pack
+
+echo "\n✅ Packed @ionic/react package!\n $(pwd)/$(ls ionic-react-*.tgz | head -1)\n"
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 3ab4a326c60..9845def7cb2 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 4032fc41199..6e25076d3df 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/vue-router",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/vue-router",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT",
"dependencies": {
- "@ionic/vue": "^8.7.3"
+ "@ionic/vue": "^8.7.4"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",
@@ -673,9 +673,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.36.2",
@@ -865,12 +865,12 @@
}
},
"node_modules/@ionic/vue": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.3.tgz",
- "integrity": "sha512-QMtlV+hIz8icO7eYwQrK4mN0CqySXKllot6BeJXPBFVaK9la0TY6tUaxtSxpz22wYj4jVVF7MRn6HZ0RCfUJJQ==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.4.tgz",
+ "integrity": "sha512-Gof5oHUfyCMBA5VvvtHaLmP4OX+on4nSxCrrDXCFFbgE3b9CXUJGSpBqPwzvrVxkpbPHfkbkgJXhoIWlls4zXA==",
"license": "MIT",
"dependencies": {
- "@ionic/core": "8.7.3",
+ "@ionic/core": "8.7.4",
"@stencil/vue-output-target": "0.10.7",
"ionicons": "^8.0.13"
}
@@ -8041,9 +8041,9 @@
"dev": true
},
"@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"requires": {
"@stencil/core": "4.36.2",
"ionicons": "^8.0.13",
@@ -8156,11 +8156,11 @@
"requires": {}
},
"@ionic/vue": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.3.tgz",
- "integrity": "sha512-QMtlV+hIz8icO7eYwQrK4mN0CqySXKllot6BeJXPBFVaK9la0TY6tUaxtSxpz22wYj4jVVF7MRn6HZ0RCfUJJQ==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.4.tgz",
+ "integrity": "sha512-Gof5oHUfyCMBA5VvvtHaLmP4OX+on4nSxCrrDXCFFbgE3b9CXUJGSpBqPwzvrVxkpbPHfkbkgJXhoIWlls4zXA==",
"requires": {
- "@ionic/core": "8.7.3",
+ "@ionic/core": "8.7.4",
"@stencil/vue-output-target": "0.10.7",
"ionicons": "^8.0.13"
}
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 4067447cfd1..199ff019eab 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/vue-router",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "Vue Router integration for @ionic/vue",
"scripts": {
"test.spec": "jest",
@@ -44,7 +44,7 @@
},
"homepage": "https://github.com/ionic-team/ionic-framework#readme",
"dependencies": {
- "@ionic/vue": "^8.7.3"
+ "@ionic/vue": "^8.7.4"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 8ce75efd757..67a9704e54b 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+
+
+
+
+
## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
**Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 47c18f02190..c4ee7d7891c 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/vue",
- "version": "8.7.3",
+ "version": "8.7.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ionic/vue",
- "version": "8.7.3",
+ "version": "8.7.4",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.7.3",
+ "@ionic/core": "^8.7.4",
"@stencil/vue-output-target": "0.10.7",
"ionicons": "^8.0.13"
},
@@ -222,9 +222,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "8.7.3",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.3.tgz",
- "integrity": "sha512-KdyMxpMDQj+uqpztpK6yvN/T96hqcDiGXQ4T+aAZ+LW3wV3+0it6/rbh9C1B/wCl4Isnm4IRltPabgEfNJ50nw==",
+ "version": "8.7.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.4.tgz",
+ "integrity": "sha512-ZCJYKLWdxq+x4OmEDvodqR+y/FSDJYkkFHozWe1+b/p0l9lNN13lLuSZVs0AEOgPtO89Atl67rTbpGE2ad/SCw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "4.36.2",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 756c62aa0e0..2aeb7b572de 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/vue",
- "version": "8.7.3",
+ "version": "8.7.4",
"description": "Vue specific wrapper for @ionic/core",
"scripts": {
"eslint": "eslint src",
@@ -16,7 +16,8 @@
"build.vetur": "node ./scripts/build-vetur.js",
"copy": "node ./scripts/copy-css.js",
"copy.overlays": "node ./scripts/copy-overlays.js",
- "sync": "sh ./scripts/sync.sh"
+ "sync": "sh ./scripts/sync.sh",
+ "local.sync.and.pack": "./scripts/sync-and-pack.sh"
},
"main": "./dist/index.js",
"types": "./dist/types/index.d.ts",
@@ -67,7 +68,7 @@
"vue-router": "^4.0.16"
},
"dependencies": {
- "@ionic/core": "^8.7.3",
+ "@ionic/core": "^8.7.4",
"@stencil/vue-output-target": "0.10.7",
"ionicons": "^8.0.13"
},
diff --git a/packages/vue/scripts/sync-and-pack.sh b/packages/vue/scripts/sync-and-pack.sh
new file mode 100755
index 00000000000..ad35a7e5d44
--- /dev/null
+++ b/packages/vue/scripts/sync-and-pack.sh
@@ -0,0 +1,37 @@
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Delete vite cache
+rm -rf node_modules/.vite
+
+# Pack @ionic/core
+echo "\n📦 Packing @ionic/core..."
+npm pack ../../core
+
+# Pack @ionic/vue-router
+echo "\n📦 Packing @ionic/vue-router..."
+npm pack ../vue-router
+
+# Update package.json with global path for the @ionic/core package
+echo "\n⚙️ Updating package.json with global path for @ionic/core..."
+CORE_PACKAGE=$(ls ionic-core-*.tgz | head -1)
+sed -i "" "s|\"@ionic/core\": \".*\"|\"@ionic/core\": \"file:$(pwd)/$CORE_PACKAGE\"|" package.json
+
+# Remove package-lock.json
+rm -f package-lock.json
+
+# Install Dependencies
+echo "\n🔧 Installing dependencies..."
+npm install
+
+# Build the project
+echo "\n🔨 Building the project..."
+npm run build
+
+# Pack @ionic/vue
+echo "\n📦 Packing @ionic/vue..."
+npm pack
+
+echo "\n✅ Packed @ionic/vue package!\n $(pwd)/$(ls ionic-vue-*.tgz | head -1)\n"