fix(sheet): disable focus trap with string-based logic as well

merge release-8.7.5 (#30695 )
v8.7.5 --------- Co-authored-by: ionitron <hi@ionicframework.com>
2026-03-13 10:22:08 +08:00 · 2025-10-02 06:38:43 -07:00 · 2025-09-24 13:08:06 -07:00 · 2025-09-24 19:52:26 +00:00 · 2025-09-24 19:51:40 +00:00 · 2025-09-24 19:29:58 +00:00
194 changed files with 3560 additions and 766 deletions
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -9,7 +9,7 @@ runs:
  using: 'composite'
  steps:
    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x

--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -9,7 +9,7 @@ runs:
  using: 'composite'
  steps:
    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - name: Install Dependencies
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/publish-npm/action.yml
+++ b/.github/workflows/actions/publish-npm/action.yml
@@ -19,7 +19,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    # Provenance requires npm 9.5.0+
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x

--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Lint'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - name: Install Dependencies
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -13,7 +13,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - name: Install Dependencies
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -7,7 +7,7 @@ on:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
      with:
        node-version: 22.x
    - uses: actions/download-artifact@v5
--- 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@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
        with:
-          assignees: brandyscarney, ShaneK
+          assignees: brandyscarney, thetaPC, ShaneK
          numOfAssignee: 1
          allowSelfAssign: false
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@@ -13,7 +13,7 @@ jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/labeler@v5
+    - uses: actions/labeler@v6
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"
        sync-labels: true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
+
+
+### Bug Fixes
+
+* **modal:** allow sheet modals to skip focus trap ([#30689](https://github.com/ionic-team/ionic-framework/issues/30689)) ([a40d957](https://github.com/ionic-team/ionic-framework/commit/a40d957ad9c1897af365a91b45b00228a00d614c)), closes [#30684](https://github.com/ionic-team/ionic-framework/issues/30684)
+* **vue:** emit component-specific overlay events ([#30688](https://github.com/ionic-team/ionic-framework/issues/30688)) ([024d090](https://github.com/ionic-team/ionic-framework/commit/024d090122548e26ec2cdcfae4637dde8f288278)), closes [#30641](https://github.com/ionic-team/ionic-framework/issues/30641)
+
+
+
+
+
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **input:** improve error text accessibility ([#30635](https://github.com/ionic-team/ionic-framework/issues/30635)) ([c339bc3](https://github.com/ionic-team/ionic-framework/commit/c339bc36827b62ef871325869a9a5db9b17ac785))
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+* **segment-view:** scroll and select the right item when the component is in RTL context; ([#30675](https://github.com/ionic-team/ionic-framework/issues/30675)) ([66f517d](https://github.com/ionic-team/ionic-framework/commit/66f517d5b2154fff00b294a78f4107f057a580c6)), closes [#30079](https://github.com/ionic-team/ionic-framework/issues/30079)
+
+
+
+
+
 ## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
+
+
+### Bug Fixes
+
+* **modal:** allow sheet modals to skip focus trap ([#30689](https://github.com/ionic-team/ionic-framework/issues/30689)) ([a40d957](https://github.com/ionic-team/ionic-framework/commit/a40d957ad9c1897af365a91b45b00228a00d614c)), closes [#30684](https://github.com/ionic-team/ionic-framework/issues/30684)
+
+
+
+
+
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **input:** improve error text accessibility ([#30635](https://github.com/ionic-team/ionic-framework/issues/30635)) ([c339bc3](https://github.com/ionic-team/ionic-framework/commit/c339bc36827b62ef871325869a9a5db9b17ac785))
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+* **segment-view:** scroll and select the right item when the component is in RTL context; ([#30675](https://github.com/ionic-team/ionic-framework/issues/30675)) ([66f517d](https://github.com/ionic-team/ionic-framework/commit/66f517d5b2154fff00b294a78f4107f057a580c6)), closes [#30079](https://github.com/ionic-team/ionic-framework/issues/30079)
+
+
+
+
+
 ## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)


--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.54.2
+FROM mcr.microsoft.com/playwright:v1.55.1

 # Set the working directory
 WORKDIR /ionic
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/core",
-  "version": "8.7.3",
+  "version": "8.7.5",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "8.7.3",
+      "version": "8.7.5",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.36.2",
@@ -22,7 +22,7 @@
        "@clack/prompts": "^0.11.0",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.54.2",
+        "@playwright/test": "^1.55.1",
        "@rollup/plugin-node-resolve": "^8.4.0",
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/angular-output-target": "^0.10.0",
@@ -663,9 +663,9 @@
      "dev": true
    },
    "node_modules/@capacitor/core": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.2.tgz",
-      "integrity": "sha512-akCf9A1FUR8AWTtmgGjHEq6LmGsjA2U7igaJ9PxiCBfyxKqlDbuGHrlNdpvHEjV5tUPH3KYtkze6gtFcNKPU9A==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.3.tgz",
+      "integrity": "sha512-wCWr8fQ9Wxn0466vPg7nMn0tivbNVjNy1yL4GvDSIZuZx7UpU2HeVGNe9QjN/quEd+YLRFeKEBLBw619VqUiNg==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
@@ -681,18 +681,18 @@
      }
    },
    "node_modules/@capacitor/keyboard": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.2.tgz",
-      "integrity": "sha512-9We5BY1mu+QWOReDukr+6HxA4Bh0mKBU0txFtwXJdjBohttMYWJzB+dQf4oHrX8odiU2Cm/BfDdAU2wV06Cyig==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.3.tgz",
+      "integrity": "sha512-BIBKjmky5rOYNhvYhNeDi0MMvjwYZ6YF9JoCYcGKvKY+XLJKtezsEL78XfOlgWZBkbfR8uq3tzktY6PqgoYLKA==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": ">=7.0.0"
      }
    },
    "node_modules/@capacitor/status-bar": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.2.tgz",
-      "integrity": "sha512-fYYkkdzCbQV+MjZVnaQTFl5I4bddnFW8ZrPVxDjNoGVPTUG7H58Ij1+NcuNxHLXjJvZOoZeYJ3w3I16Wb2zssw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.3.tgz",
+      "integrity": "sha512-JyRpVnKwHij9hgPWolF6PK+HT3e2HSPjN11/h2OmKxq8GAdPGARFLv+97eZl0pvuvm0Kka/LpiLb5whXISBg7Q==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": ">=7.0.0"
@@ -1715,12 +1715,12 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz",
+      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.54.2"
+        "playwright": "1.55.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -3474,9 +3474,9 @@
      ]
    },
    "node_modules/chalk": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
-      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
      "dev": true,
      "engines": {
        "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -8593,12 +8593,12 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.55.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -8611,9 +8611,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
@@ -11102,9 +11102,9 @@
      "dev": true
    },
    "@capacitor/core": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.2.tgz",
-      "integrity": "sha512-akCf9A1FUR8AWTtmgGjHEq6LmGsjA2U7igaJ9PxiCBfyxKqlDbuGHrlNdpvHEjV5tUPH3KYtkze6gtFcNKPU9A==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.3.tgz",
+      "integrity": "sha512-wCWr8fQ9Wxn0466vPg7nMn0tivbNVjNy1yL4GvDSIZuZx7UpU2HeVGNe9QjN/quEd+YLRFeKEBLBw619VqUiNg==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
@@ -11118,16 +11118,16 @@
      "requires": {}
    },
    "@capacitor/keyboard": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.2.tgz",
-      "integrity": "sha512-9We5BY1mu+QWOReDukr+6HxA4Bh0mKBU0txFtwXJdjBohttMYWJzB+dQf4oHrX8odiU2Cm/BfDdAU2wV06Cyig==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.3.tgz",
+      "integrity": "sha512-BIBKjmky5rOYNhvYhNeDi0MMvjwYZ6YF9JoCYcGKvKY+XLJKtezsEL78XfOlgWZBkbfR8uq3tzktY6PqgoYLKA==",
      "dev": true,
      "requires": {}
    },
    "@capacitor/status-bar": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.2.tgz",
-      "integrity": "sha512-fYYkkdzCbQV+MjZVnaQTFl5I4bddnFW8ZrPVxDjNoGVPTUG7H58Ij1+NcuNxHLXjJvZOoZeYJ3w3I16Wb2zssw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.3.tgz",
+      "integrity": "sha512-JyRpVnKwHij9hgPWolF6PK+HT3e2HSPjN11/h2OmKxq8GAdPGARFLv+97eZl0pvuvm0Kka/LpiLb5whXISBg7Q==",
      "dev": true,
      "requires": {}
    },
@@ -11863,12 +11863,12 @@
      }
    },
    "@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz",
+      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
      "dev": true,
      "requires": {
-        "playwright": "1.54.2"
+        "playwright": "1.55.1"
      }
    },
    "@rollup/plugin-node-resolve": {
@@ -13076,9 +13076,9 @@
      "dev": true
    },
    "chalk": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
-      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
      "dev": true
    },
    "chalk-template": {
@@ -16812,19 +16812,19 @@
      }
    },
    "playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
      "dev": true,
      "requires": {
        "fsevents": "2.3.2",
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.55.1"
      }
    },
    "playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
      "dev": true
    },
    "postcss": {
@@ -18338,4 +18338,4 @@
      "dev": true
    }
  }
