fix(radio-group): remove wrapper causing Node.removeChild errors

.github/ionic-issue-bot.yml

@@ -56,6 +56,14 @@ closeAndLock:
         bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com) for questions about the framework.
 
 
+        Thank you for using Ionic!
+    - label: "ionitron: appflow"
+      message: >
+        Thanks for the issue! This issue appears to be related to Ionic Appflow. We use this issue tracker exclusively for
+        bug reports and feature requests. Please use the [Ionic Appflow Support Forum](https://ionic.zendesk.com/hc/en-us/requests/new)
+        to report this issue.
+
+
         Thank you for using Ionic!
     - label: "ionitron: missing template"
       message: >
@@ -137,6 +145,65 @@ noReproduction:
   lock: true
   dryRun: false
 
+wrongRepo:
+  repos:
+    - label: "ionitron: capacitor"
+      repo: capacitor
+      message: >
+        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
+        associated with the Ionic Framework. It appears that this issue is associated with Capacitor.
+        I am moving this issue to the Capacitor repository. Please track this issue over there.
+
+
+        Thank you for using Ionic!
+    - label: "ionitron: v3"
+      repo: ionic-v3
+      message: >
+        Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository.
+        I am moving this issue to the repository for Ionic 3. Please track this issue over there.
+
+
+        Thank you for using Ionic!
+    - label: "ionitron: cli"
+      repo: ionic-cli
+      message: >
+        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
+        associated with the Ionic Framework. It appears that this issue is associated with the Ionic CLI.
+        I am moving this issue to the Ionic CLI repository. Please track this issue over there.
+
+
+        Thank you for using Ionic!
+    - label: "ionitron: docs"
+      repo: ionic-docs
+      message: >
+        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
+        associated with the Ionic Framework. It appears that this issue is associated with the Ionic Documentation.
+        I am moving this issue to the Ionic Docs repository. Please track this issue over there.
+
+
+        Thank you for using Ionic!
+    - label: "ionitron: stencil"
+      repo: stencil
+      message: >
+        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
+        associated with the Ionic Framework. It appears that this issue is associated with Stencil.
+        I am moving this issue to the Stencil repository. Please track this issue over there.
+
+
+        Thank you for using Ionic!
+    - label: "ionitron: native"
+      repo: ionic-native
+      message: >
+        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
+        associated with the Ionic Framework. It appears that this issue is associated with Ionic Native.
+        I am moving this issue to the Ionic Native repository. Please track this issue over there.
+
+
+        Thank you for using Ionic!
+  close: true
+  lock: true
+  dryRun: false
+
 screenshot:
   appId: 18001
   checkName: "build"

.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@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/build-angular/action.yml

@@ -3,7 +3,7 @@ description: 'Build Ionic Angular'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.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@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
 

.github/workflows/actions/build-core/action.yml

@@ -9,7 +9,7 @@ runs:
   using: 'composite'
   steps:
     - uses: actions/checkout@v5
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - name: Install Dependencies

.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@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/build-react/action.yml

@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.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@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/build-vue/action.yml

@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/publish-npm/action.yml

@@ -19,7 +19,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     # Provenance requires npm 9.5.0+

.github/workflows/actions/test-angular-e2e/action.yml

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.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@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
 

.github/workflows/actions/test-core-lint/action.yml

@@ -3,7 +3,7 @@ description: 'Test Core Lint'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - name: Install Dependencies

.github/workflows/actions/test-core-screenshot/action.yml

@@ -13,7 +13,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/test-core-spec/action.yml

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - name: Install Dependencies

.github/workflows/actions/test-react-e2e/action.yml

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/test-vue-e2e/action.yml

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -7,7 +7,7 @@ on:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: 22.x
     - uses: actions/download-artifact@v5

.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, thetaPC, ShaneK
+          assignees: brandyscarney, ShaneK
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/label.yml

@@ -13,7 +13,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v6
+    - uses: actions/labeler@v5
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true

CHANGELOG.md

@@ -3,43 +3,6 @@
 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)
