mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fd6baaceda9de587f2af759ebf7b4ee91b08387f
3630 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Shane
|
7d639b0412 |
fix(labels): prevent clicking a label from triggering onClick twice on several components (#30384)
Issue number: resolves #30165 --------- <!-- 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, several components will trigger their `onClick` twice if you click on their labels. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> After this fix, the affected components will only trigger `onClick` once per click of their labels or click directly on the element. ## 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 affected components are: - Checkbox - Select - Textarea - Toggle - Input I also tested radio and range but could not reproduce the issue for them. Note that two of the components, checkbox and toggle, had to have special implementations for both their test and fix because of how the host component acts as the component for accessibility purposes. Current dev build: `8.5.7-dev.11746044124.147aab6c` --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
7a9d138e3d |
fix(item): emit click event once when clicking padded space on item and emit correct element (#30373)
Issue number: resolves #29758 resolves #29761 --------- ## What is the current behavior? When an `ion-item` has a click event listener, the following issues occur: 1. **Double Click Events**: - Clicking the padding around interactive elements (`ion-checkbox`, `ion-toggle`, `ion-radio`, `ion-textarea`, `ion-input`) triggers the click event twice. 2. **Incorrect Event Targets**: - For `ion-input` and `ion-textarea`, clicking their native inputs reports the wrong element as the event target. - Clicking the padding within the `native-wrapper` of `ion-input` emits a separate click event with an incorrect target element. ## What is the new behavior? - Fires `firstInteractive.click()` in Item for all interactives (no longer excludes input/textarea). - Stops immediate propagation in item when the click event is in the padding of an item, preventing two click events from firing. - Updates input and textarea to always emit from their host elements `ion-input`/`ion-textarea` instead of the native input elements. - Updates input to make the native input take up 100% height. This is necessary to avoid the `native-wrapper` triggering its own click event when clicking on its padding. - Adds e2e tests to check for the above behavior to avoid future regressions. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information **Dev build**: `8.5.6-dev.11745613928.16440384` **Previews**: - [Checkbox Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/checkbox/test/item) - [Input Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/input/test/item) - [Radio Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/radio/test/item) - [Select Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/select/test/item) - [Textarea Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/textarea/test/item) - [Toggle Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/toggle/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
renovate[bot]
|
8ef79cf4fb |
chore(deps): update playwright (#30367)
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.51.1` -> `^1.52.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.51.1/1.52.0) | [](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.51.1` -> `v1.52.0` | [](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.52.0`](https://redirect.github.com/microsoft/playwright/compare/v1.51.1...471930b1ceae03c9e66e0eb80c1364a1a788e7db) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.51.1...v1.52.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:eyJjcmVhdGVkSW5WZXIiOiIzOS4yNDguNCIsInVwZGF0ZWRJblZlciI6IjM5LjI1Ny4zIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Maria Hutt
|
cad1c61528 |
fix(select): update icon color and use correct focused class (#30342)
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. --> There are a few items to note: - Styles are using a non-existing focus class. It currently uses `.has-focus` which isn't being used anywhere within `select.tsx`. It seems that `.has-focus` comes a copy and paste that wasn't updated. - Icon uses the highlight color when expanded, in item, and no fill. This leads to the styling looking weird compared to when it's not in an item especially since labels do not change colors. Only applies to `md` mode. | List no lines | List with lines | | --- | ----------- | |  |  | - The focus without a validation status does not update the border correctly when inside an item and has a solid fill. Only applies to `md` mode. | Outside item | Inside item | |--------|--------| |  |  | ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Styles are now using the correct focus class: `.has-focus`, removing `ion-focused`. - If the select is inside an item and has no fill then the icon will not use the highlight color. Only applies to `md` mode. | List no lines | List with lines | | --- | ----------- | |  |  | - The focus without a validation status uses the highlight color when inside an item and has a solid fill. Only applies to `md` mode. | Outside item | Inside item | |--------|--------| |  |  | ## 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.5.4-dev.11744743162.1ec9251d` Select cannot have a focused class and an expanded class at the same time. It's one or the other. --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
d52fca084c |
fix(config): allow LogLevel to work with isolatedModules and update all warns and errors to respect logLevel (#30350)
Issue number: internal --------- ## What is the current behavior? - `LogLevel` throws error `Error: Cannot access ambient const enums when 'isolatedModules' is enabled` - Several existing console warns and errors are not calling the function that respects the `logLevel` config ## What is the new behavior? - Remove `const` from the `enum` to work with `isolatedModules` - Update `console.warn`s to `printIonWarning` - Update `console.error`s to `printIonError` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.5.5-dev.11744729748.174bf7e0` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Luis Rhenals
|
8dd566b5c1 |
fix(modal): add expandToScroll property to ModalOptions (#30357)
Issue number: resolves #30356 --------- <!-- 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? Cannot use expandToScroll property in ModalController.create ## What is the new behavior? ExpandToScroll can be added without syntax problems ## Does this introduce a breaking change? - [ ] Yes - [x] No |
||
|
Shane
|
b1bc58f1c8 |
fix(toggle): ensure proper visual selection when navigating via VoiceOver in Safari (#30349)
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, MacOS voice over on Safari does not recognize ion-toggle correctly and fails to highlight the element properly ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> By adding the role property to the host element, we're correctly identifying the toggle so Safari knows how to handle it. ## 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. --> |
||
|
Brandy Smith
|
835ad52c29 |
fix(config): properly export LogLevel (#30335)
Issue number: resolves #30255 --------- ## What is the current behavior? `LogLevel` is not properly exported ## What is the new behavior? Exports `LogLevel` in core ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.5.4-dev.11743715474.1eadbd25` Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
105796f6bc |
fix(segment-view): prevent vertical scroll while scrolling horizontally (#30276)
Issue number: resolves #30001 --------- <!-- 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. --> When segment view has content that is long enough to render outside of the viewport, then a user can scroll vertically and horizontally when the user scrolled down to see the content at the bottom. This causes disorientation as scrolling should only be in one direction. This only happens on a mobile device, specifically Android. It can be reproduce with a browser simulator. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated styling to take into account that content might be outside of the viewport. ## 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.5.2-dev.11743531350.19e040aa` |
||
|
Tobi
|
7f9df7a894 |
fix(overlays): exclude backdrop-no-scroll class when toast is presented (#30123)
Issue number: resolves #30112
---------
<!-- 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 toast is presented, the `backdrop-no-scroll` class is added to the
body when using Frameworks like Angular. It should not add this class as
toast does not be setting focus trap as mentioned in the
[comments](
|
||
|
Shane
|
bb40a1efe7 |
fix(checkbox): ensure proper visual selection when navigating via VoiceOver in Safari (#30300)
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, MacOS voice over on Safari does not recognize ion-checkbox correctly and fails to highlight the element properly ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> By adding the role property to the host element, we're correctly identifying ion-checkbox as a checkbox so Safari knows how to handle it. ## 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. --> --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Victoria Unizhona
|
ac6e6a0317 |
fix(datetime): support typing time values in a 24-hour format (#30147)
- Adjusted the `selectMultiColumn` logic to handle keyboard values like 20 and 22 dynamically. - Introduced checks for the maximum column value to enable flexible input behavior. - Added e2e tests to verify correct value selection for both 12-hour and 24-hour formats. Issue number: resolves #28877 --------- ## What is the current behavior? In the ion-datetime component, when typing 2000 in the keyboard the resulted time value is 02:00 (in 24-hour format) Examples: https://forum.ionicframework.com/t/ion-datetime-disable-opening-keyboard/224558/6?u=dennisskylegs ## What is the new behavior? In the ion-datetime component, when typing 2000 in the keyboard the resulted time value is 20:00 (in 24-hour format) ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: ShaneK <shane@shanessite.net> |
||
|
Maria Hutt
|
1cfa915e8f |
fix(segment-button): ensure consistent disabled state for segment-content error handling (#30288)
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. --> Segment buttons do not consistently set themselves to a disabled state. When disabling them and rapidly refreshing the page, their state may vary—sometimes they appear disabled, and other times they do not. This was due to this [PR](https://github.com/ionic-team/ionic-framework/pull/30138). The reason that this PR was created was due to the console errors being shown too early when segment buttons and contents were dynamically rendered. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - I reverted the changes added through the other PR since the `setTimeout` was causing the inconsistency. - By moving the console errors to `componentWillLoad`, it provides `ion-segment-content` time to render before the console errors are thrown. ## 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.5.2-dev.11742514102.1b51674d` How to test: 1. Run the server locally 2. Navigate to the [segment view disabled](http://localhost:3333/src/components/segment-view/test/disabled) page 3. Verify that the "Paid", "Free", and "Top" buttons disabled 4. Rapid fire some hard refreshes 5. Verify that the "Paid", "Free", and "Top" buttons disabled 6. Navigate to this StackBlitz [repro](https://stackblitz.com/edit/yhktpj19-wxmxpmw7?file=src%2Fmain.tsx) 7. Install the dev build: `npm i @ionic/react@8.5.2-dev.11742514102.1b51674d @ionic/react-router@8.5.2-dev.11742514102.1b51674d` 8. Open the console log 9. Click on the "Add last child" button 10. Verify that there are no console errors like `Segment Button: Unable to find Segment Content with id="content3".` |
||
|
Maria Hutt
|
7789bb59ee |
fix(range): emit ionInput when value changes (#30293)
Issue number: resolves #29619
---------
<!-- 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 `ionInput` emits for range even when the value hasn't changed. This
does not match our documentation. It should only emit when the value
changes (and continuously while the user is dragging the knob).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Moved the emitter to the value watch function, to determine if the
value has changed.
- Added a 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. -->
How to test:
1. Navigate to the [range basic HTML
file](
|
||
|
Shane
|
c4b9212640 |
perf(sheet): fixing performance regression on modal sheets when expandToScroll is false (#30267)
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 a sheet is moved while `expandToScroll` is disabled, the DOM is queried excessively causing performance degradation. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> We now cache the targeted element in `onStart` and refer to it in `onMove` and `onEnd`, preventing over-querying the DOM ## 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. --> This regression was introduced in #30257 and quickly highlighted by a member of the community |
||
|
Israel de la Barrera
|
68be8e915c |
fix(modal): consider scrollable content while dragging when expandToScroll is false (#30257)
Issue number: internal --------- ## What is the current behavior? Changes introduced by #30235 caused two major issues: - Animations were not being played when increasing breakpoints. - When the scrollable content was at the top, and a big scroll to the bottom of the list was made, the modal would jump to a higher breakpoint. ## What is the new behavior? - When `expandToScroll` is false, the swipe gesture is allowed unless it's a pull down within scrollable content. - When `expandToScroll` is false, we cancel the `moveSheetToBreakpoint` when a scroll to top is being done within the scrollable content ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Before | After | |--------|-------| | <video src="https://github.com/user-attachments/assets/e1c22f48-f990-45cf-a6c4-1aec0d019c6d"> | <video src="https://github.com/user-attachments/assets/f01e0480-748f-40af-ac11-94f790f0e197"> | |
||
|
Maria Hutt
|
39f636f679 |
test(infinite): disable flaky test when running in CI (#30264)
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. --> Test is flaky with Safari but only on CI. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Disabled test for 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. --> |
||
|
renovate[bot]
|
c63ec2e98d |
chore(deps): update playwright (#29840)
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@axe-core/playwright](https://redirect.github.com/dequelabs/axe-core-npm) | [`^4.10.0` -> `^4.10.1`](https://renovatebot.com/diffs/npm/@axe-core%2fplaywright/4.10.0/4.10.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/) | devDependencies | patch | | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.46.1` -> `^1.51.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.46.1/1.51.0) | [](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.46.1` -> `v1.51.0` | [](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>dequelabs/axe-core-npm (@​axe-core/playwright)</summary> ### [`v4.10.1`](https://redirect.github.com/dequelabs/axe-core-npm/blob/HEAD/CHANGELOG.md#4101-2024-10-29) [Compare Source](https://redirect.github.com/dequelabs/axe-core-npm/compare/v4.10.0...v4.10.1) ##### Bug Fixes - Update axe-core to v4.10.1 ([#​1124](https://redirect.github.com/dequelabs/axe-core-npm/issues/1124)) ([099818b]( |
||
|
Brandy Smith
|
114514276e | Merge branch 'main' into chore-update-feat-8.5-main | ||
|
Mehran Poursadeghi
|
504fb6a25f |
feat(input, textarea): dir is inherited to native form control (#30102)
Issue number: resolves #30193 resolves #29577 Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Christian Bromann
|
11554a5d35 |
fix(vue): update output target and properly emit events (#30227)
Issue number: resolves #30206 resolves #30178 resolves #30177 resolves #30175 resolves #30170 --------- <!-- 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? There have been plenty of issues reported in regards to Vue components failing to propagate events. It seems like when we updated the Vue output target and started to use the provided runtime code from the output target, we have changed the way how event names are computed. Ionic has used a custom wrapper for handling events that would kebab case event names. That is no longer needed and removing it fixes observed issues. Reproduction case working: https://stackblitz.com/edit/vj18czas-wdhzxjom?file=package.json ## What is the new behavior? We have received a fix for this in https://github.com/stenciljs/output-targets/pull/617 which I hope will resolve this issue by updating the dependency. ## 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 Dev build: `8.4.4-dev.11741193800.14916f6f` |
||
|
Brandy Smith
|
18e26acb01 |
feat(radio-group): add helperText and errorText properties (#30222)
Issue number: N/A --------- ## What is the current behavior? Radio group does not support helper and error text. ## What is the new behavior? Adds support for helper and error text. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Supporting Text: Preview](https://ionic-framework-git-rou-11554-ionic1.vercel.app/src/components/radio-group/test/supporting-text) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
bbdaec0cc1 |
feat(select): add helperText and errorText properties (#30143)
Issue number: resolves #29205 --------- ## What is the current behavior? Select does not support helper and error text. ## What is the new behavior? - Adds support for `helperText` and `errorText` - Adds parts for `helper-text`, `error-text` and `supporting-text` - Adds an e2e test for helper and error text with functional tests and screenshot tests ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11551-ionic1.vercel.app/src/components/select/test/bottom-content) --------- Co-authored-by: swimer11 <65334157+swimer11@users.noreply.github.com> --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
94ca2e54cb |
feat(toggle): add helperText and errorText properties (#30161)
Issue number: N/A --------- ## What is the current behavior? Toggle does not support helper and error text. ## What is the new behavior? Adds support for helper and error text, similar to input and textarea. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Bottom Content: Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/bottom-content) - [Item: Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Brandy Smith
|
99d2f1c750 |
feat(checkbox): add helperText and errorText properties (#30140)
Issue number: resolves #29810 --------- ## What is the current behavior? Checkbox does not support helper and error text. ## What is the new behavior? Adds support for helper and error text, similar to input and textarea. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Bottom Content: Preview](https://ionic-framework-git-rou-11141-ionic1.vercel.app/src/components/checkbox/test/bottom-content) - [Item: Preview](https://ionic-framework-git-rou-11141-ionic1.vercel.app/src/components/checkbox/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
335672d523 | refactor(modal): allow dragging when expandToScroll is false (#30235) | ||
|
Brandy Smith
|
9fe44559ce | Merge branch 'main' into chore-feat-8.5-main | ||
|
Maria Hutt
|
ba8d8f4896 |
fix(toggle): trigger focus and blur on click (#30234)
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 blur and focus events do not trigger when clicking even though the value changes. Those events are only triggered when dragged. This leads to Angular validation to not work accurately when clicking so the `ion-touched` is never added to the toggle since it relies on the blur event. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The blur and focus events also trigger on click. This follows the same logic as `ion-checkbox`. ## 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: Recommendation to use `toggle/test/basic/index.html`: [Preview](https://ionic-framework-git-toggle-focus-ionic1.vercel.app/src/components/toggle/test/basic) Add the following script: ```js <script> document.addEventListener('ionChange', () => { console.log('toggle: ionChange') }); document.addEventListener('ionFocus', () => { console.log('toggle: ionFocus') }); document.addEventListener('ionBlur', () => { console.log('toggle: ionBlur') }); </script> ``` Verify that the focus and blur events trigger when clicking and dragging. |
||
|
fudom
|
322319397c |
fix(range): handle unsupported values for range min and max (#30070)
Issue number: resolves #29667 --------- ## What is the current behavior? Currently, if min/max are set to undefined on `IonRange` (which is an accepted value), it breaks the DOM. ## What is the new behavior? After these changes, if min/max are set to undefined or any unsupported value (such as infinity or a NaN), it will fall back to the default values for min and max (currently, 1 and 100 respectively). ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --------- Co-authored-by: ShaneK <shane@shanessite.net> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
José Rio
|
4df0e0f4c0 |
fix(alert): change focused element and improve keyboard navigation (#30220)
Issue number: internal ## What is the current behavior? > Once Alert gets open the focusable element was the ion-alert itself. > <img width="279" alt="Screenshot 2025-02-27 at 18 07 19" src="https://github.com/user-attachments/assets/50ad3b75-ba32-4dd1-b17e-c5a5bf16f93b" /> ## What is the new behavior? In order to mimick native alert a11y behaviour... Changed the focused element based on the amount of existing buttons. > If there is only 1 button, it should be that one focused > <img width="304" alt="Screenshot 2025-02-27 at 18 04 52" src="https://github.com/user-attachments/assets/e273f65a-5347-4a29-a156-f6e57852f0dc" /> > Otherwise it should focus the `.alert-wrapper` container > <img width="284" alt="Screenshot 2025-02-27 at 18 05 02" src="https://github.com/user-attachments/assets/4a8507f3-a31f-40b9-8cd7-478ec881e3ed" /> > > **NOTE**: The yellow outline it's just for demo purposes, it was not implemented 🤪 ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information - Also updated support to the shiftTab keyboard navigation. - Updated tests and screenshots with the latest changes. --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Shane
|
2149ba2c8d |
fix(capacitor): use proper types for capacitor v7 support (#30228)
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, Capacitor types are outdated in Ionic Framework and we're accessing a type property that no longer exists in Capacitor 7.0.0+ ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> This PR updates the capacitor version and addresses removal of `.Plugins` from `@capacitor/core`'s `CapacitorGlobal`, which we rely on to dynamically access plugins that the user may or may not have installed. The fix for this was creating a custom type definition to support accessing `Plugins`. While `Plugins` was removed from Capacitor if we were accessing it directly from core, we're pulling it from the window in the browser, where it's still exposed, so we just needed to make our type reflect that. ## 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. --> Technically, this issue does not prevent Framework from working with Capacitor 7 because it's only a typing issue, but it's still a minor issue that should be addressed in our effort to support Capacitor 7. This PR, along with #30195, should make it ready for that. |
||
|
r-yanyo
|
b6b43ae292 |
fix(capacitor): replace deprecated platform check method (#30195)
Issue number: resolves internal
ref: https://github.com/ionic-team/capacitor/issues/7884
---------
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
`this.platform.is('capacitor')` returns `false` in Capacitor App.
## What is the new behavior?
`this.platform.is('capacitor')` returns as expected.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
It might also need to be fixed.
|
||
|
Brandy Smith
|
4322935540 |
fix(textarea): update helper text and counter color (#30148)
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11559-ionic1.vercel.app/src/components/textarea/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
fdd52832c6 |
fix(input): update helper text and counter color (#30149)
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11558-ionic1.vercel.app/src/components/input/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
ShaneK
|
ecaeb390cf | Merge branch 'main' of github.com:ionic-team/ionic-framework into merge/main-into-8.5 | ||
|
João Ferreira
|
8eaeb22e7a |
fix(select): auto-scroll to selected item for all interfaces (#30202)
Issue number: resolves #19296 --------- <!-- 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. --> - when the ion-select is with the interface action-sheet or alert is not scrolling to the selected item on open ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - change test page so all select have scroll; - guarantee focusVisibleElement is called on all interfaces; ## 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. --> --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Pedro Lourenço
|
14b6538d98 |
fix(segment-button): protect connectedCallback for when segment-content has not yet been created (cherry-pick) (#30138)
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. --> When the `connectedCallback` method is called for a segment-button and its corresponding segment-content has not been created in that instant, a console error is thrown and the method returns. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `connectedCallback` will now wait, at most 1 second, for the corresponding segment-content to be created. - The new behaviour can be tested in segment-view/basic. ## 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. --> |
||
|
Giuliana Silva
|
41da4c3565 |
feat(checkbox): add required prop (#30157)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to checkbox's inner native input.
## 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.
-->
|
||
|
Giuliana Silva
|
0b549835b6 |
feat(select): add required prop (#30155)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `aria-required` attribute to select's inner native button.
## 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. -->
|
||
|
Giuliana Silva
|
0bbb9f37b4 |
feat(toggle): add required prop (#30156)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to toggle's inner native input.
## 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.
-->
|
||
|
Israel de la Barrera
|
166e43554e |
feat(modal): add expandToScroll property to allow scrolling at all breakpoints (#30097)
Issue number: resolves #24631 Co-authored-by: Maria Hutt <13530427+thetaPC@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
fudom
|
ac4ea3232b |
feat(toolbar): add shadow parts for background, container, and content (#30069)
Resolves #30068 --------- Add `part` attributes to toolbar for the `background`, `container` and `content`. |
||
|
Sean Perkins
|
efd3e0fd2b |
feat(config): add logLevel option to suppress ionic warnings and errors (#30015)
resolves #29814 --------- - Developers can assign a value to `logLevel` in the Ionic config to control the log level that Ionic Framework will produce logs for. - `OFF` will completely disable all warnings and errors from Ionic - `WARN` will log warnings and errors - `ERROR` will log only errors - Default behavior is that developers receive both Ionic warnings and errors - Configuration only applies to usages of `printIonWarning` and `printIonError` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
3f8346e718 |
fix(select-modal): match radio styles to iOS native (#30119)
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. --> When the `select-modal` displays radios, a bottom border is shown under the radio icon and text. However, native iOS does not have the border under the icon. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The bottom border is displayed under the radio text only. - The `ion-item` within `select-modal` has been given the prop of `lines="none"` since border styling has been done through `select-md.ios.scss` and because `md` doesn't use it. - Updated snapshots ## 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 (iOS)](https://ionic-framework-git-rou-11404-ionic1.vercel.app/src/components/select/test/basic?ionic%3Amode=ios) [Preview (md)](https://ionic-framework-git-rou-11404-ionic1.vercel.app/src/components/select/test/basic) |
||
|
Tanner Reits
|
000f55303e |
fix(segment): add logic to connect to segment-view in componentDidLoad() callback (#30060)
Issue number: resolves #30000 --------- <!-- 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 "swipeable segments" feature does not work correctly in an Angular environment (tested with both standalone and module architecture). The issues is that the `ion-segment-view` element is not correctly "attached" to the segment since it does not exist at the time the `connectedCallback()` is first executed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Added the logic to connect the `ion-segment-view` to the `componentDidLoad()` callback in addition to the `connectedCallback()`. The existing logic was left in place for the case where the element is removed and reattached to the DOM. ## 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.4.2-dev.11733239325.140ef7c3` |
||
|
Maria Hutt
|
845071c97a |
fix(menu): hide from screen readers while animating (#30036)
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. --> When the menu is presented on an Android device, TalkBack's focus rings may appear in the wrong position due to the transition (specifically `transform` styles). This occurs because the focus rings are initially displayed at the starting position of the elements before the transition begins. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - When an overlay is being animated (presenting or dismissing), the overlay will hide from screen readers. This allows Talkback to display the focus rings on the correct position. ## 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.4.1-dev.11732305980.19d90e1c` Related to https://github.com/ionic-team/ionic-framework/pull/29951 |
||
|
Maria Hutt
|
f6188c47e9 |
fix(overlays): announce info after opening based on platform (#30025)
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. --> PR https://github.com/ionic-team/ionic-framework/pull/29951 would hide the overlays from screen readers while animating. This allows the element to navigate to its correct destination for screen readers to interact with. Otherwise, the focus rings would never appear. However, this ended up breaking the interaction for iOS. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Overlays are hidden from screen readers while animating only if the platform is `android`. Since the original issue only applied to Android devices. ## 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.4.1-dev.11732033492.170e160c` Test on iOS and Android devices. |
||
|
Tanner Reits
|
8ee42bbc1e |
fix(overlays): focus management with checkbox/radio (#30026)
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. --> Using `Tab` or `Shift + Tab` to focus through elements in a modal won't behave as expected when using `ion-checkbox` or `ion-radio` within an `ion-item`. Previously, the behavior would result in the last item in a list getting focus styling, but `document.activeElement` would still be the first actionable item in the overlay ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> For checkboxes, the `ion-checkbox` element itself will be focused rather than the encapsulating `ion-item` For radios, the `ion-radio-group` will be used to focus the appropriate element. This will be the first `ion-radio` if there is no "checked" item, or the "checked" item if one exists. ## 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. --> |
||
|
Maria Hutt
|
23763abf79 |
fix(header): use aria attributes to hide small title when collapsed (#30027)
Issue number: resolves #29347 --------- <!-- 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. --> Focusable elements like buttons cannot be accessed within the `ion-header` when it's collapsed. They're only accessible once the small title is displayed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Moved the `aria-hidden` from the header to `ion-title`, this aligns with native. - Updated existing 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. --> Dev build: `8.4.1-dev.11732064156.12837790` |
||
|
Alexander Harding
|
470decca7b |
fix(toast): swipe gesture works with custom container layout (#29999)
Issue number: resolves #29998 --------- <!-- 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? Applying a custom layout to `ion-toast::part(container)`, for example `width: 50%`, will make the part of the toast outside this element's bounds non-interactive for swiping gestures. ## What is the new behavior? Can swipe from anywhere on the toast with custom layout applied to ::part(container) ## 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 | Before | After | |-------|-----------------------------------------------------| | <video src="https://github.com/user-attachments/assets/fc450066-5fb1-4fd9-bfbd-7f2cd55ce855"></video> | <video src="https://github.com/user-attachments/assets/991f6a42-f6fe-479b-9f68-7e7e35dca799"></video> | |