diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
index 425ce239e1f..c584a0500a7 100644
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -8,7 +8,7 @@ inputs:
runs:
using: 'composite'
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: 18.x
diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index b2b9fd75ed9..0d3655e60ea 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -8,7 +8,7 @@ inputs:
runs:
using: 'composite'
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: 18.x
diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml
index da273a8c4ba..ba235e39b5f 100644
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -13,6 +13,6 @@ jobs:
- name: 'Auto-assign issue'
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
with:
- assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+ assignees: sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
numOfAssignee: 1
allowSelfAssign: false
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 2cd2a4658db..34e45952c7e 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
build-core:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-core
with:
ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-clean-build
test-core-lint:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-lint
test-core-spec:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-spec
test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-screenshot
with:
shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-vue
build-vue-router:
needs: [build-vue]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-vue-router
test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
needs: [build-vue, build-vue-router]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-vue-e2e
with:
app: ${{ matrix.apps }}
@@ -126,14 +126,14 @@ jobs:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-angular
build-angular-server:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-angular-server
test-angular-e2e:
@@ -144,7 +144,7 @@ jobs:
needs: [build-angular, build-angular-server]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-angular-e2e
with:
app: ${{ matrix.apps }}
@@ -162,14 +162,14 @@ jobs:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-react
build-react-router:
needs: [build-react]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-react-router
test-react-router-e2e:
@@ -180,7 +180,7 @@ jobs:
needs: [build-react, build-react-router]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-react-router-e2e
with:
app: ${{ matrix.apps }}
@@ -202,7 +202,7 @@ jobs:
needs: [build-react, build-react-router]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-react-e2e
with:
app: ${{ matrix.apps }}
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index adfc4529535..46a2780e789 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -14,7 +14,7 @@ jobs:
permissions:
security-events: write
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: github/codeql-action/init@v2
with:
languages: javascript
diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
index 2e69d9e5c46..48dc911c622 100644
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -9,7 +9,7 @@ jobs:
outputs:
dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
# A 1 is required before the timestamp
# as lerna will fail when there is a leading 0
# See https://github.com/lerna/lerna/issues/2840
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index c728f48f16a..6f812a02f6c 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -12,7 +12,7 @@ jobs:
outputs:
nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
# A 1 is required before the timestamp
# as lerna will fail when there is a leading 0
# See https://github.com/lerna/lerna/issues/2840
diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml
index b6be9a446b7..4532d499555 100644
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -22,7 +22,7 @@ jobs:
release-core:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/publish-npm
with:
scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
needs: [release-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/docs built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -68,7 +68,7 @@ jobs:
needs: [release-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/core built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -95,7 +95,7 @@ jobs:
needs: [release-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/core built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -121,7 +121,7 @@ jobs:
needs: [release-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/core built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -147,7 +147,7 @@ jobs:
needs: [release-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/core built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -168,7 +168,7 @@ jobs:
needs: [release-react]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/core built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -194,7 +194,7 @@ jobs:
needs: [release-vue]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Restore @ionic/core built cache
uses: ./.github/workflows/actions/download-archive
with:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index e8e9711f777..c761f5b3f2f 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -50,7 +50,7 @@ jobs:
needs: [release-ionic]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
with:
token: ${{ secrets.IONITRON_TOKEN }}
fetch-depth: 0
@@ -78,7 +78,7 @@ jobs:
needs: [finalize-release]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
# Pull the latest version of the reference
# branch instead of the revision that triggered
# the workflow otherwise we won't get the commit
diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml
index 01ab63bb5e5..56d3a56a714 100644
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -26,7 +26,7 @@ jobs:
build-core-with-stencil-nightly:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-core-stencil-prerelease
with:
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-clean-build
test-core-lint:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-lint
test-core-spec:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-spec
with:
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-screenshot
with:
shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-vue
build-vue-router:
needs: [build-vue]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-vue-router
test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
needs: [build-vue, build-vue-router]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-vue-e2e
with:
app: ${{ matrix.apps }}
@@ -136,14 +136,14 @@ jobs:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-angular
build-angular-server:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-angular-server
test-angular-e2e:
@@ -154,7 +154,7 @@ jobs:
needs: [build-angular, build-angular-server]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-angular-e2e
with:
app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
needs: [build-core-with-stencil-nightly]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-react
build-react-router:
needs: [build-react]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-react-router
test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
needs: [build-react, build-react-router]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-react-router-e2e
with:
app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
needs: [build-react, build-react-router]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-react-e2e
with:
app: ${{ matrix.apps }}
diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
index b78a13c42a6..bce7f324f2b 100644
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -12,7 +12,7 @@ jobs:
build-core:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/build-core
test-core-screenshot:
@@ -33,7 +33,7 @@ jobs:
needs: [build-core]
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- uses: ./.github/workflows/actions/test-core-screenshot
with:
shard: ${{ matrix.shard }}
@@ -45,7 +45,7 @@ jobs:
runs-on: ubuntu-latest
needs: [test-core-screenshot]
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
# Normally, we could just push with the
# default GITHUB_TOKEN, but that will
# not cause the build workflow
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce2c2a8d726..bb3113aea0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
+
+
+### Bug Fixes
+
+* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
+* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
+
+
+
+
+
## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 735496b7602..123f6737459 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
+
+
+### Bug Fixes
+
+* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
+* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
+
+
+
+
+
## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
diff --git a/core/package-lock.json b/core/package-lock.json
index 99d760ad8ba..fa44dbdb184 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@ionic/core",
- "version": "7.7.2",
+ "version": "7.7.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/core",
- "version": "7.7.2",
+ "version": "7.7.3",
"license": "MIT",
"dependencies": {
"@stencil/core": "^4.12.2",
diff --git a/core/package.json b/core/package.json
index 9d657a2b227..9f5772d3bd6 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
- "version": "7.7.2",
+ "version": "7.7.3",
"description": "Base components for Ionic",
"keywords": [
"ionic",
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index ff3e372bf50..fc197ef171d 100644
--- a/core/src/components/label/label.scss
+++ b/core/src/components/label/label.scss
@@ -29,14 +29,6 @@
overflow: hidden;
}
-// TODO(FW-5289): move to :host-context(.item)
-// Shouldn't need :not(.item-input) as this was
-// only needed because of the specificity with
-// :not(.item-legacy)
-:host-context(.item:not(.item-input):not(.item-legacy)) {
- flex-grow: 1;
-}
-
:host(.ion-color) {
color: current-color(base);
}
diff --git a/core/src/components/label/test/item/item.e2e.ts b/core/src/components/label/test/item/item.e2e.ts
new file mode 100644
index 00000000000..aa14200707a
--- /dev/null
+++ b/core/src/components/label/test/item/item.e2e.ts
@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('label: in item'), () => {
+ test('should render correctly in an item', async ({ page }) => {
+ test.info().annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/29033',
+ });
+ await page.setContent(
+ `
+
+ Start
+ Default
+ End
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`label-item`));
+ });
+ });
+});
diff --git a/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..22bb5edec93
Binary files /dev/null and b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4ab92da5c1e
Binary files /dev/null and b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ee38a590233
Binary files /dev/null and b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cf3c72e7a56
Binary files /dev/null and b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..02c46013104
Binary files /dev/null and b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..571d817f730
Binary files /dev/null and b/core/src/components/label/test/item/item.e2e.ts-snapshots/label-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 9fe26349bb1..e15ae27e653 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
import type { LegacyFormController, NotchController } from '@utils/forms';
import { compareOptions, createLegacyFormController, createNotchController, isOptionSelected } from '@utils/forms';
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
+import { findItemLabel, focusVisibleElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
import type { Attributes } from '@utils/helpers';
import { printIonWarning } from '@utils/logging';
import { actionSheetController, alertController, popoverController } from '@utils/overlays';
@@ -329,7 +329,7 @@ export class Select implements ComponentInterface {
);
if (selectedItem) {
- focusElement(selectedItem);
+ focusVisibleElement(selectedItem);
/**
* Browsers such as Firefox do not
@@ -355,7 +355,7 @@ export class Select implements ComponentInterface {
'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)'
);
if (firstEnabledOption) {
- focusElement(firstEnabledOption.closest('ion-item')!);
+ focusVisibleElement(firstEnabledOption.closest('ion-item')!);
/**
* Focus the option for the same reason as we do above.
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 3dff5a5e657..81ffb4efa92 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -262,7 +262,7 @@ export const findItemLabel = (componentEl: HTMLElement): HTMLIonLabelElement | n
return null;
};
-export const focusElement = (el: HTMLElement) => {
+export const focusVisibleElement = (el: HTMLElement) => {
el.focus();
/**
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 8ccb015d8d8..11ec2f56698 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -22,7 +22,13 @@ import type {
import { CoreDelegate } from './framework-delegate';
import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
-import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from './helpers';
+import {
+ addEventListener,
+ componentOnReady,
+ focusVisibleElement,
+ getElementRoot,
+ removeEventListener,
+} from './helpers';
import { printIonWarning } from './logging';
let lastOverlayIndex = 0;
@@ -131,38 +137,55 @@ export const createOverlay = (
*/
const focusableQueryString =
'[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const isOverlayHidden = (overlay: Element) => overlay.classList.contains('overlay-hidden');
+/**
+ * Focuses the first descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
- let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;
-
- const shadowRoot = firstInput?.shadowRoot;
- if (shadowRoot) {
- // If there are no inner focusable elements, just focus the host element.
- firstInput = shadowRoot.querySelector(focusableQueryString) || firstInput;
- }
+ const firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;
- if (firstInput) {
- focusElement(firstInput);
- } else {
- // Focus overlay instead of letting focus escape
- overlay.focus();
- }
+ focusElementInOverlay(firstInput, overlay);
};
-const isOverlayHidden = (overlay: Element) => overlay.classList.contains('overlay-hidden');
-
+/**
+ * Focuses the last descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
const focusLastDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
const inputs = Array.from(ref.querySelectorAll(focusableQueryString)) as HTMLElement[];
- let lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+ const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+
+ focusElementInOverlay(lastInput, overlay);
+};
+
+/**
+ * Focuses a particular element in an overlay. If the element
+ * doesn't have anything focusable associated with it then
+ * the overlay itself will be focused.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an ion-button should be focused
+ * then we should actually focus the native