Issue number: resolves#27873
---------
<!-- 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. -->
Custom animations are not always used when the `handleNavigateBack`
method is called. This impacts both Ionic React and Ionic Vue.
While we do set the `incomingRouteParams` with the animation:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L247-L252)
We do sometimes call `handleNavigate`:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L273-L279)
This `handleNavigate` method sets `incomingRouteParams` again:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L225-L230)
Since we do not re-pass `routeAnimation`, that field gets set to
`undefined` and the custom animation does not get used.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Custom animation is now passed to `handleNavigate`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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.2.2-dev.11690810887.180000d1`
Issue number: N/A
---------
## What is the current behavior?
Buttons containing only icons are not accessible as there is no way to
pass an `aria-label` attribute (or any other html attribute).
## What is the new behavior?
- Adds the `htmlAttributes` property on the `AlertButton` interface
- Passes the `htmlAttributes` to the buttons
- Adds a test to verify `aria-label` and `aria-labelled-by` are passed
to the button
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: N/A
---------
## What is the current behavior?
Buttons containing only icons are not accessible as there is no way to
pass an `aria-label` attribute (or any other html attribute).
## What is the new behavior?
- Adds the `htmlAttributes` property on the `ActionSheetButton`
interface
- Passes the `htmlAttributes` to the buttons (both the buttons array and
the cancelButton)
- Adds two tests to verify `aria-label` and `aria-labelled-by` are
passed to a button with and without the cancel role - this was done
because action sheet breaks these buttons up when rendering
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
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. -->
See: https://github.com/ionic-team/ionic-framework/issues/27877
The current description does not accurately describe what `size="auto"`
does.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Description clarifies that the width of the popover is set based on
platform defaults.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: N/A
---------
## What is the current behavior?
Buttons containing only icons are not accessible as there is no way to
pass an `aria-label` attribute (or any other html attribute).
## What is the new behavior?
- Adds the `htmlAttributes` property on the `ToastButton` interface
- Passes the `htmlAttributes` to the buttons
- Adds a test to verify `aria-label` and `aria-labelled-by` are passed
to the button
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: resolves#27438
---------
<!-- 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 issues with the modern radio syntax:
1. The native radio is inside the Shadow DOM. As a result, radios are
not announced with their parent group with screen readers (i.e. "1 of
3")
2. The native radio cannot be focused inside of `ion-select-popover` on
Firefox.
3. The `ionFocus` and `ionBlur` events do not fire.
I also discovered an issue with item:
1. Items inside of a Radio Group have a role of `listitem` which prevent
radios from being grouped correctly in some browsers. According to
https://bugzilla.mozilla.org/show_bug.cgi?id=1840916, browsers are
behaving correctly here. The `listitem` role should not be present when
an item is used in a radio group (even if the radio group itself is
inside a list).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Most of the changes are test-related, but I broke it down per commit to
make this easier to review:
ae77002afd
- Item no longer has `role="listitem"` when used inside of a radio
group.
- Added spec tests to verify the role behavior
0a9b7fb91d
- I discovered that some the legacy basic test were accidentally using
the modern syntax. I corrected this by adding `legacy="true"` to the
radios.
a8a90e53b2,
412d1d54e7,
and
1d1179b69a
- The current radio group tests only tested the legacy radio syntax, and
not the modern syntax.
- I created a `legacy` directory to house the legacy syntax tests.
- I created new tests in the root test directory for the modern syntax.
- I also deleted the screenshots for the modern tests here because the
tests for `ion-radio` already take screenshots of the radio (even in an
item).
e2c966e68b
- Moved radio roles to the host. This allows Firefox to focus radios and
for screen readers to announce the radios as part of a group.
- I also added focus/blur listeners so ionFocus and ionBlur fire
f10eff47a5
- I cleaned up the tests here to use a common radio fixture
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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 tested this with the following setups. ✅ indicates the screen reader
announces the group count (i.e. "1 of 4"). ❌ indicates the screen reader
does not announce the group count.
**Radio in Radio Group:**
- iOS + VoiceOver: ✅
- Android + TalkBack: ✅
- macOS + VoiceOver + Safari: ✅
- macOS + VoiceOver + Firefox: ✅
- macOS + VoiceOver + Chrome: ✅
- Windows + NVDA + Chrome: ✅
- Windows + NVDA + Firefox: ✅
**Radio in Item in Radio Group :**
- iOS + VoiceOver: ✅
- Android + TalkBack: ❌
(https://bugs.chromium.org/p/chromium/issues/detail?id=1459006)
- macOS + VoiceOver + Safari: ✅
- macOS + VoiceOver + Firefox: ✅
- macOS + VoiceOver + Chrome: ❌
(https://bugs.chromium.org/p/chromium/issues/detail?id=1459003)
- Windows + NVDA + Chrome: ✅
- Windows + NVDA + Firefox: ✅
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.36.1 to 1.36.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>1.36.2</h2>
<h3>Highlights</h3>
<p><a
href="https://redirect.github.com/microsoft/playwright/issues/24316">microsoft/playwright#24316</a>
- [REGRESSION] Character classes are not working in globs in 1.36</p>
<h3>Browser Versions</h3>
<ul>
<li>Chromium 115.0.5790.75</li>
<li>Mozilla Firefox 115.0</li>
<li>WebKit 17.0</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<ul>
<li>Google Chrome 114</li>
<li>Microsoft Edge 114</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="1f983acac0"><code>1f983ac</code></a>
chore: mark 1.36.2 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/24379">#24379</a>)</li>
<li><a
href="40e2096fbc"><code>40e2096</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/24371">#24371</a>):
fix: properly handle character sets in globs</li>
<li>See full diff in <a
href="https://github.com/Microsoft/playwright/compare/v1.36.1...v1.36.2">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Issue number: resolves#27830
---------
<!-- 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. -->
Card modals set the body background to `black` to match iOS. This color
should be removed once the final card modal has been closed. When modals
were updated to work inline, the code that removed the background color
was never updated to account for this. As a result, opening multiple
inline card modals never removes the background color because there are
always >1 modals in the DOM.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The card modal now queries for _visible_ modals in the DOM to
determine if it should remove the background color.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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.2.1-dev.11689879279.14e28634`
Issue number: resolves#22722
---------
<!-- 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. -->
Item Sliding Options are not disabled until after a 600ms timeout. This
timeout exists to allow the close transition to complete. Without the
timeout, the item sliding options disappear without a transition. I
explored waiting for the `transitionend` event instead of the
`setTimeout`, but the bug persisted.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- If an item sliding is closing then we add a class to the host. This
class disables pointer events on all `ion-item-options` children so the
buttons cannot be accidentally tapped while closing. This class is then
removed after the 600ms timeout.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from
5.2.1 to 5.2.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s
releases</a>.</em></p>
<blockquote>
<h2>5.2.2</h2>
<h2><a
href="https://github.com/ionic-team/capacitor/compare/5.2.1...5.2.2">5.2.2</a>
(2023-07-19)</h2>
<h3>Bug Fixes</h3>
<ul>
<li>add http method to prototype.open (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6740">#6740</a>)
(<a
href="1fd2d8762f">1fd2d87</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor/blob/main/CHANGELOG.md"><code>@capacitor/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2><a
href="https://github.com/ionic-team/capacitor/compare/5.2.1...5.2.2">5.2.2</a>
(2023-07-19)</h2>
<h3>Bug Fixes</h3>
<ul>
<li>add http method to prototype.open (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6740">#6740</a>)
(<a
href="1fd2d8762f">1fd2d87</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="f378edae9e"><code>f378eda</code></a>
Release 5.2.2</li>
<li><a
href="1fd2d8762f"><code>1fd2d87</code></a>
fix: add http method to prototype.open (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6740">#6740</a>)</li>
<li><a
href="67c7f6e7bd"><code>67c7f6e</code></a>
chore: Improve bot message for requesting reproductions (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6735">#6735</a>)</li>
<li>See full diff in <a
href="https://github.com/ionic-team/capacitor/compare/5.2.1...5.2.2">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Issue number: Resolves#27476
---------
<!-- 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. -->
Ionic Angular application on Angular v16 cannot use the
[`bindToComponentInputs`](https://angular.io/api/router/ExtraOptions#bindToComponentInputs)
feature to assign route parameters, query parameters, route data and
route resolve data to component inputs.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic Angular developers can use the option on `RouterModule.forRoot`
to enable the Angular feature for binding the route snapshot data to the
component inputs.
**Modules**
```ts
@NgModule({
imports: [
RouterModule.forRoot([/* your routes */], {
bindToComponentInputs: true // <-- enable this feature
})
]
})
export class AppModule { }
```
**Standalone**
```ts
import { withComponentInputBinding } from '@angular/router';
bootstrapApplication(App, {
providers: [
provideRouter(routes,
//... other features
withComponentInputBinding() // <-- enable this feature
)
],
});
```
With this feature enabled, developers can bind route parameters, query
parameters, route data and the returned value from a resolver to input
bindings on their component.
For example, with a route configuration of:
```ts
RouterModule.forChild([
{
path: ':id',
data: {
title: 'Hello world'
},
resolve: {
name: () => 'Resolved name'
},
loadComponent: () => import('./example-component/example.component').then(c => c.ExampleComponent)
}
])
```
and a component configuration of:
```ts
@Component({ })
export class ExampleComponent {
@Input() id?: string;
@Input() title?: string;
@Input() name?: string;
@Input() query?: string;
}
```
Navigating to the component with a url of: `/2?query=searchphrase`
The following would occur:
- `id` would return `2`
- `title` would return `Hello world`
- `name` would return `Resolved name`
- `query` would return `searchphrase`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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 PR will need to be targeted to a minor release once a design doc is
approved by the team.
Dev-build: `7.1.3-dev.11689276547.129acb40`
Issue number: Resolves#27524#22206
---------
<!-- 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. -->
After destructive hydration from an Angular Universal build, the
`ion-menu` is disabled. This results in a few problematic behaviors:
- If used with an `ion-split-pane`, the split pane will not render with
the menu.
- If used with an `ion-menu-button`, the menu icon will not render and
the menu will not be accessible.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes automatically disabling the `ion-menu` when in a server
environment.
- Prevents setting an `ion-menu` that no longer exists in the DOM, as an
active menu. This allows the most recent menu to be enabled when
rendered from Angular Universal builds.
Loom recording overviewing the change:
https://www.loom.com/share/5a149218adc84cc2af435fc1b1f45124?sid=249028f4-be3d-4d4a-948a-597da83be95a
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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.1.4-dev.11689625795.1d16532b`
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.36.0 to 1.36.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>v1.36.1</h2>
<h3>Highlights</h3>
<p><a
href="https://redirect.github.com/microsoft/playwright/issues/24184">microsoft/playwright#24184</a>
- [REGRESSION]: Snapshot name contains some random string after test
name when tests are run in container</p>
<h3>Browser Versions</h3>
<ul>
<li>Chromium 115.0.5790.75</li>
<li>Mozilla Firefox 115.0</li>
<li>WebKit 17.0</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<ul>
<li>Google Chrome 114</li>
<li>Microsoft Edge 114</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="4417b78552"><code>4417b78</code></a>
chore: mark 1.36.1 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/24230">#24230</a>)</li>
<li><a
href="cf5900f142"><code>cf5900f</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/24213">#24213</a>):
Revert "fix: do not collide with other tests when test n...</li>
<li>See full diff in <a
href="https://github.com/Microsoft/playwright/compare/v1.36.0...v1.36.1">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps
[@capacitor/haptics](https://github.com/ionic-team/capacitor-plugins)
from 5.0.5 to 5.0.6.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor-plugins/releases"><code>@capacitor/haptics</code>'s
releases</a>.</em></p>
<blockquote>
<h2><code>@capacitor/haptics</code><a
href="https://github.com/5"><code>@5</code></a>.0.6</h2>
<h2><a
href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/haptics@5.0.5...@capacitor/haptics@5.0.6">5.0.6</a>
(2023-07-12)</h2>
<p><strong>Note:</strong> Version bump only for package
<code>@capacitor/haptics</code></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="f2564fe79f"><code>f2564fe</code></a>
chore(release): publish [skip ci]</li>
<li><a
href="d16bad6791"><code>d16bad6</code></a>
feat(filesystem): download files from server to filesystem</li>
<li><a
href="7e1911d6cd"><code>7e1911d</code></a>
fix(google-maps): Add missing listeners to removeAllMapListeners (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1672">#1672</a>)</li>
<li><a
href="798f788452"><code>798f788</code></a>
fix(push-notifications): make requestPermissions resolve if granted (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1677">#1677</a>)</li>
<li><a
href="487258940e"><code>4872589</code></a>
fix(local-notifications): make requestPermissions resolve if granted (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1678">#1678</a>)</li>
<li><a
href="94863cd60b"><code>94863cd</code></a>
chore: grant packages-write to workflows (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1671">#1671</a>)</li>
<li>See full diff in <a
href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/haptics@5.0.5...@capacitor/haptics@5.0.6">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Issue number: resolves#19368
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
The form submits when clicking on the `ion-button`. However, users
cannot submit the form when focused on a form element and pressing the
`enter` button. This does not follow the behavior of the native button
on a form.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Form now submits when a form element is focused and the `enter` button
is pressed.
- It also submits regardless of the amount of form elements present.
- Form will not submit if the `ion-button` is disabled.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
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. -->
Ionic currently detects and uses Capacitor APIs for different plugins
(haptics, status bar and keyboard). This implementation does not have
type safety and can result in unexpected behaviors.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `@capacitor/core`, `@capacitor/keyboard`, `@capacitor/haptics`
and `@capacitor/status-bar` as dev dependencies. These should _only_ be
used with `import type { }`.
- Refactors the plugin usages to be typed against the plugin packages,
while using a duplicate enum when needing a value. This allows us to not
bundle the capacitor plugins with Ionic Framework.
- Introduces a `getCapacitor()` function for interacting with the
`window.Capacitor` object through a typed object.
**How does it work?**
The idea is we want the type safety from the Capacitor packages, without
directly bundling that source code within Ionic Framework. This means we
use the Capacitor deps where a type is needed, but clone any enums where
a value is referenced. If a Capacitor dep changes the supported values,
Typescript will fail to compile and that will signal to use to update
our enum values to match any changes.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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.1.2-dev.11688696027.1c4d4ad1`
Tested against a demo app for some of the core behavior:
https://github.com/sean-perkins/capacitor-ionic-plugins-demo
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 `item` test for `ion-toggle` uses `label` instead of `toggle` in the
file name.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Test and corresponding screenshots folder renamed.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: resolves#27345
---------
<!-- 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. -->
WebKit has a bug where children of grid elements placed inside flex
elements have the wrong size. This is causing textarea's dimensions to
spill out of its grid container. Grid is used for autogrow
functionality, and the grid itself is placed inside `.label-wrapper`
which uses flexbox for aligning the label and control.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `grid-auto-rows: 100%` to avoid the WebKit bug which specifies
the size of implicitly-created grid rows.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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.1.3-dev.11688748118.18ff9e7d`
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=256781
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Resolves#27498
---------
<!-- 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 `ion-radio`, `ion-checkbox`, or `ion-toggle` is used within
`ion-item`, top and bottom margins are not added to the label, while
they are present when using the legacy syntax. We didn't catch this
because the issue is only visible when using a label that breaks onto
more than one line; otherwise, the height of the item exceeds what the
margins would've added.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Margins added. Values were taken from `ion-item` styles
[here](096d9cc931/core/src/components/item/item.ios.scss (L203-L206))
and
[here](096d9cc931/core/src/components/item/item.md.scss (L298-L301)),
which no longer get applied because the `ion-label` is nested in an
additional shadow component. Note that left/right margins are already
included in the modern syntax labels.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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 PR is a combination of the following:
- https://github.com/ionic-team/ionic-framework/pull/27771
- https://github.com/ionic-team/ionic-framework/pull/27783
- https://github.com/ionic-team/ionic-framework/pull/27784
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: resolves#27773
---------
<!-- 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 focus trap util for scoped components moves focus back to the first
focusable element inside of `.ion-overlay-wrapper` when clicking the
backdrop. The reason for this is it (incorrectly) assumes that all
focusable elements will be children of `.ion-overlay-wrapper`. This is
true **except** for `ion-backdrop` which overlays the entire screen and
therefore cannot be a child of `.ion-overlay-wrapper`.
This does not impact modal and popover as the shadow focus trap utility
makes use of the Shadow Root as the parent for all focusable elements,
not `.ion-overlay-wrapper`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Scoped focus trap util no longer moves focus if the `ion-backdrop` was
focused.
I opted to explicitly account for `ion-backdrop` rather than come up
with some new private API. As far as I can tell `ion-backdrop` is the
only exception to this focus trapping rule with `.ion-overlay-wrapper`.
Open to alternative ideas though.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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.1.3-dev.11689085446.181c2143`
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 was skipped due to flakiness
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Re-enabled test
- Removes directions tests because behavior does not vary across text
directions
- Updated screenshot to screenshot individual picker instead of the
entire page
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: ionitron <hi@ionicframework.com>
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. -->
Focus trapping tests were disabled because they were flaky
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Re-enabled the test
- Migrated the test to use the pageUtils fixture which seems to be more
stable with keyboard focus than the built-in page.keyboard commands
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: N/A - this does not completely resolve an issue but it
enables users to opt-in to having text wrap in a button by setting a
minimum height
---------
## What is the current behavior?
The current behavior when text is really long in a button is:
- Default buttons expand in width until part of the text (and button) is
off the screen and not in the visible viewport
- Block and full buttons horizontally align the text in the center and
overflow it on both sides (but the overflow is not visible so the text
is cut off at the beginning and end)
## What is the new behavior?
Allow the button height to increase when text wraps and add some padding
so that buttons with wrapped text still look nice. This does **NOT**
wrap the text in a button by default. That will be done in FW-4599.
- Removed `text-overflow: ellipsis` since this does not have any effect
- Changes `height` setting to `min-height` on all button types (small,
large, default) and buttons inside of an item, toolbar or list header
- Increases `padding-top` and `padding-bottom` on the buttons so that
overflowing buttons have padding around them
- Changes `.button-native` display property from `block` to `flex` in
order for anchor tags (`<ion-button href="#">` to align their text
vertically
- Sets `flex-shrink: 0` on slotted `start`/`end` elements to prevent
icons (and other elements) from shrinking to make room for the text
- Adds e2e test for button wrapping including the different types of
buttons that were changed by this PR
- Adds `ion-text-wrap` to the `ion-button` elements used in this test to
verify the height / padding changes are working as desired (to be
removed with FW-4599)
- Screenshot diffs are in the following PR:
https://github.com/ionic-team/ionic-framework/pull/27561
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
This does **NOT** wrap the text in a button by default. It only enables
buttons to look nicer and auto adjust their height/padding when the text
is wrapping.
After internal discussion we decided that automatically making the text
wrap inside of a button may have undesired effects on existing apps. For
example, if someone has a button inside of a list header with a long
label, the button will now wrap if it has a space or dash in the text
content.
Developers should set `ion-text-wrap` on the `ion-button` to opt-in to
text wrapping in a button, and this will become the default as part of
FW-4599 (the next major release).
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: resolves#27762
---------
<!-- 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. -->
Stencil 3.4.1 regressed the tsconfig alias path transpilation. This is
fixed in 4.0.0 though.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Downgrade to Stencil 3.4.0. Stencil 4.0 has breaking changes, so I'd
like to wait on upgrading until we can work through any of the changes
that impact Ionic.
This reverts commit 9793b3c0a0828b938b825116f78f616b1550d623.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Stencil issue: https://github.com/ionic-team/stencil/issues/4550