-
-
-### Bug Fixes
-
-* **checkbox:** add aria attributes to ignore checkbox icon ([#30633](https://github.com/ionic-team/ionic-framework/issues/30633)) ([e9e6605](https://github.com/ionic-team/ionic-framework/commit/e9e6605862a05a46d26c26a144ed1cf22133a2b7)), closes [#30231](https://github.com/ionic-team/ionic-framework/issues/30231)
-* **refresher:** prevent focus-related scroll jumps on refresh ([#30636](https://github.com/ionic-team/ionic-framework/issues/30636)) ([1899b49](https://github.com/ionic-team/ionic-framework/commit/1899b49d252abc6003f763cea8db2a51efa941ec))
-
-
-
-
-
 ## [8.7.2](https://github.com/ionic-team/ionic-framework/compare/v8.7.1...v8.7.2) (2025-08-06)
 
 

core/CHANGELOG.md

@@ -3,42 +3,6 @@
 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)
-
-
-### Bug Fixes
-
-* **checkbox:** add aria attributes to ignore checkbox icon ([#30633](https://github.com/ionic-team/ionic-framework/issues/30633)) ([e9e6605](https://github.com/ionic-team/ionic-framework/commit/e9e6605862a05a46d26c26a144ed1cf22133a2b7)), closes [#30231](https://github.com/ionic-team/ionic-framework/issues/30231)
-* **refresher:** prevent focus-related scroll jumps on refresh ([#30636](https://github.com/ionic-team/ionic-framework/issues/30636)) ([1899b49](https://github.com/ionic-team/ionic-framework/commit/1899b49d252abc6003f763cea8db2a51efa941ec))
-
-
-
-
-
 ## [8.7.2](https://github.com/ionic-team/ionic-framework/compare/v8.7.1...v8.7.2) (2025-08-06)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.55.1
+FROM mcr.microsoft.com/playwright:v1.54.2
 
 # Set the working directory
 WORKDIR /ionic

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.5",
+  "version": "8.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.7.5",
+      "version": "8.7.2",
       "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.55.1",
+        "@playwright/test": "^1.54.2",
         "@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.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.3.tgz",
-      "integrity": "sha512-wCWr8fQ9Wxn0466vPg7nMn0tivbNVjNy1yL4GvDSIZuZx7UpU2HeVGNe9QjN/quEd+YLRFeKEBLBw619VqUiNg==",
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.2.tgz",
+      "integrity": "sha512-akCf9A1FUR8AWTtmgGjHEq6LmGsjA2U7igaJ9PxiCBfyxKqlDbuGHrlNdpvHEjV5tUPH3KYtkze6gtFcNKPU9A==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -681,18 +681,18 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.3.tgz",
-      "integrity": "sha512-BIBKjmky5rOYNhvYhNeDi0MMvjwYZ6YF9JoCYcGKvKY+XLJKtezsEL78XfOlgWZBkbfR8uq3tzktY6PqgoYLKA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.2.tgz",
+      "integrity": "sha512-9We5BY1mu+QWOReDukr+6HxA4Bh0mKBU0txFtwXJdjBohttMYWJzB+dQf4oHrX8odiU2Cm/BfDdAU2wV06Cyig==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": ">=7.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "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==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.2.tgz",
+      "integrity": "sha512-fYYkkdzCbQV+MjZVnaQTFl5I4bddnFW8ZrPVxDjNoGVPTUG7H58Ij1+NcuNxHLXjJvZOoZeYJ3w3I16Wb2zssw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": ">=7.0.0"
@@ -1715,12 +1715,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz",
-      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
+      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.55.1"
+        "playwright": "1.54.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3474,9 +3474,9 @@
       ]
     },
     "node_modules/chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
+      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
       "dev": true,
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -8593,12 +8593,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
-      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
+      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.55.1"
+        "playwright-core": "1.54.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8611,9 +8611,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
-      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
+      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -11102,9 +11102,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.3.tgz",
-      "integrity": "sha512-wCWr8fQ9Wxn0466vPg7nMn0tivbNVjNy1yL4GvDSIZuZx7UpU2HeVGNe9QjN/quEd+YLRFeKEBLBw619VqUiNg==",
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.2.tgz",
+      "integrity": "sha512-akCf9A1FUR8AWTtmgGjHEq6LmGsjA2U7igaJ9PxiCBfyxKqlDbuGHrlNdpvHEjV5tUPH3KYtkze6gtFcNKPU9A==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11118,16 +11118,16 @@
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.3.tgz",
-      "integrity": "sha512-BIBKjmky5rOYNhvYhNeDi0MMvjwYZ6YF9JoCYcGKvKY+XLJKtezsEL78XfOlgWZBkbfR8uq3tzktY6PqgoYLKA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.2.tgz",
+      "integrity": "sha512-9We5BY1mu+QWOReDukr+6HxA4Bh0mKBU0txFtwXJdjBohttMYWJzB+dQf4oHrX8odiU2Cm/BfDdAU2wV06Cyig==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "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==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.2.tgz",
+      "integrity": "sha512-fYYkkdzCbQV+MjZVnaQTFl5I4bddnFW8ZrPVxDjNoGVPTUG7H58Ij1+NcuNxHLXjJvZOoZeYJ3w3I16Wb2zssw==",
       "dev": true,
       "requires": {}
     },
@@ -11863,12 +11863,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz",
-      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
+      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
       "dev": true,
       "requires": {
-        "playwright": "1.55.1"
+        "playwright": "1.54.2"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -13076,9 +13076,9 @@
       "dev": true
     },
     "chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
+      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
       "dev": true
     },
     "chalk-template": {
@@ -16812,19 +16812,19 @@
       }
     },
     "playwright": {
-      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
-      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
+      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.55.1"
+        "playwright-core": "1.54.2"
       }
     },
     "playwright-core": {
-      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
-      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
+      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.5",
+  "version": "8.7.2",
   "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.55.1",
+    "@playwright/test": "^1.54.2",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",

core/src/components/datetime/datetime.tsx

@@ -3,7 +3,6 @@ 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';
@@ -1599,7 +1598,7 @@ export class Datetime implements ComponentInterface {
       forcePresentation === 'time-date'
         ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
         : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-    return <ion-picker class={FOCUS_TRAP_DISABLE_CLASS}>{renderArray}</ion-picker>;
+    return <ion-picker>{renderArray}</ion-picker>;
   }
 
   private renderDatePickerColumns(forcePresentation: string) {

core/src/components/input/input.tsx

@@ -79,15 +79,8 @@ 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"`.
@@ -403,16 +396,6 @@ 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;
 
@@ -423,26 +406,6 @@ 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(
@@ -488,12 +451,6 @@ 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;
-    }
   }
 
   /**
@@ -669,22 +626,22 @@ export class Input implements ComponentInterface {
    * Renders the helper text or error text values
    */
   private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+    const { helperText, errorText, helperTextId, errorTextId } = this;
 
     return [
-      <div id={helperTextId} class="helper-text" aria-live="polite">
-        {!isInvalid ? helperText : null}
+      <div id={helperTextId} class="helper-text">
+        {helperText}
       </div>,
-      <div id={errorTextId} class="error-text" role="alert">
-        {isInvalid ? errorText : null}
+      <div id={errorTextId} class="error-text">
+        {errorText}
       </div>,
     ];
   }
 
   private getHintTextID(): string | undefined {
-    const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
+    const { el, helperText, errorText, helperTextId, errorTextId } = this;
 
-    if (isInvalid && errorText) {
+    if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
       return errorTextId;
     }
 
@@ -907,7 +864,7 @@ export class Input implements ComponentInterface {
               onCompositionstart={this.onCompositionStart}
               onCompositionend={this.onCompositionEnd}
               aria-describedby={this.getHintTextID()}
-              aria-invalid={this.isInvalid ? 'true' : undefined}
+              aria-invalid={this.getHintTextID() === this.errorTextId}
               {...this.inheritedAttributes}
             />
             {this.clearInput && !readonly && !disabled && (

core/src/components/input/test/validation/index.html

@@ -1,284 +0,0 @@
-<!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>

core/src/components/menu/menu.tsx

@@ -418,9 +418,6 @@ 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);
   }
 

core/src/components/modal/gestures/sheet.ts

@@ -95,16 +95,6 @@ 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');
 
@@ -245,12 +235,7 @@ export const createSheetGesture = (
      * ion-backdrop and .modal-wrapper always have pointer-events: auto
      * applied, so the modal content can still be interacted with.
      */
-    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;
+    const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
     if (shouldEnableBackdrop) {
       enableBackdrop();
     } else {
@@ -597,16 +582,7 @@ export const createSheetGesture = (
                    * Backdrop should become enabled
                    * after the backdropBreakpoint value
                    */
-                  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;
+                  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
                   if (shouldEnableBackdrop) {
                     enableBackdrop();
                   } else {

core/src/components/modal/modal.tsx

@@ -1237,7 +1237,6 @@ 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
@@ -1254,7 +1253,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 || focusTrapAttr === 'false',
+          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
           ...getClassMap(this.cssClass),
         }}
         onIonBackdropTap={this.onBackdropTap}

core/src/components/modal/test/basic/modal.spec.tsx

@@ -28,18 +28,6 @@ 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],

core/src/components/picker-column-option/picker-column-option.scss

@@ -3,7 +3,7 @@
 // Picker Column
 // --------------------------------------------------
 
-.picker-column-option-button {
+button {
   @include padding(0);
   @include margin(0);
 
@@ -40,6 +40,6 @@
   opacity: 0.4;
 }
 
-:host(.option-disabled) .picker-column-option-button {
+:host(.option-disabled) button {
   cursor: default;
 }

core/src/components/picker-column-option/picker-column-option.tsx

@@ -124,9 +124,9 @@ export class PickerColumnOption implements ComponentInterface {
           ['option-disabled']: disabled,
         })}
       >
-        <div class={'picker-column-option-button'} role="button" aria-label={ariaLabel} onClick={() => this.onClick()}>
+        <button tabindex="-1" aria-label={ariaLabel} disabled={disabled} onClick={() => this.onClick()}>
           <slot></slot>
-        </div>
+        </button>
       </Host>
     );
   }

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 }).disableRules('color-contrast').analyze();
+      const results = await new AxeBuilder({ page }).analyze();
 
       expect(results.violations).toEqual([]);
     });

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('should be enabled by default', async () => {
+  it('button should be enabled by default', async () => {
     const page = await newSpecPage({
       components: [PickerColumnOption],
       html: `
@@ -12,11 +12,12 @@ describe('picker column option', () => {
     });
 
     const option = page.body.querySelector('ion-picker-column-option')!;
+    const button = option.shadowRoot!.querySelector('button')!;
 
-    await expect(option.classList.contains('option-disabled')).toEqual(false);
+    await expect(button.hasAttribute('disabled')).toEqual(false);
   });
 
-  it('should be disabled if specified', async () => {
+  it('button should be disabled if specified', async () => {
     const page = await newSpecPage({
       components: [PickerColumnOption],
       html: `
@@ -25,7 +26,8 @@ describe('picker column option', () => {
     });
 
     const option = page.body.querySelector('ion-picker-column-option')!;
+    const button = option.shadowRoot!.querySelector('button')!;
 
-    await expect(option.classList.contains('option-disabled')).toEqual(true);
+    await expect(button.hasAttribute('disabled')).toEqual(true);
   });
 });

core/src/components/picker-column/picker-column.tsx

@@ -653,6 +653,39 @@ 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);
@@ -666,21 +699,33 @@ 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;
           }}
