mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-12-19 05:19:42 +08:00
main
3699 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
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> |
||
|
Shane
|
0fd9e82450 |
fix(modal): support iOS card view transitions for viewport changes (#30520)
Issue number: resolves #30296 --------- <!-- 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, there is no support for moving between an iOS card view (mobile, portrait modal with presenting element) to a non-card view when the resolution changes (e.g., the device goes from a portrait layout to landscape). This causes issues both way because modals that should be card modals when the user transitions to a portrait view stay as non-card modals and modals that were card modals when they were opened but the user goes to landscape view end up with a black box stuck around the edges of the screen. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> With this change, we now fully support transitioning between the two modal views when the resolution changes. This should fix the issue where the background could become stuck and should be a nicer experience for users switching between the two orientations while using modals. I also took the time to clean up the terminology in use here to refer to "mobile view" (as it was meant here) to be portrait view and the other view to be referred to as landscape view. I did this because I had accidentally mixed them up while working on this and I had to do a refactor to fix it, so I'm hoping that by clarifying the terminology now it helps prevent similar mistakes for others in the future. ## 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 screen](https://ionic-framework-git-fw-6596-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios) Dev build: `8.6.3-dev.11751378808.12cc4a5c` |
||
|
Brandy Smith
|
73f7b3f839 |
test(item-sliding): add test for side issue with CDN (#30469)
Adds test for https://github.com/ionic-team/ionic-framework/pull/29845 Must be merged after the fix in that PR is released. The test will fail while using the older version of the CDN. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Pau Ferrer Ocaña
|
80a111cffa |
fix(select): focus the correct selected item in an action sheet interface with a header (#30481)
Issue number: resolves #30480 --------- ## What is the current behavior? When using a select component with the `action-sheet` interface, a `header`, and a default selected value, the action sheet opens with the wrong item focused. This happens because the focus logic uses `nth-child` to target the selected item, which incorrectly includes the header since it is a child element. As a result, the focus is shifted one item above the correct selection. ## What is the new behavior? - Correctly focus the selected item when opening an `action-sheet` with a header from a select. - Adds e2e tests for verifying this behavior. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information [Preview](https://ionic-framework-git-fork-crazyserver-patch-2-ionic1.vercel.app/src/components/select/test/basic) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
renovate[bot]
|
4b8863b6d6 |
chore(deps): update playwright (#30513)
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.52.0` -> `^1.53.2`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.52.0/1.53.2) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.52.0` -> `v1.53.1` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.53.2`](https://redirect.github.com/microsoft/playwright/compare/v1.53.1...8c38de4d13d1e8e28cc97d4ad81cc398a6b2fb32) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.53.1...8c38de4d13d1e8e28cc97d4ad81cc398a6b2fb32) ### [`v1.53.1`](https://redirect.github.com/microsoft/playwright/compare/v1.53.0...3c60cb476613ee50c040b488d96f390be3985a89) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.53.0...v1.53.1) ### [`v1.53.0`](https://redirect.github.com/microsoft/playwright/releases/tag/v1.53.0) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.52.0...v1.53.0) #### Trace Viewer and HTML Reporter Updates - New Steps in Trace Viewer and HTML reporter: <img src="https://github.com/user-attachments/assets/1963ff7d-4070-41be-a79b-4333176921a2" alt="New Trace Viewer Steps" height="500"> - New option in `'html'` reporter to set the title of a specific test run: ```js import { defineConfig } from '@​playwright/test'; export default defineConfig({ reporter: [['html', { title: 'Custom test run #​1028' }]] }); ``` #### Miscellaneous - New option [`kind`](https://playwright.dev/docs/api/class-testinfo#test-info-snapshot-path-option-kind) in [testInfo.snapshotPath()](https://playwright.dev/docs/api/class-testinfo#test-info-snapshot-path) controls which snapshot path template is used. - New method [locator.describe()](https://playwright.dev/docs/api/class-locator#locator-describe) to describe a locator. Used for trace viewer and reports. ```js const button = page.getByTestId('btn-sub').describe('Subscribe button'); await button.click(); ``` - `npx playwright install --list` will now list all installed browsers, versions and locations. #### Browser Versions - Chromium 138.0.7204.4 - Mozilla Firefox 139.0 - WebKit 18.5 This version was also tested against the following stable channels: - Google Chrome 137 - Microsoft Edge 137 </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:eyJjcmVhdGVkSW5WZXIiOiI0MC42Mi4xIiwidXBkYXRlZEluVmVyIjoiNDAuNjIuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Brandy Smith
|
ac81383e65 |
test(breadcrumbs): update Playwright tests to use setContent (#30518)
Blocks https://github.com/ionic-team/ionic-framework/pull/30513 ---- The latest Playwright update in #30513 exposed an issue in Safari where dynamically setting the RTL direction on the document no longer works. This causes the Breadcrumbs screenshots to fail because they are not flipping the arrow icon. This PR converts the Breadcrumbs e2e tests to use `setContent` which works properly with RTL and also breaks the tests up more so they aren't one giant screenshot. - The [Basic](https://ionic-framework-git-bc-test-breadcrumbs-ionic1.vercel.app/src/components/breadcrumbs/test/basic) test has been updated to focus mainly on the default breadcrumbs without any colors or collapsed breadcrumbs. - The [Collapsed](https://ionic-framework-git-bc-test-breadcrumbs-ionic1.vercel.app/src/components/breadcrumbs/test/collapsed) test has been updated to remove some of the duplicated examples and ported over one from the basic test. - The [Color](https://ionic-framework-git-bc-test-breadcrumbs-ionic1.vercel.app/src/components/breadcrumbs/test/color) test was added which focuses on setting different colors on the Breadcrumbs / Breadcrumb and moves this out of the basic test. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Shane
|
ee47660745 |
fix(modal): add conditional tabIndex for handle cycling (#30510)
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, you cannot tab into a sheet modal from outside of it (the background), even with `handleBehavior` set to `cycle`. This destroys the accessibility of moving from the background behind a sheet modal to the contents of a sheet modal/the drag bar to be able to cycle the size. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Now you can get into a sheet modal from outside of it and interact with its contents/drag handle when `handleBehavior` is set to `cycle`. This opens up the accessibility of the sheet modal and allows for interacting with background elements with sheet modals open using accessibility tools like VoiceOver and TalkBack. ## 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 screen](https://ionic-framework-git-fw-6523-ionic1.vercel.app/src/components/modal/test/sheet) Dev build: `8.6.3-dev.11750971489.140836b0` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Colin Bares
|
db915bf6c7 |
docs(methods): update component method documentation #4145 (#30495)
Issue number: resolves ionic-team/ionic-docs#4145 --------- ## What is the current behavior? Some component methods are missing param tags in the JSDoc comments. Some comments are out of order and the method description is below the last param description. Some back ticks are misplaced around words resulting in incorrect formatting in the docs site. ## What is the new behavior? Method documentation in app, action-sheet, alert, datetime, loading, menu, modal, popover, reorder-group, router, searchbar, and toast now include descriptions for all params, all method descriptions are placed above param descriptions, and back ticks are formatted correctly. All changes are within JSDoc comments so will result in a change to the docs site but no functional change to any components. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information In order to preview these changes I took the JSON generated from the build on this branch and used it in the docusaurus script in place of the fetch from unpkg. I set up a preview from my fork on Vercel - https://ionic-docs-git-temptotestdocs-soundproofboots-projects.vercel.app/docs/components . The change I made to the docusaurus script to use this temp data is here - https://github.com/soundproofboot/ionic-docs/pull/1/files. tempDocs.json is the output of the framework build after making these changes. --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Maria Hutt
|
6ae2907742 |
fix(picker-column): fallback to elementFromPoint for iOS 16 Shadow DOM bug (#30479)
Issue number: resolves #29672 --------- <!-- 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 issue on iOS 16 with `elementsFromPoint` is related to how it handles Shadow DOM retargeting when called from the document (global) context. It leads to an `undefined` element that is required to trigger `ionChange`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Returns the top most element as a fallback only if the element has a tag of `'ion-picker-column-option'`. ## 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.6.2-dev.11749761258.1b46b6a9` --------- Co-authored-by: Vilhelm Josander <5067135+vilhelmjosander@users.noreply.github.com> |
||
|
Shane
|
6811fe5cc8 |
fix(range): improve focus and blur handling for dual knobs (#30482)
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 use keyboard navigation to move between dual range slider knobs, only the first knob you navigate to is highlighted. This is because both elements in the same component are marked as focusable and the code that manages focusable doesn't take into account multiple elements in the same component. https://github.com/user-attachments/assets/36d84eed-6928-446e-becd-ffa2a97e3cc2 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> After these changes, we manage focusing on dual knob range sliders manually, so using tab navigation through dual knob range sliders focuses knobs as expected. ## 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. --> [Test - Range - Basic screen](https://ionic-framework-git-fw-6401-ionic1.vercel.app/src/components/range/test/basic) |
||
|
Brandy Smith
|
c38aa07cf8 |
fix(item-sliding): check for side attribute to avoid an undefined value (#29845)
Issue number: resolves #29499 --------- ## What is the current behavior? Using the bundled version of Ionic results in an error `Uncaught (in promise) Error: "undefined" is not a valid value for [side]. Use "start" or "end" instead.` with `<ion-item-sliding>`. Reproduction 1: - https://stackblitz.com/edit/stackblitz-starters-mezoy6?file=index.html - Press the Add (`+`) button several times It is also reproducible in an Ionic Angular app when installed via npm. Reproduction 2: - https://stackblitz.com/edit/angular-exwgke?file=src%2Fapp%2Fexample.component.ts - Press the `Add Items` button several times ## What is the new behavior? Check for the side attribute to avoid `side` being `undefined`. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.6.1-dev.11749562115.1e681558` Test PR: https://github.com/ionic-team/ionic-framework/pull/30469 The tests must be merged separately, after this is released, in order to use the fix from the CDN. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Shane
|
071b414a00 |
fix(modal): reset footer positioning after content drag and multi-footer support (#30470)
Issue number: resolves #30468 --------- <!-- 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 use pointer events to drag the content of a sheet modal with `expandToScroll` disabled and have you have a footer and a dismiss button, then you use the dismiss button to close the modal, the footer will be stuck in its pinned position at the bottom of the screen. Additionally, if you have multiple footers, only one of them properly gets pinned and unpinned. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - We now move footers back to their stationary position when we finish our drag event on modal content - We support pinning and unpinning multiple footers at the same time now ## 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.6.1-dev.11749575087.1b86eb67` |
||
|
Brandy Smith
|
7da26d0fd5 |
test(popover): skip flaky no event popover test (#30464)
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |