resolves#21982
BREAKING CHANGE:
- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected.
Issue number: N/A (see below)
---------
<!-- 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. -->
Mike found an issue while testing the Ionic 8 beta where there's a
flicker when presenting a picker in a modal on iOS. [We've seen this
issue
before](de13633a18/core/src/utils/forms/notch-controller.ts (L135-L144)),
and the reason why it's happening is there's a quirk in WebKit where the
IntersectionObserver callback is fired _after_ an accelerated animation
completes given a particular IO configuration.
The end result is there's a delay before each picker column is scrolled
to the correct place.
In particular, the modal enter animation on iOS is an accelerated
animation, and we use an IO to control when the picker columns [should
scroll their active options into
view](60056643a9/core/src/components/picker-column/picker-column.tsx (L107)).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The root of the intersection observer is now the parent picker element
which avoids the WebKit quirk.
| `feature-8.0` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/7478512b-a691-405e-aafa-e9e377fc47ac"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/5092e050-733a-4965-8f16-317d251af46a"></video>
|
## 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/.github/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.0.0-dev.11709226349.179192de`
Note: Given that this bug is due to a WebKit quirk and is
timing-related, I did not add a test.
The team discussed these utilities for some upcoming features work. This
PR reflects some of the things I talked about during the discussion for
future reference.
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
[](https://renovatebot.com)
This PR contains the following updates:
| Package | Type | Update | Change |
|---|---|---|---|
| [github/codeql-action](https://togithub.com/github/codeql-action) |
action | major | `v2` -> `v3` |
---
### Release Notes
<details>
<summary>github/codeql-action (github/codeql-action)</summary>
### [`v3`](https://togithub.com/github/codeql-action/compare/v2...v3)
[Compare
Source](https://togithub.com/github/codeql-action/compare/v2...v3)
</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.
🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box
---
This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/ionic-team/ionic-framework).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNzMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjIyMC4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Issue number: resolves#29072
---------
<!-- 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 input blurring utility is causing adverse side effects in developer
applications by causing certain UI components to be blurred. This
utility was [added back in
2017](c10f72b1e2).
That commit claims to fix a number of issues, but
https://github.com/ionic-team/ionic-framework/issues/8933 and
https://github.com/ionic-team/ionic-framework/issues/11484 seem most
relevant here.
While the purpose of this utility is not definitively known it appears
that this was created to solve an issue on iOS where the searchbar was
not being blurred when tapping outside of the input. The linked issues
refer to cases where inputs are not blurred when they should be. This
aligns with the input blurring utility behavior where it only blurs
elements and never focuses them.
Additionally, the two linked issues only happened on iOS which aligns
with the default behavior of the input blurring utility which is to only
be enabled on iOS.
I tested the searchbar on iOS with this utility **disabled** and I was
able to blur the searchbar by tapping outside the input. It seems that
this utility was created to work around a WebKit issue that has since
been resolved.
https://github.com/ionic-team/ionic-framework/assets/2721089/7772688b-a0d4-476e-be72-931cc07cd93a
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Given that I am not 100% sure that this utility does what I think it
does, I'd like to propose we disable this feature by default starting in
Ionic 8. This will resolve the linked issue but also give developers an
escape hatch (by manually re-enabling it in their apps) if disabling the
utility does cause issues. The team can evaluate remove the code
altogether if disabling it does not have any known adverse side effects.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
I don't consider this a breaking change because a) `inputBlurring` is a
private API and b) there current thinking is that there should be no
behavior change (other than the buggy behaviors going away) since this
utility exists to solve a WebKit issue that no longer exists.
<!--
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/.github/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.0.0-dev.11709245047.1565a499`
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
[](https://renovatebot.com)
This PR contains the following updates:
| Package | Type | Update | Change |
|---|---|---|---|
| [actions/setup-node](https://togithub.com/actions/setup-node) | action
| major | `v3` -> `v4` |
---
### Release Notes
<details>
<summary>actions/setup-node (actions/setup-node)</summary>
### [`v4`](https://togithub.com/actions/setup-node/compare/v3...v4)
[Compare
Source](https://togithub.com/actions/setup-node/compare/v3...v4)
</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.
🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box
---
This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/ionic-team/ionic-framework).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNzMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjIxMi4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
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. -->
Modal inherits `aria-label` and `role` to an element inside of its
Shadow DOM. However, this only works if developers set the attributes on
the host element directly. Setting the attributes via the
`htmlAttributes` property causes the attributes to be set on the host
and not inherited.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `aria-label` and `role` are inherited even when set using
`htmlAttributes`.
## 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/.github/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: `7.7.4-dev.11709154993.1b49c313`
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. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Syncs the `feature-8.0` branch with the latest from `main`
## Does this introduce a breaking change?
- [ ] Yes
- [ ] 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/.github/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. -->
Set the `--debug` and `--verbose` flags on the Stencil Nightly CI build.
## What is the current behavior?
The Stencil nightly build doesn't provide all the information that it
could!
## What is the new behavior?
This sets the `--debug` and `--verbose` flags when calling `npm run
build` in the 'Build Ionic Core with Stencil Prerelease' github action,
which is used by the workflow which installs nightly Stencil builds and
builds framework with it, thereby checking for regressions.
This change will just ensure that this nightly build provides a bit more
information.
## 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/.github/CONTRIBUTING.md#footer
for more information.
-->
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. -->
we have puppeteer as a dep of the project. this isn't a problem per se,
as it isn't actually used. however, we're hitting intermittent errors in
CI when puppeteer tries to pull down the latest version of chrome.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
remove puppeteer as a dependency for the project. this is no longer
needed, as https://github.com/ionic-team/stencil/issues/4526 has been
fixed as of stencil v4.8.2
## 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/.github/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. -->
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 ticket describes renaming `TextValueAccessorDirective` since
`ion-range` is not a text-based control, however I think this was an
incorrect assumption made during the original implementation.
`ion-range` is a numeric based value accessor (either as a single number
or an object accepting a numeric start/end value).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates the usage of `ion-range` value accessor implementation to the
`NumericValueAccessorDirective`
- Adds tests for validating the value accessor is functioning 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/.github/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: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
BREAKING CHANGE:
The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed from range. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
BREAKING CHANGE:
The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
Issue number: resolves#28261
---------
<!-- 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 moving focus from a focus-trapped overlay to a toast, focus is
moved back to the overlay. This is the correct behavior as focus should
never leave a focus-trapped overlay (unless the overlay is dismissed or
focus is moved to a _new_ top-most overlay). However, the way we return
focus is a bit unexpected because it always returns focus to the last
focusable element in the overlay.
This means that if you were focused on the first focusable element,
presented the toast, and then focused the toast, focus might not be
moved back to that first focusable element. In the case of the linked
issue, this was causing an unexpected scroll so that the last focused
element could be in view.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This fix adds an exception for `ion-toast` (as it is the only overlay
that is **not** focus trapped) that ensures that focus is moved back to
the last focus 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/.github/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: `7.7.1-dev.11707253408.186eea70`
Note: We don't recommend this pattern in general because it would be
impossible for a screen reader user to focus the toast. However, we can
at least improve the experience for developers who continue to implement
this pattern by returning focus in a more predictable manner.
Docs: https://github.com/ionic-team/ionic-docs/pull/3432
Testing:
Reviewers should manually test the following behaviors:
1. Create a modal with 2 buttons. Have one of the buttons present a
toast. Open the toast and verify that you can still Tab to cycle through
the buttons in the modal.
2. Create a modal with 2 buttons. Have one of the buttons present a
toast. Open the toast. Move focus to the toast and verify that you can
still Tab to cycle through the buttons in the modal (once focus is
returned to the modal).
GitHub Actions is [transitioning from Node 16 to Node
20](https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/).
As a result, we have several GitHub Actions that need to be updated.
Rather than update these actions manually, I decided to have Renovatebot
do it. This PR adds Renovatebot so it can automatically create PRs to
update our GitHub Actions dependencies. I also migrated the Dependabot
config to use Renovatebot so we don't have two dependency management
tools.
Example test run:
https://github.com/liamdebeasi/framework-renovate-test/pulls
Note: You can ignore the Docker update. I am using this fork for
Docker-related work as well.
As a result of this PR, Renovatebot will create several PRs on this repo
to update GitHub Actions dependencies.
- Fix Internal issue (FW-5205) - Removed the build conditional in the
`item` component since the previous issue is already fixed in Stencil.
---------
<!-- 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. -->
- No changes were made in terms of behavior.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- No changes were made in terms of behavior so it will work as before.
## 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/.github/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. -->
- Spec tests still pass even after this change (we can see below the
results before and after the change)
- Ran the command `npm run test.spec
src/components/item/test/item.spec.ts
src/components/item/test/item.spec.tsx`
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. -->
We currently export two versions of the `ion-back-button` angular
implementation: `IonBackButton` and `IonBackButtonDelegate`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes `IonBackButtonDelegate` in favor of `IonBackButton`
## Does this introduce a breaking change?
- [x] Yes
- [ ] 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/.github/CONTRIBUTING.md#footer
for more information.
-->
- The `IonBackButtonDelegate` class has been removed in favor of
`IonBackButton`.
```diff
- import { IonBackButtonDelegate } from '@ionic/angular';
+ import { IonBackButton } from '@ionic/angular';
```
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