-          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)}
+          /**
+           * 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}
         >
           <div class="picker-item-empty" aria-hidden="true">
             &nbsp;

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 { PickerColumnOption } from '../../picker-column-option/picker-column-option';
 import { PickerColumn } from '../picker-column';
+import { PickerColumnOption } from '../../picker-column-option/picker-column-option';
 
-describe('picker-column', () => {
+describe('picker-column: assistive element', () => {
   beforeEach(() => {
     const mockIntersectionObserver = jest.fn();
     mockIntersectionObserver.mockReturnValue({
@@ -22,9 +22,9 @@ describe('picker-column', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
 
-    expect(pickerOpts.getAttribute('aria-label')).not.toBe(null);
+    expect(assistiveFocusable.getAttribute('aria-label')).not.toBe(null);
   });
 
   it('should have a custom label', async () => {
@@ -34,9 +34,9 @@ describe('picker-column', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
 
-    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
+    expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
   });
 
   it('should update a custom label', async () => {
@@ -46,12 +46,12 @@ describe('picker-column', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
 
     pickerCol.setAttribute('aria-label', 'my label');
     await page.waitForChanges();
 
-    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
+    expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
   });
 
   it('should receive keyboard focus when enabled', async () => {
@@ -61,9 +61,9 @@ describe('picker-column', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
 
-    expect(pickerOpts.tabIndex).toBe(0);
+    expect(assistiveFocusable.tabIndex).toBe(0);
   });
 
   it('should not receive keyboard focus when disabled', async () => {
@@ -73,9 +73,9 @@ describe('picker-column', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
 
-    expect(pickerOpts.tabIndex).toBe(-1);
+    expect(assistiveFocusable.tabIndex).toBe(-1);
   });
 
   it('should use option aria-label as assistive element aria-valuetext', async () => {
@@ -91,9 +91,9 @@ describe('picker-column', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
 
-    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Label');
+    expect(assistiveFocusable.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', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
+    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
 
-    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Text');
+    expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Text');
   });
 });

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 }).disableRules('color-contrast').analyze();
+      const results = await new AxeBuilder({ page }).analyze();
 
       expect(results.violations).toEqual([]);
     });

core/src/components/picker/test/basic/index.html

@@ -177,10 +177,6 @@
         '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',
         [
@@ -199,10 +195,6 @@
         ],
         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(

core/src/components/picker/test/basic/picker.e2e.ts

@@ -106,43 +106,32 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('tabbing should correctly move focus between columns', async ({ page }) => {
-      const firstColumn = await page.evaluate(() => document.querySelector('ion-picker-column#first'));
-      const secondColumn = await page.evaluate(() => document.querySelector('ion-picker-column#second'));
+      const firstColumn = page.locator('ion-picker-column#first');
+      const secondColumn = page.locator('ion-picker-column#second');
 
       // Focus first column
       await page.keyboard.press('Tab');
-
-      let activeElement = await page.evaluate(() => document.activeElement);
-      expect(activeElement).toEqual(firstColumn);
+      await expect(firstColumn).toBeFocused();
 
       await page.waitForChanges();
 
       // Focus second column
       await page.keyboard.press('Tab');
-
-      activeElement = await page.evaluate(() => document.activeElement);
-      expect(activeElement).toEqual(secondColumn);
+      await expect(secondColumn).toBeFocused();
     });
 
     test('tabbing should correctly move focus back', async ({ page }) => {
-      const firstColumn = await page.evaluate(() => document.querySelector('ion-picker-column#first'));
-      const secondColumn = await page.evaluate(() => document.querySelector('ion-picker-column#second'));
+      const firstColumn = page.locator('ion-picker-column#first');
+      const secondColumn = page.locator('ion-picker-column#second');
 
-      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 secondColumn.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
+      await expect(secondColumn).toBeFocused();
 
       await page.waitForChanges();
 
       // Focus first column
       await page.keyboard.press('Shift+Tab');
-
-      activeElement = await page.evaluate(() => document.activeElement);
-      expect(activeElement).toEqual(firstColumn);
+      await expect(firstColumn).toBeFocused();
     });
   });
 });