test: migrate form control usages to modern syntax (#28897)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Several tests were still using the legacy form syntax.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrated tests in `core`, `angular`, and `vue` to use the modern form
syntax (`react` did not have form controls).

I opted not to migrate `item/test/highlight` and `item/test/counter`
because those tests are going to be removed in the future once the
deprecate item APIs are removed.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>

Author: 3 people

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

@@ -23,28 +23,22 @@ <h1>Accordion Group - a11y</h1>
 
             <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 @@ <h1>Accordion Group - a11y</h1>
 
             <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 @@ <h1>Accordion Group - a11y</h1>
 
             <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/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 @@ <h1>Item</h1>
       </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 @@ <h1>Item</h1>
       </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 @@ <h1>Item</h1>
       </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 @@ <h4>H4 Title Text</h4>
         </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"