v7.6.7

Bumps
[@capacitor/status-bar](https://github.com/ionic-team/capacitor-plugins)
from 5.0.6 to 5.0.7.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor-plugins/releases"><code>@​capacitor/status-bar</code>'s
releases</a>.</em></p>
<blockquote>
<h2><code>@​capacitor/status-bar</code><a
href="https://github.com/5"><code>@​5</code></a>.0.7</h2>
<h2><a
href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/status-bar@5.0.6...@capacitor/status-bar@5.0.7">5.0.7</a>
(2024-01-29)</h2>
<p><strong>Note:</strong> Version bump only for package
<code>@​capacitor/status-bar</code></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="d5483ce9f6"><code>d5483ce</code></a>
chore(release): publish [skip ci]</li>
<li><a
href="be9ff28e06"><code>be9ff28</code></a>
docs: fix addListener links (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/2012">#2012</a>)</li>
<li><a
href="d8540feeb6"><code>d8540fe</code></a>
fix(screen-orientation) Add ScreenOrientationLockType (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/2005">#2005</a>)</li>
<li><a
href="e2cdf3538b"><code>e2cdf35</code></a>
feat(browser): implement close() method for android</li>
<li><a
href="f9afbe9b03"><code>f9afbe9</code></a>
fix(filesystem): requestPermissions not resolving (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1991">#1991</a>)</li>
<li><a
href="c5aab483fe"><code>c5aab48</code></a>
chore(release): publish [skip ci]</li>
<li><a
href="77dc373b41"><code>77dc373</code></a>
fix(camera): reject promise on web input cancel event (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1964">#1964</a>)</li>
<li><a
href="bf7ec3306e"><code>bf7ec33</code></a>
feat(google-maps): Separate mapId for Google Maps Cloud IDs (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1943">#1943</a>)</li>
<li><a
href="3b520b8455"><code>3b520b8</code></a>
fix(keyboard): Change keyboard style during setStyle (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1935">#1935</a>)</li>
<li><a
href="e18f458533"><code>e18f458</code></a>
docs(screen-reader): Use stateChange event in example code (<a
href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1934">#1934</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/status-bar@5.0.6...@capacitor/status-bar@5.0.7">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@capacitor/status-bar&package-manager=npm_and_yarn&previous-version=5.0.6&new-version=5.0.7)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
 
 

core/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
 
 

core/api.txt

@@ -1362,8 +1362,8 @@ ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionTabsDidChange,TabsEventDetail,false
-ion-tabs,event,ionTabsWillChange,TabsEventDetail,false
+ion-tabs,event,ionTabsDidChange,{ tab: string; },false
+ion-tabs,event,ionTabsWillChange,{ tab: string; },false
 
 ion-text,shadow
 ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

core/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.6.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.6.6",
+      "version": "7.6.7",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.10.0",
+        "@stencil/core": "^4.12.0",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
@@ -17,8 +17,8 @@
         "@axe-core/playwright": "^4.8.4",
         "@capacitor/core": "^5.6.0",
         "@capacitor/haptics": "^5.0.6",
-        "@capacitor/keyboard": "^5.0.7",
-        "@capacitor/status-bar": "^5.0.6",
+        "@capacitor/keyboard": "^5.0.8",
+        "@capacitor/status-bar": "^5.0.7",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@playwright/test": "^1.39.0",
@@ -26,7 +26,7 @@
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.3",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.8",
+        "@stencil/sass": "^3.0.9",
         "@stencil/vue-output-target": "^0.8.7",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
@@ -652,18 +652,18 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
+      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
-      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
+      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
-      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
+      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -11340,16 +11340,16 @@
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
+      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
-      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
+      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
       "dev": true,
       "requires": {}
     },
@@ -12184,9 +12184,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
-      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -12196,9 +12196,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
+      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
       "dev": true,
       "requires": {}
     },

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.6.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.10.0",
+    "@stencil/core": "^4.12.0",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
@@ -39,8 +39,8 @@
     "@axe-core/playwright": "^4.8.4",
     "@capacitor/core": "^5.6.0",
     "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.7",
-    "@capacitor/status-bar": "^5.0.6",
+    "@capacitor/keyboard": "^5.0.8",
+    "@capacitor/status-bar": "^5.0.7",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.39.0",
@@ -48,7 +48,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.3",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.8",
+    "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",

core/src/components.d.ts

@@ -38,7 +38,6 @@ import { SegmentButtonLayout } from "./components/segment-button/segment-button-
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
-import { TabsEventDetail } from "./components/tabs/tabs-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -75,7 +74,6 @@ export { SegmentButtonLayout } from "./components/segment-button/segment-button-
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
-export { TabsEventDetail } from "./components/tabs/tabs-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -4505,8 +4503,8 @@ declare global {
     };
     interface HTMLIonTabsElementEventMap {
         "ionNavWillLoad": void;
-        "ionTabsWillChange": TabsEventDetail;
-        "ionTabsDidChange": TabsEventDetail;
+        "ionTabsWillChange": { tab: string };
+        "ionTabsDidChange": { tab: string };
     }
     interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7713,11 +7711,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the navigation has finished transitioning to a new component.
          */
-        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
+        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
         /**
           * Emitted when the navigation is about to transition to a new component.
          */
-        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
+        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
         "useRouter"?: boolean;
     }
     interface IonText {

core/src/components/accordion/test/a11y/index.html

@@ -23,28 +23,22 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Name</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Name" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Email</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Email" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Phone</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="Phone" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Extension</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Extension" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Country</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Country" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City/Province</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="City/Province" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -56,24 +50,19 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Address 1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -85,24 +74,19 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input id="address1" type="text"></ion-input>
+                <ion-input label="Address 1" id="address1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input lable="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>

core/src/components/action-sheet/action-sheet-interface.ts

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
   header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
   id?: string;

core/src/components/alert/alert-interface.ts

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
 
 export interface AlertButton {
   text: string;
-  role?: 'cancel' | 'destructive' | string;
+  role?: LiteralUnion<'cancel' | 'destructive', string>;
   cssClass?: string | string[];
   id?: string;
   htmlAttributes?: { [key: string]: any };

core/src/components/datetime-button/test/buttons/index.html

@@ -18,7 +18,7 @@
       </ion-header>
       <ion-content>
         <ion-item>
-          <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
           <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
             <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
             <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>

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

@@ -214,8 +214,7 @@
           <ion-popover class="options-popover" trigger="popover-trigger">
             <ion-list lines="none">
               <ion-item>
-                <ion-label>Dark Mode</ion-label>
-                <ion-checkbox slot="end"></ion-checkbox>
+                <ion-checkbox>Dark Mode</ion-checkbox>
               </ion-item>
               <ion-item detail="true" href="?ionic:mode=ios">
                 <ion-label>iOS Mode</ion-label>
@@ -225,23 +224,19 @@
               </ion-item>
 
               <ion-item>
-                <ion-label>Show Default Title</ion-label>
-                <ion-toggle id="titleToggle"></ion-toggle>
+                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-label>Show Default Buttons</ion-label>
-                <ion-toggle id="buttonsToggle"></ion-toggle>
+                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-label>Locale</ion-label>
-                <ion-input placeholder="default" id="locale"></ion-input>
+                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
               </ion-item>
 
               <ion-item>
-                <ion-label>Color</ion-label>
-                <ion-select id="color" value="primary">
+                <ion-select label="Color" id="color" value="primary">
                   <ion-select-option value="primary">Primary</ion-select-option>
                   <ion-select-option value="secondary">Secondary</ion-select-option>
                   <ion-select-option value="tertiary">Tertiary</ion-select-option>

core/src/components/item/test/a11y/index.html

@@ -16,23 +16,19 @@
       <h1>Item</h1>
 
       <ion-item>
-        <ion-label>Item with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Input disabled</ion-label>
-        <ion-input placeholder="Placeholder" disabled></ion-input>
+        <ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label position="floating">Item with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item with Select" label-placement="floating">
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -44,8 +40,7 @@
       </ion-item>
 
       <ion-item disabled>
-        <ion-label position="floating">Item disabled with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item disabled with Select" label-placement="floating">
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -57,8 +52,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-label position="floating">Item with Select disabled</ion-label>
-        <ion-select disabled>
+        <ion-select label="Item with Select disabled" label-placement="floating" disabled>
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -70,33 +64,27 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item with Toggle</ion-toggle>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item disabled with Toggle</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Toggle disabled</ion-label>
-        <ion-toggle slot="end" disabled></ion-toggle>
+        <ion-toggle disabled>Item with Toggle disabled</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item with Radio</ion-radio>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item disabled with Radio</ion-radio>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Radio disabled</ion-label>
-        <ion-radio slot="start" value="biff" disabled></ion-radio>
+        <ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
       </ion-item>
     </main>
   </body>

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

@@ -98,8 +98,9 @@
         </ion-item>
 
         <ion-item class="overflow-visible">
-          <ion-label position="fixed">PIN:</ion-label>
           <ion-input
+            label="PIN:"
+            label-placement="fixed"
             type="number"
             pattern="[0-9]*"
             inputmode="numeric"

core/src/components/item/test/bottom/index.html

@@ -31,32 +31,27 @@
       <ion-content class="ion-padding-vertical">
         <ion-list class="basic">
           <ion-item>
-            <ion-label>No Helper/Error</ion-label>
-            <ion-input name="input" id="text"></ion-input>
+            <ion-input label="No Helper/Error" name="input" id="text"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-label>Helper and Error</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Helper and Error"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Helper Only</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Helper Only"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Error Only</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Error Only"></ion-input>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item class="custom">
-            <ion-label>Both w/ Custom CSS</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Both w/ Custom CSS"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
@@ -66,16 +61,14 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid">
-                <ion-label>Helper and Error (Fill Solid)</ion-label>
-                <ion-input></ion-input>
+                <ion-input label="Helper and Error (Fill Solid)"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline">
-                <ion-label>Helper and Error (Fill Outline)</ion-label>
-                <ion-input></ion-input>
+                <ion-input label="Helper and Error (Fill Outline)"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -84,8 +77,7 @@
           <ion-row>
             <ion-col>
               <ion-item>
-                <ion-label>Toggle Error</ion-label>
-                <ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
+                <ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
               </ion-item>
             </ion-col>
           </ion-row>

core/src/components/item/test/inputs/index.html

@@ -39,18 +39,6 @@
               <ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
                 <ion-label>Set "undefined" values</ion-label>
               </ion-item>
-              <ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
-                <ion-label>Labels: Default</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
-                <ion-label>Labels: Floating</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
-                <ion-label>Labels: Stacked</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
-                <ion-label>Labels: Fixed</ion-label>
-              </ion-item>
             </ion-list>
           </ion-popover>
         </ion-toolbar>
@@ -60,28 +48,23 @@
         <form onsubmit="return onSubmit(event)">
           <ion-list>
             <ion-item>
-              <ion-label>Input</ion-label>
-              <ion-input name="input" id="input" placeholder="Input"></ion-input>
+              <ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
             </ion-item>
 
             <ion-item>
-              <ion-label>Textarea</ion-label>
-              <ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
+              <ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
             </ion-item>
 
             <ion-item>
-              <ion-label>Toggle</ion-label>
-              <ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
+              <ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
             </ion-item>
 
             <ion-item>
-              <ion-label>Checkbox</ion-label>
-              <ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
+              <ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
             </ion-item>
 
             <ion-item>
-              <ion-label>Select</ion-label>
-              <ion-select name="select" id="select" placeholder="Select">
+              <ion-select label="Select" name="select" id="select" placeholder="Select">
                 <ion-select-option value="1">1</ion-select-option>
                 <ion-select-option value="2">2</ion-select-option>
                 <ion-select-option value="3">3</ion-select-option>
@@ -93,8 +76,7 @@
             </ion-item>
 
             <ion-item>
-              <ion-label>Range</ion-label>
-              <ion-range name="range" id="range" value="10"></ion-range>
+              <ion-range label="Range" name="range" id="range" value="10"></ion-range>
             </ion-item>
           </ion-list>
 
@@ -147,28 +129,6 @@
         toggle.checked = checkbox.checked = false;
       }
 
-      function setLabelDefault() {
-        setLabelPosition(undefined);
-      }
-
-      function setLabelFixed() {
-        setLabelPosition('fixed');
-      }
-
-      function setLabelFloating() {
-        setLabelPosition('floating');
-      }
-
-      function setLabelStacked() {
-        setLabelPosition('stacked');
-      }
-
-      function setLabelPosition(position) {
-        Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
-          (label) => (label.position = position)
-        );
-      }
-
       function getFormControls() {
         return formControlIds.reduce((acc, id) => {
           acc[id] = document.querySelector(`#${id}`);

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

@@ -41,58 +41,45 @@
         <ion-list>
           <ion-item>
             <ion-label>Default</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label color="tertiary">Tertiary</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="custom">Custom</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="fixed">Fixed</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="floating">Floating</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color">
             <ion-label position="floating" color="success">Floating: Success</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Stacked</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color">
             <ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
-            <ion-input></ion-input>
           </ion-item>
         </ion-list>
 
         <ion-list>
           <ion-item color="tertiary">
             <ion-label position="floating">(Item: Tertiary) Floating</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item color="primary">
             <ion-label position="stacked">(Item: Primary) Stacked</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color" color="tertiary">
             <ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color" color="primary">
             <ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
-            <ion-input></ion-input>
           </ion-item>
         </ion-list>
       </ion-content>

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

@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="stacked">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `,
         config
@@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="floating">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `,
         config

core/src/components/modal/test/sheet/index.html

@@ -85,10 +85,7 @@
         </ion-header>
 
         <ion-content class="ion-padding">
-          <ion-item>
-            <ion-label>Input outside modal</ion-label>
-            <ion-input id="root-input" legacy="true"></ion-input>
-          </ion-item>
+          <input id="root-input" />
 
           <ion-button id="sheet-modal" onclick="presentModal()">Present Sheet Modal</ion-button>
           <ion-button

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionModalDidPresent.next();
 
-      const input = page.locator('#root-input input').first();
+      const input = page.locator('#root-input').first();
       await input.click();
       await expect(input).toBeFocused();
     });

core/src/components/modal/test/spec/index.html

@@ -60,8 +60,7 @@
 
         <ion-content>
           <ion-item>
-            <ion-label>Use Custom Animation</ion-label>
-            <ion-toggle></ion-toggle>
+            <ion-toggle>Use Custom Animation</ion-toggle>
           </ion-item>
 
           <ion-list id="list"></ion-list>

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

@@ -212,7 +212,7 @@
           connectedCallback() {
             this.innerHTML = `
           <ion-content>
-            <ion-textarea rows="4" style="max-height: 44px; overflow-y: auto;" value="the cursor in this <ion-textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys"></ion-textarea>
+            <ion-textarea aria-label="textarea" rows="4" style="max-height: 44px; overflow-y: auto;" value="the cursor in this <ion-textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys"></ion-textarea>
             <textarea rows="4" style="display:block;width: 100%;border: 0;padding: 8px; max-height: 44px; overflow-y: auto">the cursor in this <textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys</textarea>
           </ion-content>
         `;

core/src/components/progress-bar/test/buffer/index.html

@@ -60,7 +60,7 @@
           <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
 
           <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
+            <ion-range aria-label="Buffer" pin="true" value="0" id="progressValueBuffer">
               <ion-label slot="start">0</ion-label>
               <ion-label slot="end">100</ion-label>
             </ion-range>

core/src/components/progress-bar/test/determinate/index.html

@@ -69,7 +69,7 @@
           <ion-progress-bar id="progressBar"></ion-progress-bar>
 
           <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValue">
+            <ion-range aria-label="Buffer" pin="true" value="0" id="progressValue">
               <ion-label slot="start">0</ion-label>
               <ion-label slot="end">100</ion-label>
             </ion-range>

core/src/components/radio-group/test/radio-group-events.e2e.ts

@@ -7,9 +7,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
       <ion-radio-group value="1">
-        <ion-radio value="1"></ion-radio>
-        <ion-radio value="2"></ion-radio>
-        <ion-radio value="3"></ion-radio>
+        <ion-radio value="1" aria-label="1"></ion-radio>
+        <ion-radio value="2" aria-label="2"></ion-radio>
+        <ion-radio value="3" aria-label="3"></ion-radio>
       </ion-radio-group>
     `,
         config
@@ -29,9 +29,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
       <ion-radio-group>
-        <ion-radio value="1"></ion-radio>
-        <ion-radio value="2"></ion-radio>
-        <ion-radio value="3"></ion-radio>
+        <ion-radio value="1" aria-label="1"></ion-radio>
+        <ion-radio value="2" aria-label="2"></ion-radio>
+        <ion-radio value="3" aria-label="3"></ion-radio>
       </ion-radio-group>
     `,
         config
@@ -51,9 +51,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
       <ion-radio-group value="1">
-        <ion-radio value="1"></ion-radio>
-        <ion-radio value="2"></ion-radio>
-        <ion-radio value="3"></ion-radio>
+        <ion-radio value="1" aria-label="1"></ion-radio>
+        <ion-radio value="2" aria-label="2"></ion-radio>
+        <ion-radio value="3" aria-label="3"></ion-radio>
       </ion-radio-group>
     `,
         config
@@ -72,9 +72,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-radio-group value="1">
-          <ion-radio value="1"></ion-radio>
-          <ion-radio value="2"></ion-radio>
-          <ion-radio value="3"></ion-radio>
+          <ion-radio value="1" aria-label="1"></ion-radio>
+          <ion-radio value="2" aria-label="2"></ion-radio>
+          <ion-radio value="3" aria-label="3"></ion-radio>
         </ion-radio-group>
       `,
         config
@@ -94,9 +94,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
         <ion-radio-group allow-empty-selection="true" value="1">
-          <ion-radio value="1"></ion-radio>
-          <ion-radio value="2"></ion-radio>
-          <ion-radio value="3"></ion-radio>
+          <ion-radio value="1" aria-label="1"></ion-radio>
+          <ion-radio value="2" aria-label="2"></ion-radio>
+          <ion-radio value="3" aria-label="3"></ion-radio>
         </ion-radio-group>
       `,
           config

core/src/components/range/test/label/range.e2e.ts

@@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a range with no visible label', async ({ page }) => {
         await page.setContent(
           `
-          <ion-range legacy="true"></ion-range>
+          <ion-range style="padding-inline-start: 20px;" aria-label="Range"></ion-range>
         `,
           config
         );
@@ -80,7 +80,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a range with no visible label', async ({ page }) => {
         await page.setContent(
           `
-          <ion-range legacy="true">
+          <ion-range aria-label="Range">
             <ion-icon name="volume-off" slot="start"></ion-icon>
             <ion-icon name="volume-high" slot="end"></ion-icon>
           </ion-range>