-}
+}
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.7.3",
+  "version": "8.7.5",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -44,7 +44,7 @@
    "@clack/prompts": "^0.11.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.55.1",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.10.0",
--- a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts-snapshots/action-sheet-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts-snapshots/action-sheet-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/card/test/a11y/card.e2e.ts-snapshots/card-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/card/test/a11y/card.e2e.ts-snapshots/card-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/content/test/standalone/content.e2e.ts-snapshots/content-standalone-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/content/test/standalone/content.e2e.ts-snapshots/content-standalone-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -3,6 +3,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTa
 import { startFocusVisible } from '@utils/focus-visible';
 import { getElementRoot, raf, renderHiddenInput } from '@utils/helpers';
 import { printIonError, printIonWarning } from '@utils/logging';
+import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
@@ -1598,7 +1599,7 @@ export class Datetime implements ComponentInterface {
      forcePresentation === 'time-date'
        ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
        : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-    return <ion-picker>{renderArray}</ion-picker>;
+    return <ion-picker class={FOCUS_TRAP_DISABLE_CLASS}>{renderArray}</ion-picker>;
  }

  private renderDatePickerColumns(forcePresentation: string) {
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -79,8 +79,15 @@ export class Input implements ComponentInterface {
   */
  @State() hasFocus = false;

+  /**
+   * Track validation state for proper aria-live announcements
+   */
+  @State() isInvalid = false;
+
  @Element() el!: HTMLIonInputElement;

+  private validationObserver?: MutationObserver;
+
  /**
   * The color to use from your application's color palette.
   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -396,6 +403,16 @@ export class Input implements ComponentInterface {
    };
  }

+  /**
+   * Checks if the input is in an invalid state based on Ionic validation classes
+   */
+  private checkInvalidState(): boolean {
+    const hasIonTouched = this.el.classList.contains('ion-touched');
+    const hasIonInvalid = this.el.classList.contains('ion-invalid');
+
+    return hasIonTouched && hasIonInvalid;
+  }
+
  connectedCallback() {
    const { el } = this;

@@ -406,6 +423,26 @@ export class Input implements ComponentInterface {
      () => this.labelSlot
    );

+    // Watch for class changes to update validation state
+    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+      this.validationObserver = new MutationObserver(() => {
+        const newIsInvalid = this.checkInvalidState();
+        if (this.isInvalid !== newIsInvalid) {
+          this.isInvalid = newIsInvalid;
+          // Force a re-render to update aria-describedby immediately
+          forceUpdate(this);
+        }
+      });
+
+      this.validationObserver.observe(el, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+
+    // Always set initial state
+    this.isInvalid = this.checkInvalidState();
+
    this.debounceChanged();
    if (Build.isBrowser) {
      document.dispatchEvent(
@@ -451,6 +488,12 @@ export class Input implements ComponentInterface {
      this.notchController.destroy();
      this.notchController = undefined;
    }
+
+    // Clean up validation observer to prevent memory leaks
+    if (this.validationObserver) {
+      this.validationObserver.disconnect();
+      this.validationObserver = undefined;
+    }
  }

  /**
@@ -626,22 +669,22 @@ export class Input implements ComponentInterface {
   * Renders the helper text or error text values
   */
  private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId } = this;
+    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    return [
-      <div id={helperTextId} class="helper-text">
-        {helperText}
+      <div id={helperTextId} class="helper-text" aria-live="polite">
+        {!isInvalid ? helperText : null}
      </div>,
-      <div id={errorTextId} class="error-text">
-        {errorText}
+      <div id={errorTextId} class="error-text" role="alert">
+        {isInvalid ? errorText : null}
      </div>,
    ];
  }

  private getHintTextID(): string | undefined {
-    const { el, helperText, errorText, helperTextId, errorTextId } = this;
+    const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;

-    if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    if (isInvalid && errorText) {
      return errorTextId;
    }

@@ -864,7 +907,7 @@ export class Input implements ComponentInterface {
              onCompositionstart={this.onCompositionStart}
              onCompositionend={this.onCompositionEnd}
              aria-describedby={this.getHintTextID()}
-              aria-invalid={this.getHintTextID() === this.errorTextId}
+              aria-invalid={this.isInvalid ? 'true' : undefined}
              {...this.inheritedAttributes}
            />
            {this.clearInput && !readonly && !disabled && (
--- a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/validation/index.html
+++ b/core/src/components/input/test/validation/index.html
@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Validation</title>
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: var(--ion-color-step-600);
+
+        margin-top: 10px;
+        margin-bottom: 5px;
+      }
+
+      .validation-info {
+        margin: 20px;
+        padding: 10px;
+        background: var(--ion-color-light);
+        border-radius: 4px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Validation Test</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="validation-info">
+          <h2>Screen Reader Testing Instructions:</h2>
+          <ol>
+            <li>Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)</li>
+            <li>Tab through the form fields</li>
+            <li>When you tab away from an empty required field, the error should be announced immediately</li>
+            <li>The error text should be announced BEFORE the next field is announced</li>
+            <li>Test in Chrome, Safari, and Firefox to verify consistent behavior</li>
+          </ol>
+        </div>
+
+        <div class="grid">
+          <div>
+            <h2>Required Email Field</h2>
+            <ion-input
+              id="email-input"
+              type="email"
+              label="Email"
+              label-placement="floating"
+              fill="outline"
+              placeholder="Enter your email"
+              helper-text="We'll never share your email"
+              error-text="Please enter a valid email address"
+              required
+            ></ion-input>
+          </div>
+
+          <div>
+            <h2>Required Name Field</h2>
+            <ion-input
+              id="name-input"
+              type="text"
+              label="Full Name"
+              label-placement="floating"
+              fill="outline"
+              placeholder="Enter your full name"
+              helper-text="First and last name"
+              error-text="Name is required"
+              required
+            ></ion-input>
+          </div>
+
+          <div>
+            <h2>Phone Number (Pattern Validation)</h2>
+            <ion-input
+              id="phone-input"
+              type="tel"
+              label="Phone"
+              label-placement="floating"
+              fill="outline"
+              placeholder="(555) 555-5555"
+              pattern="^\(\d{3}\) \d{3}-\d{4}$"
+              helper-text="Format: (555) 555-5555"
+              error-text="Please enter a valid phone number"
+              required
+            ></ion-input>
+          </div>
+
+          <div>
+            <h2>Password (Min Length)</h2>
+            <ion-input
+              id="password-input"
+              type="password"
+              label="Password"
+              label-placement="floating"
+              fill="outline"
+              placeholder="Enter password"
+              minlength="8"
+              helper-text="At least 8 characters"
+              error-text="Password must be at least 8 characters"
+              required
+            ></ion-input>
+          </div>
+
+          <div>
+            <h2>Age (Number Range)</h2>
+            <ion-input
+              id="age-input"
+              type="number"
+              label="Age"
+              label-placement="floating"
+              fill="outline"
+              placeholder="Enter your age"
+              min="18"
+              max="120"
+              helper-text="Must be 18 or older"
+              error-text="Please enter a valid age (18-120)"
+              required
+            ></ion-input>
+          </div>
+
+          <div>
+            <h2>Optional Field (No Validation)</h2>
+            <ion-input
+              id="optional-input"
+              type="text"
+              label="Optional Info"
+              label-placement="floating"
+              fill="outline"
+              placeholder="This field is optional"
+              helper-text="You can skip this field"
+            ></ion-input>
+          </div>
+        </div>
+
+        <div class="ion-padding">
+          <ion-button id="submit-btn" expand="block" disabled>Submit Form</ion-button>
+          <ion-button id="reset-btn" expand="block" fill="outline">Reset Form</ion-button>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      // Simple validation logic
+      const inputs = document.querySelectorAll('ion-input');
+      const submitBtn = document.getElementById('submit-btn');
+      const resetBtn = document.getElementById('reset-btn');
+
+      // Track which fields have been touched
+      const touchedFields = new Set();
+
+      // Validation functions
+      const validators = {
+        'email-input': (value) => {
+          if (!value) return false;
+          return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+        },
+        'name-input': (value) => {
+          return value && value.trim().length > 0;
+        },
+        'phone-input': (value) => {
+          if (!value) return false;
+          return /^\(\d{3}\) \d{3}-\d{4}$/.test(value);
+        },
+        'password-input': (value) => {
+          return value && value.length >= 8;
+        },
+        'age-input': (value) => {
+          if (!value) return false;
+          const age = parseInt(value);
+          return age >= 18 && age <= 120;
+        },
+        'optional-input': () => true, // Always valid
+      };
+
+      function validateField(input) {
+        const inputId = input.id;
+        const value = input.value;
+        const isValid = validators[inputId] ? validators[inputId](value) : true;
+
+        // Only show validation state if field has been touched
+        if (touchedFields.has(inputId)) {
+          if (isValid) {
+            input.classList.remove('ion-invalid');
+            input.classList.add('ion-valid');
+          } else {
+            input.classList.remove('ion-valid');
+            input.classList.add('ion-invalid');
+          }
+          input.classList.add('ion-touched');
+        }
+
+        return isValid;
+      }
+
+      function validateForm() {
+        let allValid = true;
+        inputs.forEach((input) => {
+          if (input.id !== 'optional-input') {
+            const isValid = validateField(input);
+            if (!isValid) {
+              allValid = false;
+            }
+          }
+        });
+        submitBtn.disabled = !allValid;
+        return allValid;
+      }
+
+      // Add event listeners
+      inputs.forEach((input) => {
+        // Mark as touched on blur
+        input.addEventListener('ionBlur', (e) => {
+          touchedFields.add(input.id);
+          validateField(input);
+          validateForm();
+
+          const isInvalid = input.classList.contains('ion-invalid');
+          if (isInvalid) {
+            console.log('Field marked invalid:', input.label, input.errorText);
+          }
+        });
+
+        // Validate on input
+        input.addEventListener('ionInput', (e) => {
+          if (touchedFields.has(input.id)) {
+            validateField(input);
+            validateForm();
+          }
+        });
+
+        // Also validate on focus loss via native blur
+        input.addEventListener('focusout', (e) => {
+          // Small delay to ensure Ionic's classes are updated
+          setTimeout(() => {
+            touchedFields.add(input.id);
+            validateField(input);
+            validateForm();
+          }, 10);
+        });
+      });
+
+      // Reset button
+      resetBtn.addEventListener('click', () => {
+        inputs.forEach((input) => {
+          input.value = '';
+          input.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
+        });
+        touchedFields.clear();
+        submitBtn.disabled = true;
+      });
+
+      // Submit button
+      submitBtn.addEventListener('click', () => {
+        if (validateForm()) {
+          alert('Form submitted successfully!');
+        }
+      });
+
+      // Initial setup
+      validateForm();
+    </script>
+  </body>
+</html>
--- a/core/src/components/item-divider/test/a11y/item-divider.e2e.ts-snapshots/item-divider-headings-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item-divider/test/a11y/item-divider.e2e.ts-snapshots/item-divider-headings-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item-divider/test/a11y/item-divider.e2e.ts-snapshots/item-divider-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item-divider/test/a11y/item-divider.e2e.ts-snapshots/item-divider-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-headings-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-headings-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-stacked-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-stacked-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-wrap-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-wrap-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/list-header/test/a11y/list-header.e2e.ts-snapshots/list-header-default-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/list-header/test/a11y/list-header.e2e.ts-snapshots/list-header-default-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/loading/test/a11y/loading.e2e.ts-snapshots/loading-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/loading/test/a11y/loading.e2e.ts-snapshots/loading-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -418,6 +418,9 @@ export class Menu implements ComponentInterface, MenuI {
   */
  @Method()
  setOpen(shouldOpen: boolean, animated = true, role?: string): Promise<boolean> {
+    // Blur the active element to prevent it from being kept focused inside an element that will be set with aria-hidden="true"
+    (document.activeElement as HTMLElement)?.blur();
+
    return menuController._setOpen(this, shouldOpen, animated, role);
  }

--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -95,6 +95,16 @@ export const createSheetGesture = (
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');

  const enableBackdrop = () => {
+    // Respect explicit opt-out of focus trapping/backdrop interactions
+    // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
+    const el = baseEl as HTMLIonModalElement & { focusTrap?: boolean; showBackdrop?: boolean };
+    const focusTrapAttr = el.getAttribute?.('focus-trap');
+    const showBackdropAttr = el.getAttribute?.('show-backdrop');
+    const focusTrapDisabled = el.focusTrap === false || focusTrapAttr === 'false';
+    const backdropDisabled = el.showBackdrop === false || showBackdropAttr === 'false';
+    if (focusTrapDisabled || backdropDisabled) {
+      return;
+    }
    baseEl.style.setProperty('pointer-events', 'auto');
    backdropEl.style.setProperty('pointer-events', 'auto');

@@ -235,7 +245,12 @@ export const createSheetGesture = (
     * ion-backdrop and .modal-wrapper always have pointer-events: auto
     * applied, so the modal content can still be interacted with.
     */
-    const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
+    const modalEl = baseEl as HTMLIonModalElement & { focusTrap?: boolean; showBackdrop?: boolean };
+    const focusTrapAttr = modalEl.getAttribute?.('focus-trap');
+    const showBackdropAttr = modalEl.getAttribute?.('show-backdrop');
+    const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+    const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+    const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
    if (shouldEnableBackdrop) {
      enableBackdrop();
    } else {
@@ -582,7 +597,16 @@ export const createSheetGesture = (
                   * Backdrop should become enabled
                   * after the backdropBreakpoint value
                   */
-                  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
+                  const modalEl = baseEl as HTMLIonModalElement & {
+                    focusTrap?: boolean;
+                    showBackdrop?: boolean;
+                  };
+                  const focusTrapAttr = modalEl.getAttribute?.('focus-trap');
+                  const showBackdropAttr = modalEl.getAttribute?.('show-backdrop');
+                  const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+                  const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+                  const shouldEnableBackdrop =
+                    currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
                  if (shouldEnableBackdrop) {
                    enableBackdrop();
                  } else {
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1237,6 +1237,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
    const isHandleCycle = handleBehavior === 'cycle';
    const isSheetModalWithHandle = isSheetModal && showHandle;

+    const focusTrapAttr = this.el.getAttribute('focus-trap');
    return (
      <Host
        no-router
@@ -1253,7 +1254,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
          [`modal-sheet`]: isSheetModal,
          [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll,
          'overlay-hidden': true,
-          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
+          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false',
          ...getClassMap(this.cssClass),
        }}
        onIonBackdropTap={this.onBackdropTap}
--- a/core/src/components/modal/test/basic/modal.spec.tsx
+++ b/core/src/components/modal/test/basic/modal.spec.tsx
@@ -28,6 +28,18 @@ describe('modal: focus trap', () => {

    expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
  });
+  it('should set the focus trap class when disabled via attribute string', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `
+        <ion-modal focus-trap="false"></ion-modal>
+      `,
+    });
+
+    const modal = page.body.querySelector('ion-modal')!;
+
+    expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
+  });
  it('should not set the focus trap class by default', async () => {
    const page = await newSpecPage({
      components: [Modal],
--- a/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/picker-column-option.scss
+++ b/core/src/components/picker-column-option/picker-column-option.scss
@@ -3,7 +3,7 @@
 // Picker Column
 // --------------------------------------------------

-button {
+.picker-column-option-button {
  @include padding(0);
  @include margin(0);

@@ -40,6 +40,6 @@ button {
  opacity: 0.4;
 }

-:host(.option-disabled) button {
+:host(.option-disabled) .picker-column-option-button {
  cursor: default;
 }
--- a/core/src/components/picker-column-option/picker-column-option.tsx
+++ b/core/src/components/picker-column-option/picker-column-option.tsx
@@ -124,9 +124,9 @@ export class PickerColumnOption implements ComponentInterface {
          ['option-disabled']: disabled,
        })}
      >
-        <button tabindex="-1" aria-label={ariaLabel} disabled={disabled} onClick={() => this.onClick()}>
+        <div class={'picker-column-option-button'} role="button" aria-label={ariaLabel} onClick={() => this.onClick()}>
          <slot></slot>
-        </button>
+        </div>
      </Host>
    );
  }
--- a/core/src/components/picker-column-option/test/a11y/picker-column-option.e2e.ts
+++ b/core/src/components/picker-column-option/test/a11y/picker-column-option.e2e.ts
@@ -10,7 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
    test('should not have accessibility violations', async ({ page }) => {
      await page.goto(`/src/components/picker-column-option/test/a11y`, config);

-      const results = await new AxeBuilder({ page }).analyze();
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();

      expect(results.violations).toEqual([]);
    });
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/active-picker-column-option-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-active-picker-column-option-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/disabled-picker-column-option-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/picker-column-option/test/basic/picker-column-option.e2e.ts-snapshots/picker-column-option-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/picker-column-option/test/picker-column-option.spec.ts
+++ b/core/src/components/picker-column-option/test/picker-column-option.spec.ts
@@ -3,7 +3,7 @@ import { newSpecPage } from '@stencil/core/testing';
 import { PickerColumnOption } from '../picker-column-option';

 describe('picker column option', () => {
-  it('button should be enabled by default', async () => {
+  it('should be enabled by default', async () => {
    const page = await newSpecPage({
      components: [PickerColumnOption],
      html: `
@@ -12,12 +12,11 @@ describe('picker column option', () => {
    });

    const option = page.body.querySelector('ion-picker-column-option')!;
-    const button = option.shadowRoot!.querySelector('button')!;

-    await expect(button.hasAttribute('disabled')).toEqual(false);
+    await expect(option.classList.contains('option-disabled')).toEqual(false);
  });

-  it('button should be disabled if specified', async () => {
+  it('should be disabled if specified', async () => {
    const page = await newSpecPage({
      components: [PickerColumnOption],
      html: `
@@ -26,8 +25,7 @@ describe('picker column option', () => {
    });

    const option = page.body.querySelector('ion-picker-column-option')!;
-    const button = option.shadowRoot!.querySelector('button')!;

-    await expect(button.hasAttribute('disabled')).toEqual(true);
+    await expect(option.classList.contains('option-disabled')).toEqual(true);
  });
 });
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -653,39 +653,6 @@ export class PickerColumn implements ComponentInterface {
    return el ? el.getAttribute('aria-label') ?? el.innerText : '';
  };

-  /**
-   * Render an element that overlays the column. This element is for assistive
-   * tech to allow users to navigate the column up/down. This element should receive
-   * focus as it listens for synthesized keyboard events as required by the
-   * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
-   */
-  private renderAssistiveFocusable = () => {
-    const { activeItem } = this;
-    const valueText = this.getOptionValueText(activeItem);
-
-    /**
-     * When using the picker, the valuetext provides important context that valuenow
-     * does not. Additionally, using non-zero valuemin/valuemax values can cause
-     * WebKit to incorrectly announce numeric valuetext values (such as a year
-     * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
-     */
-    return (
-      <div
-        ref={(el) => (this.assistiveFocusable = el)}
-        class="assistive-focusable"
-        role="slider"
-        tabindex={this.disabled ? undefined : 0}
-        aria-label={this.ariaLabel}
-        aria-valuemin={0}
-        aria-valuemax={0}
-        aria-valuenow={0}
-        aria-valuetext={valueText}
-        aria-orientation="vertical"
-        onKeyDown={(ev) => this.onKeyDown(ev)}
-      ></div>
-    );
-  };
-
  render() {
    const { color, disabled, isActive, numericInput } = this;
    const mode = getIonMode(this);
@@ -699,33 +666,21 @@ export class PickerColumn implements ComponentInterface {
          ['picker-column-disabled']: disabled,
        })}
      >
-        {this.renderAssistiveFocusable()}
        <slot name="prefix"></slot>
        <div
-          aria-hidden="true"
          class="picker-opts"
          ref={(el) => {
            this.scrollEl = el;
          }}
-          /**
-           * When an element has an overlay scroll style and
-           * a fixed height, Firefox will focus the scrollable
-           * container if the content exceeds the container's
-           * dimensions.
-           *
-           * This causes keyboard navigation to focus to this
-           * element instead of going to the next element in
-           * the tab order.
-           *
-           * The desired behavior is for the user to be able to
-           * focus the assistive focusable element and tab to
-           * the next element in the tab order. Instead of tabbing
-           * to this element.
-           *
-           * To prevent this, we set the tabIndex to -1. This
-           * will match the behavior of the other browsers.
-           */
-          tabIndex={-1}
+          role="slider"
+          tabindex={this.disabled ? undefined : 0}
+          aria-label={this.ariaLabel}
+          aria-valuemin={0}
+          aria-valuemax={0}
+          aria-valuenow={0}
+          aria-valuetext={this.getOptionValueText(this.activeItem)}
+          aria-orientation="vertical"
+          onKeyDown={(ev) => this.onKeyDown(ev)}
        >
          <div class="picker-item-empty" aria-hidden="true">
            &nbsp;
--- a/core/src/components/picker-column/test/picker-column.spec.tsx
+++ b/core/src/components/picker-column/test/picker-column.spec.tsx
@@ -1,10 +1,10 @@
 import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';

-import { PickerColumn } from '../picker-column';
 import { PickerColumnOption } from '../../picker-column-option/picker-column-option';
+import { PickerColumn } from '../picker-column';

-describe('picker-column: assistive element', () => {
+describe('picker-column', () => {
  beforeEach(() => {
    const mockIntersectionObserver = jest.fn();
    mockIntersectionObserver.mockReturnValue({
@@ -22,9 +22,9 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

-    expect(assistiveFocusable.getAttribute('aria-label')).not.toBe(null);
+    expect(pickerOpts.getAttribute('aria-label')).not.toBe(null);
  });

  it('should have a custom label', async () => {
@@ -34,9 +34,9 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

-    expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
+    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
  });

  it('should update a custom label', async () => {
@@ -46,12 +46,12 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

    pickerCol.setAttribute('aria-label', 'my label');
    await page.waitForChanges();

-    expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
+    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
  });

  it('should receive keyboard focus when enabled', async () => {
@@ -61,9 +61,9 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;

-    expect(assistiveFocusable.tabIndex).toBe(0);
+    expect(pickerOpts.tabIndex).toBe(0);
  });

  it('should not receive keyboard focus when disabled', async () => {
@@ -73,9 +73,9 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;

-    expect(assistiveFocusable.tabIndex).toBe(-1);
+    expect(pickerOpts.tabIndex).toBe(-1);
  });

  it('should use option aria-label as assistive element aria-valuetext', async () => {
@@ -91,9 +91,9 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

-    expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Label');
+    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Label');
  });

  it('should use option text as assistive element aria-valuetext when no label provided', async () => {
@@ -107,8 +107,8 @@ describe('picker-column: assistive element', () => {
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

-    expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Text');
+    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Text');
  });
 });
--- a/core/src/components/picker/test/a11y/picker.e2e.ts
+++ b/core/src/components/picker/test/a11y/picker.e2e.ts
@@ -7,7 +7,7 @@ configs().forEach(({ title, config }) => {
    test('should not have accessibility violations', async ({ page }) => {
      await page.goto(`/src/components/picker/test/a11y`, config);

-      const results = await new AxeBuilder({ page }).analyze();
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();

      expect(results.violations).toEqual([]);
    });
--- a/core/src/components/picker/test/basic/index.html
+++ b/core/src/components/picker/test/basic/index.html
@@ -177,6 +177,10 @@
        'onion'
      );

+      const columnDualNumericFirst = document.querySelector('ion-picker-column#dual-numeric-first');
+      columnDualNumericFirst.addEventListener('ionChange', (ev) => {
+        console.log('Column change', ev.detail);
+      });
      setPickerColumn(
        '#dual-numeric-first',
        [
@@ -195,6 +199,10 @@
        ],
        3
      );
+      const columnDualNumericSecond = document.querySelector('ion-picker-column#dual-numeric-second');
+      columnDualNumericSecond.addEventListener('ionChange', (ev) => {
+        console.log('Column change', ev.detail);
+      });
      setPickerColumn('#dual-numeric-second', minutes, 3);

      setPickerColumn(
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -106,32 +106,43 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
    });

    test('tabbing should correctly move focus between columns', async ({ page }) => {
-      const firstColumn = page.locator('ion-picker-column#first');
-      const secondColumn = page.locator('ion-picker-column#second');
+      const firstColumn = await page.evaluate(() => document.querySelector('ion-picker-column#first'));
+      const secondColumn = await page.evaluate(() => document.querySelector('ion-picker-column#second'));

      // Focus first column
      await page.keyboard.press('Tab');
-      await expect(firstColumn).toBeFocused();
+
+      let activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(firstColumn);

      await page.waitForChanges();

      // Focus second column
      await page.keyboard.press('Tab');
-      await expect(secondColumn).toBeFocused();
+
+      activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(secondColumn);
    });

    test('tabbing should correctly move focus back', async ({ page }) => {
-      const firstColumn = page.locator('ion-picker-column#first');
-      const secondColumn = page.locator('ion-picker-column#second');
+      const firstColumn = await page.evaluate(() => document.querySelector('ion-picker-column#first'));
+      const secondColumn = await page.evaluate(() => document.querySelector('ion-picker-column#second'));

-      await secondColumn.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
-      await expect(secondColumn).toBeFocused();
+      await page.evaluate((selector) => {
+        const el = document.querySelector(selector) as HTMLElement | null;
+        el?.focus();
+      }, 'ion-picker-column#second');
+
+      let activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(secondColumn);

      await page.waitForChanges();

      // Focus first column
      await page.keyboard.press('Shift+Tab');
-      await expect(firstColumn).toBeFocused();
+
+      activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(firstColumn);
    });
  });
 });
--- a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-ios-ltr-Mobile-Chrome-linux.png
--- a/Show More
+++ b/Show More