feat(textarea): convert to a form associated shadow component (#30785)

Issue number: internal

---------

## What is the current behavior?
Textarea uses `scoped` encapsulation. This causes issues with CSP compatibility and is inconsistent with our goal of having all components use Shadow DOM.

## What is the new behavior?
- Converts `ion-textarea` to `shadow` with `formAssociated: true`
- Adds shadow parts for inner elements
- Adds and updates existing e2e tests in core for textarea
- Updated Angular test app to target textarea shadowRoot and updated lazy forms test to include textarea (standalone already has these)
- Updated React & Vue test apps to target textarea shadowRoot and added validation tests
- Improves focus behavior inside of a popover so that it is no longer required to tab twice to get to the textarea in any browser

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

BREAKING CHANGE:

Textarea has been converted to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

Author: brandyscarney

BREAKING.md

@@ -2426,7 +2426,7 @@ ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 ion-text,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
-ion-textarea,scoped
+ion-textarea,shadow
 ion-textarea,prop,autoGrow,boolean,false,false,true
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
@@ -2450,7 +2450,7 @@ ion-textarea,prop,mode,"ios" | "md",undefined,false,false
 ion-textarea,prop,name,string,this.inputId,false,false
 ion-textarea,prop,placeholder,string | undefined,undefined,false,false
 ion-textarea,prop,readonly,boolean,false,false,false
-ion-textarea,prop,required,boolean,false,false,false
+ion-textarea,prop,required,boolean,false,false,true
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
@@ -2518,6 +2518,15 @@ ion-textarea,css-prop,--placeholder-font-weight,md
 ion-textarea,css-prop,--placeholder-opacity,ionic
 ion-textarea,css-prop,--placeholder-opacity,ios
 ion-textarea,css-prop,--placeholder-opacity,md
+ion-textarea,part,bottom
+ion-textarea,part,container
+ion-textarea,part,counter
+ion-textarea,part,error-text
+ion-textarea,part,helper-text
+ion-textarea,part,label
+ion-textarea,part,native
+ion-textarea,part,supporting-text
+ion-textarea,part,wrapper
 
 ion-thumbnail,shadow
 ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false

core/api.txt

@@ -76,6 +76,20 @@
         >
           Popover With Textarea
         </button>
+        <button
+          id="popover-with-input"
+          class="expand"
+          onclick="presentPopover({ component: 'input-page', event: event, htmlAttributes: { 'data-testid': 'popover-with-input'} })"
+        >
+          Popover With Input
+        </button>
+        <button
+          id="popover-with-buttons"
+          class="expand"
+          onclick="presentPopover({ component: 'buttons-page', event: event, htmlAttributes: { 'data-testid': 'popover-with-buttons'} })"
+        >
+          Popover With Buttons
+        </button>
       </ion-content>
 
       <style>
@@ -225,6 +239,38 @@ <h1>Translucent Popover</h1>
         }
 
         customElements.define('textarea-page', TextAreaPage);
+
+        class InputPage extends HTMLElement {
+          constructor() {
+            super();
+          }
+
+          connectedCallback() {
+            this.innerHTML = `
+          <ion-content>
+            <ion-input aria-label="input" value="the cursor in this <ion-input> must be able to be moved with the arrow keys and home and end keys"></ion-input>
+            <input value="the cursor in this <input> must be able to be moved with the arrow keys and home and end keys"></input>
+          </ion-content>
+        `;
+          }
+        }
+        customElements.define('input-page', InputPage);
+
+        class ButtonsPage extends HTMLElement {
+          constructor() {
+            super();
+          }
+
+          connectedCallback() {
+            this.innerHTML = `
+          <ion-content>
+            <ion-button>Button 1</ion-button>
+            <ion-button>Button 2</ion-button>
+          </ion-content>
+        `;
+          }
+        }
+        customElements.define('buttons-page', ButtonsPage);
       </script>
     </ion-app>
   </body>

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

@@ -169,47 +169,45 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await popoverFixture.goto('/src/components/popover/test/basic', config);
     });
 
-    test('should focus the first ion-item on ArrowDown', async ({ page }) => {
+    test('should focus the first ion-item on ArrowDown', async ({ page, pageUtils }) => {
       const item0 = page.locator('ion-popover ion-item:nth-of-type(1)');
 
       await popoverFixture.open('#basic-popover');
 
-      await page.keyboard.press('ArrowDown');
+      await pageUtils.pressKeys('ArrowDown');
       await expect(item0).toBeFocused();
     });
 
-    test('should trap focus', async ({ page, browserName }) => {
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+    test('should trap focus', async ({ page, pageUtils }) => {
       const items = page.locator('ion-popover ion-item');
 
       await popoverFixture.open('#basic-popover');
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(items.nth(0)).toBeFocused();
 
-      await page.keyboard.press(`Shift+${tabKey}`);
+      await pageUtils.pressKeys('Shift+Tab');
       await expect(items.nth(3)).toBeFocused();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(items.nth(0)).toBeFocused();
 
-      await page.keyboard.press('ArrowDown');
+      await pageUtils.pressKeys('ArrowDown');
       await expect(items.nth(1)).toBeFocused();
 
-      await page.keyboard.press('ArrowDown');
+      await pageUtils.pressKeys('ArrowDown');
       await expect(items.nth(2)).toBeFocused();
 
-      await page.keyboard.press('Home');
+      await pageUtils.pressKeys('Home');
       await expect(items.nth(0)).toBeFocused();
 
-      await page.keyboard.press('End');
+      await pageUtils.pressKeys('End');
       await expect(items.nth(3)).toBeFocused();
     });
 
-    test('should not override keyboard interactions for textarea elements', async ({ page, browserName }) => {
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+    test('should not override keyboard interactions for textarea elements', async ({ page, pageUtils }) => {
       const popover = page.locator('ion-popover');
-      const innerNativeTextarea = page.locator('ion-textarea textarea').nth(0);
+      const innerNativeTextarea = page.locator('ion-textarea').locator('textarea').nth(0);
       const vanillaTextarea = page.locator('ion-textarea + textarea');
 
       await popoverFixture.open('#popover-with-textarea');
@@ -220,44 +218,100 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        */
       await expect(popover).toBeFocused();
 
-      await page.keyboard.press(tabKey);
-
-      // for Firefox, ion-textarea is focused first
-      // need to tab again to get to native input
-      if (browserName === 'firefox') {
-        await page.keyboard.press(tabKey);
-      }
-
+      // Tab should focus the native textarea inside ion-textarea
+      await pageUtils.pressKeys('Tab');
       await expect(innerNativeTextarea).toBeFocused();
 
-      await page.keyboard.press('ArrowDown');
-
+      // Arrow keys should work on the ion-textarea
+      await pageUtils.pressKeys('ArrowDown');
       await expect(innerNativeTextarea).toBeFocused();
 
-      await page.keyboard.press('ArrowUp');
-
+      await pageUtils.pressKeys('ArrowUp');
       await expect(innerNativeTextarea).toBeFocused();
 
-      await page.keyboard.press(tabKey);
-      // Checking within HTML textarea
-
+      // Tab again should focus the vanilla textarea
+      await pageUtils.pressKeys('Tab');
       await expect(vanillaTextarea).toBeFocused();
 
-      await page.keyboard.press('ArrowDown');
+      // Arrow keys should work on the vanilla textarea
+      await pageUtils.pressKeys('ArrowDown');
+      await expect(vanillaTextarea).toBeFocused();
 
+      await pageUtils.pressKeys('ArrowUp');
       await expect(vanillaTextarea).toBeFocused();
 
-      await page.keyboard.press('ArrowUp');
+      await pageUtils.pressKeys('Home');
+      await expect(vanillaTextarea).toBeFocused();
 
+      await pageUtils.pressKeys('End');
       await expect(vanillaTextarea).toBeFocused();
+    });
 
-      await page.keyboard.press('Home');
+    test('should not override keyboard interactions for input elements', async ({ page, pageUtils }) => {
+      const popover = page.locator('ion-popover');
+      const innerNativeInput = page.locator('ion-input input').nth(0);
+      const vanillaInput = page.locator('ion-input + input');
 
-      await expect(vanillaTextarea).toBeFocused();
+      await popoverFixture.open('#popover-with-input');
+
+      /**
+       * Focusing happens async inside of popover so we need
+       * to wait for the requestAnimationFrame to fire.
+       */
+      await expect(popover).toBeFocused();
 
-      await page.keyboard.press('End');
+      // Tab should focus the native input inside ion-input
+      await pageUtils.pressKeys('Tab');
 
-      await expect(vanillaTextarea).toBeFocused();
+      await expect(innerNativeInput).toBeFocused();
+
+      // Arrow keys should work on the ion-input
+      await pageUtils.pressKeys('ArrowDown');
+      await expect(innerNativeInput).toBeFocused();
+
+      await pageUtils.pressKeys('ArrowUp');
+      await expect(innerNativeInput).toBeFocused();
+
+      // Tab again should focus the vanilla input
+      await pageUtils.pressKeys('Tab');
+      await expect(vanillaInput).toBeFocused();
+
+      // Arrow keys should work on the vanilla input
+      await pageUtils.pressKeys('ArrowDown');
+      await expect(vanillaInput).toBeFocused();
+
+      await pageUtils.pressKeys('ArrowUp');
+      await expect(vanillaInput).toBeFocused();
+
+      await pageUtils.pressKeys('Home');
+      await expect(vanillaInput).toBeFocused();
+
+      await pageUtils.pressKeys('End');
+      await expect(vanillaInput).toBeFocused();
+    });
+
+    test('should move focus between buttons', async ({ page, pageUtils }) => {
+      const buttons = page.locator('ion-popover button');
+
+      await popoverFixture.open('#popover-with-buttons');
+
+      await pageUtils.pressKeys('Tab');
+      await expect(buttons.nth(0)).toBeFocused();
+
+      await pageUtils.pressKeys('Tab');
+      await expect(buttons.nth(1)).toBeFocused();
+
+      await pageUtils.pressKeys('Tab');
+      await expect(buttons.nth(0)).toBeFocused();
+
+      await pageUtils.pressKeys('Shift+Tab');
+      await expect(buttons.nth(1)).toBeFocused();
+
+      await pageUtils.pressKeys('Shift+Tab');
+      await expect(buttons.nth(0)).toBeFocused();
+
+      await pageUtils.pressKeys('Shift+Tab');
+      await expect(buttons.nth(1)).toBeFocused();
     });
   });
 });