mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
abdf9ce932897ec0afa69d9a236bf5ee2e984211
3711 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Maria Hutt
|
d46b0b15f6 |
fix(datetime): stretch ion-buttons to fill space for ios (#30963)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `iOS` datetime buttons do not stretch to its available height. This can lead to style inconsistencies with `md`. <img width="926" height="444" alt="Screenshot 2026-02-23 at 10 35 10 AM" src="https://github.com/user-attachments/assets/79835a34-5039-4ed8-8ce8-fbb696258052" /> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The buttons fill in the available height. <img width="359" height="362" alt="Screenshot 2026-02-23 at 10 37 18 AM" src="https://github.com/user-attachments/assets/362410eb-ec0b-46c3-87c5-e92af659830d" /> - The arrows also line up with each other. <img width="806" height="590" alt="Screenshot 2026-02-23 at 10 30 17 AM" src="https://github.com/user-attachments/assets/31ab043c-858e-498b-a947-1f08bb6fb7a1" /> ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Preview](https://ionic-framework-git-datetime-ios-buttons-ionic1.vercel.app/src/components/datetime/test/basic/?ionic%3Amode=ios) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
OS-jacobbell
|
682a17ebb7 |
fix(radio-group): prevent DOMException and NotFoundError when filtering radios (#30958)
resolves #30279 resolves #30359 ## What is the current behavior? While Ionic's `stencil.config.ts` sets `experimentalSlotFixes: true`, the fixes never get applied at runtime. Ionic is using an external runtime, so Ionic components import `defineCustomElement` from `@stencil/core/internal/client` at runtime and this code has no awareness of the project's stencil configuration. This leads to a `NotFoundError` (Failed to execute 'removeChild' on 'Node') when filtering or dynamically removing radios in an `ion-radio-group`. The error occurs because `ion-radio-group` wraps its slotted content in an internal `<div>`. ## What is the new behavior? By setting `externalRuntime: false`, Stencil generates a project-specific file with `defineCustomElement` that components import. This file has the project's build settings baked in, correctly applying slot fixes. Additionally, the internal wrapper `<div>` around the slotted content in `ion-radio-group` is removed. With slot fixes correctly applied and the wrapper removed, radios can be filtered or dynamically removed without triggering `NotFoundError` or `DOMExceptions`. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information External Runtime is enabled by default and designed for projects that import Stencil components from multiple sources. This is flawed because those components will not be running with the runtime settings for which they were made. |
||
|
Bengt Weiße
|
70b1237823 |
fix(many): clear timeouts (#30851)
Issue number: resolves #30860 ## What is the current behavior? We have flaky tests in an ionic angular project that root cause are not cleaned up timeouts. I commented out the timeout in the searchbar componentWillLoad method. and after several runs no flaky tests at all. My guess -> test runs faster than the 300ms it takes til the timeout runs. Everything is cleaned up, but not the ionic timeouts (i think i saw something similar in other components) ## What is the new behavior? Timeouts are cleaned on disconnect. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Testrunner is vitest + angular 20 and latest ionic version 8.x |
||
|
Shane
|
6490797851 |
fix(modal, popover): respect safe area insets on popovers and modals (#30949)
Issue number: resolves #28411 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? When a modal is displayed on tablet-sized screens (>= 768px × >= 600px), the `--ion-safe-area-*` CSS variables are explicitly set to 0px. This was intended for inset modals that don't touch screen edges, but it breaks safe area handling on newer iPads with Face ID/home indicators, causing content to overlap with system UI elements. ## What is the new behavior? Modals now dynamically handle safe-area insets based on their type and position. This has to be done because modals that don't touch the edges cannot have a safe area applied (because it will add unnecessary padding), but modals that do touch the edges need to apply safe area correctly or the edges will be obstructed by whatever is in the safe area. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Modals test page](https://ionic-framework-git-fw-6830-2-ionic1.vercel.app/src/components/modal/test/safe-area/index.html) [Popovers test page](https://ionic-framework-git-fw-6830-2-ionic1.vercel.app/src/components/popover/test/safe-area/index.html) Current dev build: ``` 8.7.18-dev.11770674094.18396f54 ``` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Brandy Smith
|
442e3e9831 |
fix(toast): keep icon on the same line as long message in stacked layout (#30923)
Issue number: resolves #30908 --------- ## What is the current behavior? Toast with an icon and long message using a stacked layout will wrap the message below the icon. ## What is the new behavior? - Apply `flex: 1` to `.toast-content` regardless of layout, which makes sure the content does not get wrapped under the icon - Adds an e2e test for a stacked toast with a long message to `toast/test/layout` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - Dev build: `8.7.18-dev.11768592717.14a59d2f` - Preview: [Layout](https://ionic-framework-git-fw-7035-ionic1.vercel.app/src/components/toast/test/layout/) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Shane
|
ab733b71dd |
fix(input): prevent Android TalkBack from focusing label separately (#30895)
Issue number: resolves internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? When using `ion-input` with a label on Android, TalkBack treats the visual label text as a separate focusable element. This causes the initial focus to land on the label instead of the input field, creating a confusing experience for screen reader users. ## What is the new behavior? The label text wrapper is now hidden from the accessibility tree via `aria-hidden="true"`, while the native input maintains proper labeling through `aria-labelledby`. This ensures Android TalkBack focuses directly on the input field while still announcing the label correctly. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.16-dev.11767032989.1ae720d0 ``` |
||
|
Shane
|
f99d0007a8 |
fix(tab-bar): prevent keyboard controller memory leak on rapid mount/unmount (#30906)
Issue number: resolves internal --------- ## What is the current behavior? When `ion-tab-bar` is rapidly mounted and unmounted, a race condition in connectedCallback can cause the keyboard controller to be created after the component has been disconnected. This results in orphaned event listeners (`keyboardWillShow`, `keyboardWillHide`) on the window object that are never cleaned up, causing a memory leak. ## What is the new behavior? The keyboard controller is now properly destroyed in all scenarios: - If the component is disconnected while createKeyboardController is pending, the promise is tracked and destroyed when it resolves - If a new connectedCallback runs before the previous async completes, the stale controller is destroyed The promise tracking pattern ensures only the most recent async operation assigns its result ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.17-dev.11767895575.16ea7cef ``` I was unable to find a way to create tests that accurately identified if this problem was occurring. Memory leaks are notoriously difficult to created automated tests for. I ultimately removed my previous attempts because I didn't want to give a false sense of security. |
||
|
Shane
|
3b3318da51 |
fix(input): prevent placeholder from overlapping start slot during scroll assist (#30896)
Issue number: resolves internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? On iOS, when focusing an `ion-input` or `ion-textarea` that requires scrolling into view (scroll assist), the placeholder text shifts to the left and overlaps any content in the start slot (e.g., icons). This occurs because the cloned input used during scroll assist is positioned at the container's left edge rather than at the native input's actual position. Additionally, when quickly switching between inputs before scroll assist completes, focus jumps back to the original input. ## What is the new behavior? The cloned input is now positioned at the same offset as the native input, preventing the placeholder from shifting or overlapping start slot content during scroll assist. This works correctly for both LTR and RTL layouts. Also, scroll assist no longer steals focus back if the user has moved focus to another element while scrolling was in progress. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.16-dev.11767042721.11309185 ``` |
||
|
Shane
|
e5634d45ee |
fix(modal): prevent card modal animation on viewport resize when modal is closed (#30894)
Issue number: resolves #30679 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? When a page contains a card modal with a `presentingElement`, resizing the viewport (e.g., rotating from portrait to landscape) triggers the card modal's "lean back" animation on the presenting element, even when the modal has never been opened. ## What is the new behavior? Viewport resize events no longer trigger the presenting element animation when the modal is not presented. The animation only runs when the modal is actually open. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.16-dev.11767028735.16932cea ``` |
||
|
Shane
|
12ede4b79c |
fix(input-password-toggle): improve screen reader announcements (#30885)
Issue number: resolves internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
The `ion-input-password-toggle` button uses `role="switch"` with
`aria-checked`, causing screen readers like VoiceOver to announce both a
state ("On/Off") and an action ("Show/Hide password"). This results in
confusing, redundant output such as "On, Hide Password" or "Off, Show
Password".
## What is the new behavior?
The password toggle button now uses `aria-pressed` instead of
`role="switch"` with `aria-checked`. Screen readers announce the
action-based label ("Show password" or "Hide password") along with the
pressed state, and properly announce state changes when the button is
activated.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Old
Preview](https://ionic-framework-git-main-ionic1.vercel.app/src/components/input-password-toggle/test/basic)
[New
Preview](https://ionic-framework-git-fw-6920-ionic1.vercel.app/src/components/input-password-toggle/test/basic)
Current dev build:
```
8.7.15-dev.11766421552.180757ca
```
|
||
|
Israel de la Barrera
|
f83b000530 |
fix(header): show iOS condense header when app is in MD mode (#30690)
Issue number: resolves #29929 --------- ## What is the current behavior? When forcing `mode=ios` in a collapsible header, `.header-collapse-condense` would still be applied from the `header.md.scss` file, leaving the collapsible header always hidden. ## What is the new behavior? When forcing `mode=ios` in a collapsible header, the `.header-collapse-condense` styles from the `header.md.scss` file won't be applied, and the collapsible header will be visible. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Something worth mentioning is that this behavior only appears after initial load: if the route is loaded refreshing the page, the header will appear and work correctly, but navigating forth and back will apply both the .ios and .md style files. I showcase this with a modal because It'll always display the broken hehavior. | Before | After | |--------|-------| | <video src="https://github.com/user-attachments/assets/1307ee9f-452a-4b00-877d-0b8e360d3bf7"> | <video src="https://github.com/user-attachments/assets/f9ee3851-ce94-4a27-9947-37aa1f5433b9"> | --------- Co-authored-by: ShaneK <shane@shanessite.net> |
||
|
Brandy Smith
|
3b60a1d68a |
fix(modal): dismiss top-most overlay when multiple IDs match (#30883)
Issue number: resolves #30030 --------- ## What is the current behavior? When modals are presented one after another with matching IDs and then dismissed by ID it will dismiss the first presented modal. ## What is the new behavior? - When modals are presented one after another with matching IDs and then dismissed by ID it will dismiss the last (top-most) presented modal. - Added e2e tests to verify this behavior works the same as the default dismiss (not passing an ID). ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Modal: Dismiss Behavior](https://ionic-framework-git-fw-7016-ionic1.vercel.app/src/components/modal/test/dismiss-behavior) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
8573bf8083 |
fix(core): use Capacitor safe-area CSS variables on older WebViews (#30865)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The safe area variables are only reliant on `env` variables that are provided by devices. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Capacitor 8 has released [safe area variable fallbacks](https://capacitorjs.com/docs/apis/system-bars#android-note) to provide consistent behaviors with older Android devices: > Due to a [bug](https://issues.chromium.org/issues/40699457) in some older versions of Android WebView (< 140), correct safe area values are not available via the safe-area-inset-x CSS env variables. This plugin will inject the correct inset values into a new CSS variable(s) named --safe-area-inset-x that you can use as a fallback in your frontend styles. - Updated safe area variables to use the fallbacks provided by Capacitor. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `8.7.13-dev.11765920447.1a01ab8b` --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Shane
|
b1645168a7 |
fix(modal): prevent browser hang when using ModalController in Angular (#30845)
Issue number: resolves internal --------- ## What is the current behavior? When using ModalController to present a modal in Angular applications, the browser becomes non-responsive and hangs in some circumstances. This regression was introduced in #30544 with the addition of a MutationObserver that watches document.body with subtree: true to detect when a modal's parent element is removed from the DOM. For controller-based modals, this observer fires on every DOM mutation in the document, causing severe performance issues during Angular's change detection cycles. ## What is the new behavior? The MutationObserver for parent removal detection is now skipped for controller-based modals and when the cached parent is the app root (document.body or ion-app). These parents are never removed from the DOM, so observing them is unnecessary. This prevents the performance issues while still maintaining the parent removal detection behavior for inline modals with meaningful parent elements. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.12-dev.11765231260.1def96ab ``` --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Shane
|
b9e3cf0f5a |
fix(modal): allow interaction with parent content through sheet modals in child routes (#30839)
Issue number: resolves #30700 --------- ## What is the current behavior? When a sheet modal with showBackdrop=false is rendered in a child route (nested ion-router-outlet), the parent content becomes non-interactive. Clicks on buttons or other interactive elements in the parent component are blocked, even though showBackdrop=false should allow background interaction. Two separate issues contributed to this bug: 1. **Root locking with `backdropBreakpoint`**: The `shouldLockRoot` logic in `overlays.ts` didn't account for `backdropBreakpoint`. Modals with `backdropBreakpoint > 0` were still locking the root with `aria-hidden`, even though developers expect background interaction when the modal is below the backdrop breakpoint. 2. **Child route wrapper blocking**: When a modal is in a child route, the child route's page wrapper (`ion-page`) and its parent `ion-router-outlet` remain in the DOM with `position: absolute` covering the viewport. Even after the modal is moved to `ion-app` and has `pointer-events: none`, these wrapper elements block clicks to the parent page's content. This issue stems from [#30563](https://github.com/ionic-team/ionic-framework/pull/30563), which added root-locking behavior that didn't account for modals that allow background interaction. A partial fix in [#30689](https://github.com/ionic-team/ionic-framework/pull/30689) partially addressed `showBackdrop=false` and `focusTrap=false`, but missed `backdropBreakpoint`. ## What is the new behavior? Sheet modals with showBackdrop=false or focusTrap=false now correctly allow interaction with parent content when the modal is in a child route. Improvements: - Recalculates isSheetModal in present() to handle Angular binding timing - Sets pointer-events: none on the modal element and its original parent elements when background interaction should be allowed - Cleans up pointer-events on dismiss - Adds regression tests ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: ``` 8.7.12-dev.11765060985.14ad27fb ``` |
||
|
Brandy Smith
|
99dcf3810a |
fix(popover): recalculate the content dimensions after the header has fully loaded (#30853)
Issue number: internal --------- ## What is the current behavior? A translucent header in a popover does not consistently render as translucent upon presenting due to the `offset-top` of the content being set to `0`. ## What is the new behavior? Watch the header for height changes using `ResizeObserver` and recalculate the content dimensions when the header height is greater than `0`. ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
1c89cf06ac |
fix(select, action-sheet): use radio role for options (#30769)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The screen reader does not announce when an option is selected within the action sheet interface. This is because the action sheet uses standard buttons, which do not support a detectable selected state via native properties or ARIA attributes like `aria-checked` or `aria-selected`, creating an inconsistent user experience across different interface types. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated the action sheet buttons to accept `role="radio"` - Added keyboard navigation to follow the pattern for radio group - Added test ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Basic](https://ionic-framework-git-fw-6818-ionic1.vercel.app/src/components/select/test/basic/) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Shane <shane@shanessite.net> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
e9bd3f819d |
test(scripts): update to handle hash params (#30807)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Playwright's `setContent` cannot handle query params which causes the `scripts.js` to not run effectively. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Update `scripts.js` to accept hash params as well - Update `scripts.js` to accept the dark class to set dark mode if dark query or hash was not passed ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> How to test: 1. Verify that tests are passing --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Shane
|
9d781db662 |
fix(datetime): ensure datetime is shown when intersection observer fails to report visibility (#30793)
Issue number: resolves #30706 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? Due to some recent unknown changes, the intersection observer for date time no longer reliably fires, especially in mobile views. ## What is the new behavior? In this PR, we're adding a visibility check after everything has had a chance to render to make sure we're setting up properly even if the intersection observer has failed to trigger for some reason. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information Since the intersection observer is being set up after a `raf`, it's possible something got introduced to make the initial setup slower for some reason, causing timing issues. I think we should do a more thorough investigation into the cause of this problem when we have more time. This PR also adds tests to verify the new fallback works properly. Current dev build: ``` 8.7.10-dev.11763478209.1d9c4cd8 ``` --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
92db36489c |
fix(checkbox, toggle, radio-group): improve screen reader announcement timing for validation errors (#30714)
Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, when an error text is shown, it may not announce itself to
voice assistants. This is because the way error text currently works is
by always existing in the DOM, but being hidden when there is no error.
When the error state changes, the error text is shown, but as far as the
voice assistant can tell it's always been there and nothing has changed.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated aria attributes
- Added observer with an observer
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Checkbox
preview](https://ionic-framework-git-fw-6757-ionic1.vercel.app/src/components/checkbox/test/validation/)
[Toggle
preview](https://ionic-framework-git-fw-6757-ionic1.vercel.app/src/components/toggle/test/validation/)
[Radio Group
preview](https://ionic-framework-git-fw-6757-ionic1.vercel.app/src/components/radio-group/test/validation/)
⚠️ Flakiness ⚠️
The flakiness on checkbox and toggle is because when a native input is
present on the page, the browser will have the screen reader to be
really fast when it comes to checking information. This speed ends up
being too fast for `ion-checkbox` to be able to add the error text. This
leads to the error text not being announce consistently. There's no
issue when it comes to ion-input or ion-textarea because Ionic uses the
native inputs so their arias are read. There's also no issue
with ion-select because we don't have a native input. It's only an issue
with checkbox and the others is because it has a [native input that is
being
hidden](
|
||
|
Shane
|
58d563805f |
fix(accordion-group): skip initial animation (#30729)
Issue number: resolves #30613 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, when you load an accordion group, the initially selected accordion animates open. This is an unexpected change caused by upgrading Stencil to >= 4.21.0, which changed the way component lifecycles got triggered. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> With this change, we're waiting for the accordion in the accordion group to render and telling it if the update it's going through is the initial update or not. This allows it to decide to animate properly. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.8-dev.11761840817.1bede576 ``` |
||
|
Maria Hutt
|
54a1c86d6a |
fix(checkbox, toggle): fire ionFocus and ionBlur (#30733)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `ionFocus` and `ionBlur` are not being emitted for checkbox and toggle. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Moved the `onFocus` and `onBlur` to `Host` - Added tests for `onFocus`, `onBlur`, and `onChange`. - Added a workaround on Playwright in order to trigger `ionBlur` since Playwright browsers aren't acting like native browsers when it comes to tabbing. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `8.7.7-dev.11761071592.1d1b804d` --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Shane <shane@shanessite.net> |
||
|
Maria Hutt
|
12084af163 |
fix(header): ensure one banner role in condensed header (#30718)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> As per accessibility guidelines, there should only be one banner landmark per page. A condensed header creates two banner landmarks since 2 `ion-header` components are required on the page. `ion-header` renders with a `role="banner"` by default (when not in `ion-menu`). The visual effect of the condensed header is achieved by rendering two distinct header components. Because both components exist in the code at the same time and both have `role="banner"`, they create a duplicate landmark announcement for screen readers. This leads to a violation with the accessibility guidelines. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The role is updated to either `none` or `banner` based off the header's active state. - Added test. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Preview](https://ionic-framework-git-fw-6767-ionic1.vercel.app/src/components/header/test/condense/?ionic%3Amode=ios) |
||
|
Brandy Smith
|
add33c5995 |
refactor(button): only check for undefined fill (#30722)
Issue number: internal --------- ## What is the current behavior? Button checks for undefined and null fill as a result of Stencil bug https://github.com/ionic-team/stencil/issues/3586 ## What is the new behavior? - Removes check for `null` with the release of Stencil v4.38.0 - No test needed as one exists already: https://github.com/ionic-team/ionic-framework/pull/26339/files ## Does this introduce a breaking change? - [ ] Yes - [x] No Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
03303d73f0 |
fix(select): improve screen reader announcement timing for validation errors (#30723)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, when an error text is shown, it may not announce itself to voice assistants. This is because the way error text currently works is by always existing in the DOM, but being hidden when there is no error. When the error state changes, the error text is shown, but as far as the voice assistant can tell it's always been there and nothing has changed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated aria attributes - Added observer with an observer We had to do this with a mutation observer and state because it's important in some frameworks, like Angular, that state changes to cause a re-render. This, combined with some minor aria changes, makes it so that when a field is declared invalid, it immediately announces the invalid state instead of waiting for the user to go back to the invalid field. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Preview](https://ionic-framework-git-fw-6797-ionic1.vercel.app/src/components/select/test/validation/) |
||
|
Maria Hutt
|
820fa28543 |
fix(header): prevent flickering during iOS page transitions (#30705)
Issue number: resolves #25326 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The header flickers upon page transition when on iOS mode and using a condensed header: **Entering Page Two (P1 → P2):** When navigating to Page Two, which has a collapsing header (intended to be hidden until scroll), the header briefly flashes into view. This happens because the header is initially rendered with full `opacity: 1` before the component's logic can apply `opacity: 0` to hide it, causing a visible flicker. **Navigating Back (P2 → P1):** When navigating back, Page One's header briefly bleeds through the top of Page Two. Although Page Two is on top (`z−index: 100`), its collapsing header is set to `opacity: 0`. This transparency allows Page One header (`z−index: 99`) to become visible underneath, as the transparent area cannot block the content below it. The header flickers upon page transition when on iOS mode and using a fade header: **Entering Page Two (P1 → P2):** When navigating to Page Two, which has a fade header (should not have a background on load), the header background briefly flashes into view. This happens because the header is initially rendered with full `opacity: 1` before the component's logic can apply `opacity: 0` to hide it, causing a visible flicker. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added a transition-specific class that is applied to the condensed ion-header element to override its default transparency. This guarantees the header to act as an opaque block during the page transition, eliminating visual flickering caused by early `opacity: 0` or the header underneath bleeding through. - Added a transition-specific class that is applied to the fade ion-header element to override its default opaque background. This guarantees the header to act as a transparent block during the page transition, eliminating visual flickering caused by default `opacity: 1`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `8.7.6-dev.11759524961.1cff6814` |
||
|
Shane
|
7bb9535f60 |
fix(tabs): respect stencil lifecycle order for tab selection (#30702)
Issue number: resolves #30611 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, the way tabs are set in the tab bar abuses a bug that existed in older versions of Stencil where children would be rendered out of the correct order. This worked in the tab and tab bar's favor previously, but after the fix it broke our implementation so tabs would no longer correctly indicate the selected tab on direct navigation. ## What is the new behavior? We had a temporary fix before we knew what actually caused this issue before, which was basically just a timeout. That blindly worked because it triggered after the child was fully rendered. This change embraces the new, and correct, way these components render and triggers tab updates correctly. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.6-dev.11759345401.165fca78 ``` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Shane
|
a40d957ad9 |
fix(modal): allow sheet modals to skip focus trap (#30689)
Issue number: resolves #30684 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Recently, we [fixed some issues with aria-hidden in modals](https://github.com/ionic-team/ionic-framework/pull/30563), unfortunately at this time we neglected modals that opt out of focus trapping. As a result, a lot of modals that disable focus trapping still have it happening and it doesn't get cleaned up properly on dismiss. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> We're now properly checking for and skipping focus traps on modals that do not want them. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information I created regression tests for Angular in this to prevent this from happening again. I initially tried to do this with core, but the issue doesn't seem to reproduce with core. <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.5-dev.11758652700.103435a3 ``` |
||
|
João Ferreira
|
66f517d5b2 |
fix(segment-view): scroll and select the right item when the component is in RTL context; (#30675)
Issue number: resolves [#30079](https://github.com/ionic-team/ionic-framework/issues/30079) --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Segments (IonSegment and IonSegmentView) do not work if placed on a dir="rtl" context. If click on button, it won't slide content of the next segment. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - calculate scroll value having into consideration the dir value; ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Preview](https://ionic-framework-git-fw-6768-ionic1.vercel.app/src/components/segment-view/test/rtl) --------- Co-authored-by: Shane <shane@shanessite.net> |
||
|
Shane
|
c339bc3682 |
fix(input): improve error text accessibility (#30635)
Issue number: resolves internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, when an error text is shown, it may not announce itself to voice assistants. This is because the way error text currently works is by always existing in the DOM, but being hidden when there is no error. When the error state changes, the error text is shown, but as far as the voice assistant can tell it's always been there and nothing has changed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> With these changes, both input and textarea have been updated so they'll properly announce error text when it shows up. We had to do this with a mutation observer and state because it's important in some frameworks, like Angular, that state changes to cause a re-render. This, combined with some minor aria changes, makes it so that when a field is declared invalid, it immediately announces the invalid state instead of waiting for the user to go back to the invalid field. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Current dev build: ``` 8.7.4-dev.11756220757.185b8cbf ``` ## Screens [Textarea](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/textarea/test/validation) [Input](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/input/test/validation) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
José Rio
|
49f96d7f1e |
fix(overlays,picker): remove invalid aria-hidden attribute (#30563)
Issue number: resolves #30040 --------- ## What is the current behavior? - The usage of `aria-hidden="true"` attributes both on overlay and picker components was causing some console error/warnings messages. - This was being caused due the fact of the activeElement (focused element) was inside those elements with this attribute that's equal to true in all cases.  ## What is the new behavior? - There is no need of making usage of this attribute due the facts: - 1. Once overlay is closed the focus will be redirect to the element that triggers the overlay, this way screen readers will be also redirected to the same context of focused element. - 2. After overlay is closed, it will be set as a `display: none;` through the selector `:host(.overlay-hidden)`, which by itself will disable overlay content for the screen readers. - Removed overlay tests since they were basically checking about `aria-hidden` attribute. - Updated PickerColumn and PickerColumnOption structure in order to fit the a11y needs. - Added a focus management system to better drive users when making usage of keyboard navigation inside picker. - Skip A11Y test validation when reported violation is color contrast related. ### ⚠️ NOTE: - Reported devTools issue/warning when selecting picker is **from now on** expected due to focus an input that's set with `tabIndex="-1"` and `aria-hidden="true"` - Which turns into an A11Y violation when it gets focused. It happens that it gets focused dynamically in order to open the native numeric keyboard **once user selects highlighted picker values zone**, in order to allow users to insert numeric values through the keyboard. If this `aria-hidden` and `tabindex` are removed/updated, the existing functionality will be lost since ScreenReaders will start to ignore the updated value through the PickerChange and will be focused onto the focused input. This mentioned input has an onChange event that's used to update the `aria-valuetext` on each `picker-column` which is being capture by the ScreenReader. That said, this new devTools reported issue/warning is a false positive since A11Y behaviour is being covered through a different perspective. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Testing: - ✅ [ActionSheet Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/action-sheet/test/a11y) - ✅ [Alert Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/alert/test/a11y) - ✅ [DateTime Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime/test/basic) - ✅ [DateTime Button Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime-button/test/basic) - ✅ [Modal Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y) - ✅ [Popover Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/popover/test/basic) - ✅ [Select Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic) - ✅ [Picker, PickerColumn and PickerColumnOption Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/picker/test/basic) - ✅ [Toast Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/toast/test/a11y) ## Other Information Dev build: `8.7.4-dev.11756388042.1a103a79` --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
renovate[bot]
|
b49ba6bdfe |
chore(deps): update playwright (#30643)
This PR contains the following updates: | Package | Change | Age | Confidence | Type | Update | |---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.54.2` -> `^1.55.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.54.2/1.55.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.54.2` -> `v1.55.0` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.55.0`](https://redirect.github.com/microsoft/playwright/compare/v1.54.2...f992162f04ae0b0b5a0f4b6114b894215be98995) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.54.2...v1.55.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS44MS4yIiwidXBkYXRlZEluVmVyIjoiNDEuODEuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Shane
|
1899b49d25 |
fix(refresher): prevent focus-related scroll jumps on refresh (#30636)
Issue number: resolves # --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, if you focus on something and then refresh with a refresher, the browser will try to scroll to what's focused after refreshing. This can be an unexpected and disrupting user experience. https://github.com/user-attachments/assets/3ef5999d-d104-422a-a6a9-4f478912f48a ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> With these changes, we blur the active element to prevent the browser from trying to scroll back to something off screen after refreshing. Also, I did try to create regression tests for this, but playwright actually doesn't currently seem to make it possible as far as I can tell - that's actually what I spent most of my time on this issue trying to do. Looks like the only way to trigger the refresher with playwright uses mouse click events, which inherently blurs the active element. You need to use cursor events for this to work, because cursor events do not cause a blur on the active element. https://github.com/user-attachments/assets/bd1a3bfc-9b48-4b3f-b8dc-6959eefc9107 ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> **Current dev build:** ``` 8.7.3-dev.11755285796.12743331 ``` |
||
|
Shane
|
e9e6605862 |
fix(checkbox): add aria attributes to ignore checkbox icon (#30633)
Issue number: resolves #30231 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, if you're using voiceover on Chrome or Firefox, you can navigate the checkbox in such a way that it announces the checkbox image, which provides no context to what you're actually selecting. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> With this change, you can no longer select the checkbox image. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Screen](https://ionic-framework-git-ionic-56-ionic1.vercel.app/src/components/checkbox/test/basic) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
1cd81b9230 |
fix(reorder-group): add children fallback for framework compatibility (#30593)
Issue number: resolves #30592 --------- ## What is the current behavior? Reorder group is failing for Angular, React & Vue due to the change from `children` to `__children`. ## What is the new behavior? - Fallback to `children` if `__children` is undefined. - Adds an e2e test for Angular (depends on https://github.com/ionic-team/ionic-framework/pull/30594) - Tasks have been created to migrate and add e2e tests for the other frameworks ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.7.2-dev.11754087334.1815cf22` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Shane
|
a2e803a553 |
fix(tabs): add fallback to select tab if router integration fails (#30599)
Issue number: resolves #30552 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Something caused a timing shift in v8.6.0 that messed up the timing required for react router to set the active tab ID. Currently, when the router goes to set the tab ID, it's possibly too early and the tab may not exist yet, causing it to go unset. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> This PR is a workaround that allows tabs to check when they're rendered if a tab should be selected as a fallback for the router not setting them. I don't think the tabs, in the long run, should be responsible for this, but I think this is a good intermediate step until the upcoming react router upgrade, when we can look into a better solution for react router that may require less timing precision. This PR also adds regression tests for React to make sure this doesn't happen again without getting noticed. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> **Current dev build:** ``` 8.7.2-dev.11754338216.1a548096 ``` |
||
|
Brandy Smith
|
56265e35d1 |
test(core): fix flaky datetime and input-otp tests (#30598)
This fixes the flaky/failing tests here: `should not have visual regressions with a custom styled calendar` <img width="1658" height="916" alt="CleanShot 2025-08-04 at 13 46 12@2x" src="https://github.com/user-attachments/assets/b5d54ee8-b315-4db0-b09b-65d9cd2fa7ca" /> `should switch the calendar header when moving to a month with a different number of days` <img width="2104" height="1752" alt="CleanShot 2025-08-04 at 13 45 33@2x" src="https://github.com/user-attachments/assets/8a0cdb0b-6e9d-4b5c-a2df-f9174431492b" /> You can run them locally using: - `npm run test.e2e.docker src/components/datetime/test/datetime.e2e.ts -- --repeat-each=10` - `npm run test.e2e.docker src/components/datetime/test/custom/datetime.e2e.ts -- --repeat-each=10` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
6203b88b9f |
chore(deps): update @stencil/core to v4.36.2 (#30587)
Issue number: resolves #30565 --------- ## What is the current behavior? Stencil is on v4.33.1 ## What is the new behavior? - Updates Stencil to v4.36.2 - Updates `children` references to `__children` in `reorder-group` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I searched through the repository for other components that may be affected but did not find any. Dev build: `8.7.1-dev.11753971948.1b297d94` Reorder Example using dev build: [StackBlitz](https://stackblitz.com/edit/5nrzhbja) Router Example using dev build: [StackBlitz](https://stackblitz.com/edit/rvpcflzx) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
75f6c05fb9 |
feat(css): add new css utility classes for display and flex utils (#30567)
Issue number: resolves #22469 --------- - Adds new responsive display classes with the following values: `none`, `inline`, `inline-block`, `block`, `flex`, `inline-flex`, `grid`, `inline-grid`, `table`, `table-cell`, `table-row` - Adds new responsive flex util classes for the following properties: `align-content`, `align-items`, `align-self`, `justify-content`, `flex-direction`, `flex-wrap`, `flex`, `flex-grow` , `flex-shrink`, `order` - Adds e2e tests to verify the correct classes are in the CSS files --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
d5627c7368 |
feat(datetime): add border property to highlightedDates (#30534)
Issue number: resolves #29833 --------- - Adds the `border` property for customizing the border of highlighted dates - Adds the `border` to the e2e test for highlightedDates - Updates screenshots --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Christian Bromann
|
74cd71af24 |
feat(deps): update ionicons to v8 (#30390)
Issue number: resolves #30445 --------- Updates all packages to use the latest version of Ionicons v8 --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
b154f4ed09 |
feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events (#30471)
Issue number: resolves #23148 resolves #27614 --------- The `ion-reorder-group` only emits an `ionItemReorder` event when the reorder gesture ends AND the item position has changed. There is no way to listen for when the gesture starts, is actively moving, or ends without the item changing position. - Adds an `ionReorderStart` event that is fired without any details on the start of the gesture. - Adds an `ionReorderMove` event that is fired continuously during gesture move and includes the `from` and `to` detail. - Adds an `ionReorderEnd` event that is fired at the end of the gesture and always includes the `from` and `to` detail, even if they are the same. - Deprecates the `ionItemReorder` event, recommending to use the `ionReorderEnd` instead. - [ ] Yes - [x] No While this does not introduce a breaking change, it does deprecate the `ionItemReorder` event in favor of the `ionReorderEnd` event. This event behaves a bit differently since it is always emitted on end. If the `from` and `to` are the same, it will still emit them, so it's possible to check if they are the same to determine if `ionReorderEnd` fired without moving item positions. ---- Co-authored-by: sfinktah <sfinktah@github.spamtrak.org> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
renovate[bot]
|
dd68369338 |
chore(deps): update dependency @stencil/core to v4.36.1 (#30524)
This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@stencil/core](https://stenciljs.com/) ([source](https://redirect.github.com/stenciljs/core)) | [`4.33.1` -> `4.36.0`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.33.1/4.36.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>stenciljs/core (@​stencil/core)</summary> ### [`v4.36.0`](https://redirect.github.com/stenciljs/core/blob/HEAD/CHANGELOG.md#-4360-2025-07-15) [Compare Source](https://redirect.github.com/stenciljs/core/compare/v4.36.0...58bc2b5403312dd227b0c5d6f1de167559f2b015) ##### Bug Fixes * contructable stylesheets with older immutable spec (chrome <99) ([#6332](https://github.com/stenciljs/core/issues/6332)) ([2f363dd]( |
||
|
Brandy Smith
|
d14311fb65 |
fix(segment-view): scroll to correct content when height is not set (#30547)
Issue number: resolves #30543 --------- ## What is the current behavior? On desktop Safari and Android the segment view is not switching to the right segment content when the height is dynamically set or read in as 0. This can be reproduced in the following StackBlitz on Android: https://6dhropnr-aheyyprl.stackblitz.io/ ## What is the new behavior? - Sets `min-height` to `1px` on `ion-segment-content` so that it continues to work with a dynamically set height - Adds an e2e test for Safari to verify the correct content is displayed when it contains a dynamically loaded image ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.6.2-dev.11752524287.1d61cd78` [Preview](https://ionic-framework-git-fw-6586-ionic1.vercel.app/src/components/segment-view/test/dynamic-height) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Shane
|
d37b9b8e46 |
fix(modal): improve card modal background transition from portrait to landscape (#30551)
Issue number: resolves internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, if you have multiple card modals open in portrait view and then transition to landscape, the background will not be transformed properly and will not cover the entire screen as expected. https://github.com/user-attachments/assets/bb2c7015-adb6-4c3b-8bc5-13360275fcf4 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Now, we're correctly targeting the right element and will transform it as expected. This allows a more consistent UX for these transitions. https://github.com/user-attachments/assets/fff72387-d78b-4df4-a234-d89b54f694c4 ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Relevant (broken) screen (main branch)](https://ionic-framework-git-main-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios) [Relevant (fixed) screen (this branch)](https://ionic-framework-git-fix-modal-landscape-background-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios) |
||
|
Colin Bares
|
3f730ab1d7 |
fix(item): allow nested content to be conditionally interactive (#30519)
Issue number: resolves #29763 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> If the nested content of an ion-item is conditionally rendered and goes from containing zero interactive elements to one or more, a render is not triggered in Angular and the item does not behave correctly for one or more nested inputs. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - A mutation observer is created in `connectedCallback()` to watch for changes in item's child list. When the `childList` changes, two pieces of state that track whether the item needs to be interactive and whether there are multiple interactive elements are updated. - Add `disconnectedCallback()` and logic to disconnect Mutation Observer. - Create new function `totalNestedInputs()` with logic from existing `setMultipleInputs` function to be used for both `setMultipleInputs` and new function `setIsInteractive`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I opted for the MutationObserver over a `slotchange` listener because the `slotchange` fires synchronously on any slot within the shadowRoot, and the MutationObserver fires once on the item element itself. I attempted to add the minimum amount of logic to achieve this but there may be a more elegant solution that combines what `multipleInputs` and `isInteractive` are doing but requires more changes to existing code. |
||
|
Shane
|
850338cbd5 |
fix(modal): dismiss modal when parent element is removed from DOM (#30544)
Issue number: resolves #30389 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, when the element an ion-modal was presented from is removed, the modal stays presented and can be broken depending on the framework. This is unlike #30540, where children of open modals were being kept open. In this case, specifically the DOM element is being removed for whatever reason and the modal is staying open. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> We're now identifying our parent component on load and watching it with a mutation observer to determine if it gets removed from the DOM. If it does, we trigger a dismiss. This, conveniently, works nicely with #30540 and will dismiss all children and grandchildren as well. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The issue this resolves was already marked closed, but on closer inspection I determined that was a mistake. I believed this issue was related to another one I was dealing with and it is, but it wasn't quite the same. After this issue is merged, I believe we will have handled all avenues of possibly ending up with broken modals because of parent elements or modals being removed. [Relevant Test Page](https://ionic-framework-git-fix-remove-modal-when-parent-removed-ionic1.vercel.app/src/components/modal/test/inline) **Current dev build:** ``` 8.6.5-dev.11752329407.10f7fc80 ``` |
||
|
Brandy Smith
|
8b4023d520 |
fix(input-otp): improve autofill detection and invalid character handling (#30541)
Issue number: resolves #30459 --------- ## What is the current behavior? 1. Typing `"12345"` in a 4-box input-otp with `type="text"` is incorrectly triggering autofill detection on Android, causing `"45"` to be distributed across the first two boxes instead of replacing the `"4"` with the `"5"`. **Current Behavior**: Type `"12345"` → `["4", "5", "", ""]` (incorrectly distributed) **Expected Behavior**: Type `"12345"` → `["1", "2", "3", "5"]` (correctly replaces last character) 2. Typing an invalid character (like `"w"` when `type="number"`) in an input box with a value is inserted, ignoring the input validation. **Current Behavior**: Type `"2"` in the first box, focus it again, type `"w"` → `"2w"` appears **Expected Behavior**: Type `"2"` in the first box, focus it again, type `"w"` → `"2"` remains (invalid character rejected) ## What is the new behavior? - Fixes autofill detection on Android devices - Fixes invalid character insertion in filled input boxes - Improves cursor position handling when typing in a filled box - Adds e2e tests for more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.6.5-dev.11752245814.1253279a` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Shane
|
9b0099f462 |
fix(modal): dismiss child modals when parent is dismissed (#30540)
Issue number: resolves #30389 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Currently, when a child modal is present and a parent modal is somehow dismissed, the child modal stays open. This can cause issues in some frameworks like React and Angular, where this cuts the connection to the child modal and it can no longer be dismissed programmatically. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> This change enables modals to identify their children and close the children when they're closed. This prevents orphaned modals that can cause a poor UX. Note: This fix is only for inline modals, which is the biggest cause of the above issue. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Relevant test page](https://ionic-framework-git-fw-6597-ionic1.vercel.app/src/components/modal/test/inline) **Current dev build**: ``` 8.6.5-dev.11752242329.17d249a3 ``` |
||
|
Colin Bares
|
f1defba2ac |
fix(input): prevent layout shift when hiding password toggle (#30533)
Issue number: resolves #29562 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? When an input with a password toggle is given `disabled` or `readonly`, hiding the password toggle causes a layout shift as it shrinks the height of the input component. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Password toggle is given `visibility: hidden` instead of removing it from the DOM with `display: none` so it retains it's space but is still hidden and still removed from the accessibility tree. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information This solution was suggested by @piotr-cz in the bug report. <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |