Merge branch 'main' into gh-26915

Author: sean-perkins

core/src/components/input/test/input.spec.ts

@@ -0,0 +1,14 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Input } from '../input';
+
+it('should inherit attributes', async () => {
+  const page = await newSpecPage({
+    components: [Input],
+    html: '<ion-input title="my title" tabindex="-1" data-form-type="password"></ion-input>',
+  });
+
+  const nativeEl = page.body.querySelector('ion-input input');
+  expect(nativeEl.getAttribute('title')).toBe('my title');
+  expect(nativeEl.getAttribute('tabindex')).toBe('-1');
+  expect(nativeEl.getAttribute('data-form-type')).toBe('password');
+});

core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts

@@ -2,8 +2,12 @@ import { expect } from '@playwright/test';
 import type { E2EPage } from '@utils/test/playwright';
 import { test } from '@utils/test/playwright';
 
-// TODO FW-3081
-test.describe.skip('ripple-effect: basic', () => {
+test.describe('ripple-effect: basic', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
   test('should add .ion-activated when pressed', async ({ page }) => {
     await verifyRippleEffect(page, '#small-btn');
     await verifyRippleEffect(page, '#large-btn');
@@ -14,7 +18,7 @@ test.describe.skip('ripple-effect: basic', () => {
 
   test.describe('ripple effect with nested ion-button', () => {
     test('should add .ion-activated when the block is pressed', async ({ page }) => {
-      await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`);
+      await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
 
       const el = page.locator('#ripple-with-button');
 
@@ -30,9 +34,7 @@ test.describe.skip('ripple-effect: basic', () => {
       // Waits for the ripple effect to be added
       await page.waitForSelector('.ion-activated');
 
-      const elHandle = await el.elementHandle();
-      const classes = await elHandle?.evaluate((el) => el.classList.value);
-      expect(classes).toMatch(/ion-activated/);
+      await expect(el).toHaveClass(/ion-activated/);
     });
 
     test('should add .ion-activated when the button is pressed', async ({ page }) => {
@@ -42,7 +44,7 @@ test.describe.skip('ripple-effect: basic', () => {
 });
 
 const verifyRippleEffect = async (page: E2EPage, selector: string) => {
-  await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`);
+  await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
 
   const el = page.locator(selector);
 
@@ -55,10 +57,7 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => {
     await page.mouse.down();
   }
 
-  // Waits for the ripple effect to be added
-  await page.waitForSelector(`${selector}.ion-activated`);
+  await page.waitForSelector('.ion-activated');
 
-  const elHandle = await el.elementHandle();
-  const classes = await elHandle?.evaluate((el) => el.classList.value);
-  expect(classes).toMatch(/ion-activated/);
+  await expect(el).toHaveClass(/ion-activated/);
 };

core/src/components/textarea/test/textarea.spec.ts

@@ -0,0 +1,14 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Textarea } from '../textarea';
+
+it('should inherit attributes', async () => {
+  const page = await newSpecPage({
+    components: [Textarea],
+    html: '<ion-textarea title="my title" tabindex="-1" data-form-type="password"></ion-textarea>',
+  });
+
+  const nativeEl = page.body.querySelector('ion-textarea textarea');
+  expect(nativeEl.getAttribute('title')).toBe('my title');
+  expect(nativeEl.getAttribute('tabindex')).toBe('-1');
+  expect(nativeEl.getAttribute('data-form-type')).toBe('password');
+});

core/src/components/textarea/textarea.tsx

@@ -223,7 +223,7 @@ export class Textarea implements ComponentInterface {
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
-      ...inheritAttributes(this.el, ['data-form-type', 'title']),
+      ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex']),
     };
   }