feat(react): migrate to new React Output Target with Next.js support

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
         with:
-          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
           numOfAssignee: 1
           allowSelfAssign: false

CHANGELOG.md

@@ -3,61 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.2.9](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.2.9) (2024-09-17)
-
-
-### Bug Fixes
-
-* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([6fb087f](https://github.com/ionic-team/ionic-framework/commit/6fb087f768d6cfe8857f3ac7bd27ac9415a63d0d)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
-
-
-
-
-
-## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
-
-
-### Bug Fixes
-
-* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
-* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
-* **test:** fix Stencil Nightly build ([#29780](https://github.com/ionic-team/ionic-framework/issues/29780)) ([bf7f6f6](https://github.com/ionic-team/ionic-framework/commit/bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7)), closes [#5926](https://github.com/ionic-team/ionic-framework/issues/5926)
-
-
-
-
-
-## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
-* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
-* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
-* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
-* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
-
-
-
-
-
-## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-
-
-
-
-
 ## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
 
 

core/CHANGELOG.md

@@ -3,57 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.2.9](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.2.9) (2024-09-17)
-
-
-### Bug Fixes
-
-* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([6fb087f](https://github.com/ionic-team/ionic-framework/commit/6fb087f768d6cfe8857f3ac7bd27ac9415a63d0d)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
-
-
-
-
-
-## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
-
-
-### Bug Fixes
-
-* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
-* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
-* **test:** fix Stencil Nightly build ([#29780](https://github.com/ionic-team/ionic-framework/issues/29780)) ([bf7f6f6](https://github.com/ionic-team/ionic-framework/commit/bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7)), closes [#5926](https://github.com/ionic-team/ionic-framework/issues/5926)
-
-
-
-
-
-## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
-* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
-
-
-
-
-
-## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-
-
-
-
-
 ## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
 
 **Note:** Version bump only for package @ionic/core

core/Dockerfile

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

core/custom-rules/await-playwright-promise-assertion.js

@@ -67,5 +67,4 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
   'toHaveTitle',
   'toHaveURL',
   'toBeOK',
-  'click'
 ];

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.9",
+  "version": "8.2.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,12 +31,12 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.20.0",
+    "@stencil/core": "^4.19.2",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.10.0",
+    "@axe-core/playwright": "^4.9.1",
     "@capacitor/core": "^6.0.0",
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
@@ -44,13 +44,13 @@
     "@clack/prompts": "^0.7.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.44.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "0.5.3",
+    "@stencil/react-output-target": "0.0.1-dev.11721063914.1cb11145",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.9",
+    "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/src/components/accordion/test/disabled/accordion.e2e.ts

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

core/src/components/accordion/test/readonly/accordion.e2e.ts

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

core/src/components/action-sheet/action-sheet.tsx

@@ -310,9 +310,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    if (!this.htmlAttributes?.id) {
-      setOverlayId(this.el);
-    }
+    setOverlayId(this.el);
   }
 
   componentDidLoad() {

core/src/components/action-sheet/test/action-sheet-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../action-sheet';
+
+it('action sheet should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [ActionSheet],
+    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+  });
+  let actionSheet: HTMLIonActionSheetElement;
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet).not.toBe(null);
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the action sheet from the DOM
+  actionSheet.remove();
+  await page.waitForChanges();
+
+  // Create a new action sheet to verify the id is incremented
+  actionSheet = document.createElement('ion-action-sheet');
+  actionSheet.isOpen = true;
+  page.body.appendChild(actionSheet);
+  await page.waitForChanges();
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same action sheet again should reuse the existing id
+
+  actionSheet.isOpen = false;
+  await page.waitForChanges();
+  actionSheet.isOpen = true;
+  await page.waitForChanges();
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/action-sheet/test/action-sheet-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { ActionSheet } from '../action-sheet';
-import { h } from '@stencil/core';
-
-describe('action-sheet: id', () => {
-  it('action sheet should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [ActionSheet],
-      html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
-    });
-    let actionSheet: HTMLIonActionSheetElement;
-
-    actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-    expect(actionSheet).not.toBe(null);
-    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the action sheet from the DOM
-    actionSheet.remove();
-    await page.waitForChanges();
-
-    // Create a new action sheet to verify the id is incremented
-    actionSheet = document.createElement('ion-action-sheet');
-    actionSheet.isOpen = true;
-    page.body.appendChild(actionSheet);
-    await page.waitForChanges();
-
-    actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same action sheet again should reuse the existing id
-
-    actionSheet.isOpen = false;
-    await page.waitForChanges();
-    actionSheet.isOpen = true;
-    await page.waitForChanges();
-
-    actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [ActionSheet],
-      template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
-    });
-
-    const alert = page.body.querySelector('ion-action-sheet')!;
-    expect(alert.id).toBe(id);
-  });
-});

core/src/components/alert/test/alert-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Alert } from '../alert';
+
+it('alert should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Alert],
+    html: `<ion-alert is-open="true"></ion-alert>`,
+  });
+  let alert: HTMLIonAlertElement;
+
+  alert = page.body.querySelector('ion-alert')!;
+
+  expect(alert).not.toBe(null);
+  expect(alert.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the alert from the DOM
+  alert.remove();
+  await page.waitForChanges();
+
+  // Create a new alert to verify the id is incremented
+  alert = document.createElement('ion-alert');
+  alert.isOpen = true;
+  page.body.appendChild(alert);
+  await page.waitForChanges();
+
+  alert = page.body.querySelector('ion-alert')!;
+
+  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same alert again should reuse the existing id
+
+  alert.isOpen = false;
+  await page.waitForChanges();
+  alert.isOpen = true;
+  await page.waitForChanges();
+
+  alert = page.body.querySelector('ion-alert')!;
+
+  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/alert/test/alert-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Alert } from '../alert';
-import { h } from '@stencil/core';
-
-describe('alert: id', () => {
-  it('alert should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ion-alert is-open="true"></ion-alert>`,
-    });
-    let alert: HTMLIonAlertElement;
-
-    alert = page.body.querySelector('ion-alert')!;
-
-    expect(alert).not.toBe(null);
-    expect(alert.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the alert from the DOM
-    alert.remove();
-    await page.waitForChanges();
-
-    // Create a new alert to verify the id is incremented
-    alert = document.createElement('ion-alert');
-    alert.isOpen = true;
-    page.body.appendChild(alert);
-    await page.waitForChanges();
-
-    alert = page.body.querySelector('ion-alert')!;
-
-    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same alert again should reuse the existing id
-
-    alert.isOpen = false;
-    await page.waitForChanges();
-    alert.isOpen = true;
-    await page.waitForChanges();
-
-    alert = page.body.querySelector('ion-alert')!;
-
-    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [Alert],
-      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
-    });
-
-    const alert = page.body.querySelector('ion-alert')!;
-    expect(alert.id).toBe(id);
-  });
-});

core/src/components/alert/test/alert.spec.tsx

@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { config } from '../../../global/config';
 import { Alert } from '../alert';
+import { h } from '@stencil/core';
 
 describe('alert: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -38,4 +39,15 @@ describe('alert: custom html', () => {
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Alert],
+      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
+    });
+
+    const alert = page.body.querySelector('ion-alert')!;
+    expect(alert.id).toBe(id);
+  });
 });

core/src/components/content/content.tsx

@@ -1,7 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
-import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers';
-import type { Attributes } from '@utils/helpers';
+import { componentOnReady, hasLazyBuild } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -34,7 +33,6 @@ export class Content implements ComponentInterface {
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
-  private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
   private tabsLoadCallback?: () => void;
@@ -127,10 +125,6 @@ export class Content implements ComponentInterface {
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAriaAttributes(this.el);
-  }
-
   connectedCallback() {
     this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
 
@@ -438,7 +432,7 @@ export class Content implements ComponentInterface {
   }
 
   render() {
-    const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
+    const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
@@ -459,7 +453,6 @@ export class Content implements ComponentInterface {
           '--offset-top': `${this.cTop}px`,
           '--offset-bottom': `${this.cBottom}px`,
         }}
-        {...inheritedAttributes}
       >
         <div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
 

core/src/components/content/test/a11y/content.e2e.ts

@@ -1,67 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-/**
- * Content does not have mode-specific styling
- */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('content: a11y'), () => {
-    test('should have the main role', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-content></ion-content>
-      `,
-        config
-      );
-      const content = page.locator('ion-content');
-
-      await expect(content).toHaveAttribute('role', 'main');
-    });
-
-    test('should have no role in popover', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-popover>
-          <ion-content></ion-content>
-        </ion-popover>
-      `,
-        config
-      );
-
-      const content = page.locator('ion-content');
-
-      /**
-       * Playwright can't do .not.toHaveAttribute() because a value is expected,
-       * and toHaveAttribute can't accept a value of type null.
-       */
-      const role = await content.getAttribute('role');
-      expect(role).toBeNull();
-    });
-
-    test('should allow for custom role', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-content role="complementary"></ion-content>
-      `,
-        config
-      );
-      const content = page.locator('ion-content');
-
-      await expect(content).toHaveAttribute('role', 'complementary');
-    });
-
-    test('should allow for custom role in popover', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-popover>
-          <ion-content role="complementary"></ion-content>
-        </ion-popover>
-      `,
-        config
-      );
-      const content = page.locator('ion-content');
-
-      await expect(content).toHaveAttribute('role', 'complementary');
-    });
-  });
-});

core/src/components/footer/test/a11y/footer.e2e.ts

@@ -1,33 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-/**
- * Footer does not have mode-specific styling
- */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('footer: a11y'), () => {
-    test('should have the contentinfo role', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-footer></ion-footer>
-      `,
-        config
-      );
-      const footer = page.locator('ion-footer');
-
-      await expect(footer).toHaveAttribute('role', 'contentinfo');
-    });
-
-    test('should allow for custom role', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-footer role="complementary"></ion-footer>
-      `,
-        config
-      );
-      const footer = page.locator('ion-footer');
-
-      await expect(footer).toHaveAttribute('role', 'complementary');
-    });
-  });
-});

core/src/components/header/test/a11y/header.e2e.ts

@@ -15,56 +15,20 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       expect(results.violations).toEqual([]);
     });
 
-    test('should have the banner role', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-header></ion-header>
-      `,
-        config
-      );
-      const header = page.locator('ion-header');
-
-      await expect(header).toHaveAttribute('role', 'banner');
-    });
-
-    test('should have no role in menu', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-menu>
-          <ion-header></ion-header>
-        </ion-menu>
-      `,
-        config
-      );
-      const header = page.locator('ion-header');
-
-      await expect(header).toHaveAttribute('role', 'none');
-    });
-
     test('should allow for custom role', async ({ page }) => {
+      /**
+       * Note: This example should not be used in production.
+       * This only serves to check that `role` can be customized.
+       */
       await page.setContent(
         `
-        <ion-header role="complementary"></ion-header>
+        <ion-header role="heading"></ion-header>
       `,
         config
       );
       const header = page.locator('ion-header');
 
-      await expect(header).toHaveAttribute('role', 'complementary');
-    });
-
-    test('should allow for custom role in menu', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-menu>
-          <ion-header role="complementary"></ion-header>
-        </ion-menu>
-      `,
-        config
-      );
-      const header = page.locator('ion-header');
-
-      await expect(header).toHaveAttribute('role', 'complementary');
+      await expect(header).toHaveAttribute('role', 'heading');
     });
   });
 });

core/src/components/item/item.tsx

@@ -191,7 +191,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     );
 
     // The following elements should also stay clickable when an input with cover is present
-    const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+    const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
 
     // Check for multiple inputs to change the position of the input cover to relative
     // for all of the covered inputs above

core/src/components/loading/loading.tsx

@@ -214,9 +214,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
       const mode = getIonMode(this);
       this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
     }
-    if (!this.htmlAttributes?.id) {
-      setOverlayId(this.el);
-    }
+    setOverlayId(this.el);
   }
 
   componentDidLoad() {

core/src/components/loading/test/loading-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Loading } from '../loading';
+
+it('loading should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Loading],
+    html: `<ion-loading is-open="true"></ion-loading>`,
+  });
+  let loading: HTMLIonLoadingElement;
+
+  loading = page.body.querySelector('ion-loading')!;
+
+  expect(loading).not.toBe(null);
+  expect(loading.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the loading from the DOM
+  loading.remove();
+  await page.waitForChanges();
+
+  // Create a new loading to verify the id is incremented
+  loading = document.createElement('ion-loading');
+  loading.isOpen = true;
+  page.body.appendChild(loading);
+  await page.waitForChanges();
+
+  loading = page.body.querySelector('ion-loading')!;
+
+  expect(loading.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same loading again should reuse the existing id
+
+  loading.isOpen = false;
+  await page.waitForChanges();
+  loading.isOpen = true;
+  await page.waitForChanges();
+
+  loading = page.body.querySelector('ion-loading')!;
+
+  expect(loading.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/loading/test/loading-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Loading } from '../loading';
-import { h } from '@stencil/core';
-
-describe('loading: id', () => {
-  it('loading should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [Loading],
-      html: `<ion-loading is-open="true"></ion-loading>`,
-    });
-    let loading: HTMLIonLoadingElement;
-
-    loading = page.body.querySelector('ion-loading')!;
-
-    expect(loading).not.toBe(null);
-    expect(loading.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the loading from the DOM
-    loading.remove();
-    await page.waitForChanges();
-
-    // Create a new loading to verify the id is incremented
-    loading = document.createElement('ion-loading');
-    loading.isOpen = true;
-    page.body.appendChild(loading);
-    await page.waitForChanges();
-
-    loading = page.body.querySelector('ion-loading')!;
-
-    expect(loading.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same loading again should reuse the existing id
-
-    loading.isOpen = false;
-    await page.waitForChanges();
-    loading.isOpen = true;
-    await page.waitForChanges();
-
-    loading = page.body.querySelector('ion-loading')!;
-
-    expect(loading.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [Loading],
-      template: () => <ion-loading htmlAttributes={{ id }} overlayIndex={-1}></ion-loading>,
-    });
-
-    const alert = page.body.querySelector('ion-loading')!;
-    expect(alert.id).toBe(id);
-  });
-});

core/src/components/menu/test/safe-area/menu.e2e.ts

@@ -14,14 +14,13 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const overwrittenStyle = document.createElement('style');
-          overwrittenStyle.innerHTML = `
+          const style = document.querySelector('style');
+          style!.innerHTML = `
             :root {
               --ion-safe-area-left: 50px !important;
               --ion-safe-area-right: 10px !important;
             }
           `;
-          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-start');
@@ -29,20 +28,20 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
 
         const startMenu = page.locator('[menu-id="start-menu"]');
         await expect(startMenu).toHaveClass(/show-menu/);
+
         await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
       });
       test('should render with safe area when notch is on the right', async ({ page }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const overwrittenStyle = document.createElement('style');
-          overwrittenStyle.innerHTML = `
+          const style = document.querySelector('style');
+          style!.innerHTML = `
             :root {
               --ion-safe-area-left: 10px !important;
               --ion-safe-area-right: 50px !important;
             }
           `;
-          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-start');
@@ -59,14 +58,13 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const overwrittenStyle = document.createElement('style');
-          overwrittenStyle.innerHTML = `
+          const style = document.querySelector('style');
+          style!.innerHTML = `
             :root {
               --ion-safe-area-left: 50px !important;
               --ion-safe-area-right: 10px !important;
             }
           `;
-          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-end');
@@ -81,14 +79,13 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const overwrittenStyle = document.createElement('style');
-          overwrittenStyle.innerHTML = `
+          const style = document.querySelector('style');
+          style!.innerHTML = `
             :root {
               --ion-safe-area-left: 10px !important;
               --ion-safe-area-right: 50px !important;
             }
           `;
-          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-end');

core/src/components/modal/modal.tsx

@@ -415,9 +415,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
     }
 
-    if (!this.htmlAttributes?.id) {
-      setOverlayId(this.el);
-    }
+    setOverlayId(el);
   }
 
   componentDidLoad() {

core/src/components/modal/test/modal-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Modal } from '../modal';
+
+it('modal should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Modal],
+    html: `<ion-modal is-open="true"></ion-modal>`,
+  });
+  let modal: HTMLIonModalElement;
+
+  modal = page.body.querySelector('ion-modal')!;
+
+  expect(modal).not.toBe(null);
+  expect(modal.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the modal from the DOM
+  modal.remove();
+  await page.waitForChanges();
+
+  // Create a new modal to verify the id is incremented
+  modal = document.createElement('ion-modal');
+  modal.isOpen = true;
+  page.body.appendChild(modal);
+  await page.waitForChanges();
+
+  modal = page.body.querySelector('ion-modal')!;
+
+  expect(modal.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same modal again should reuse the existing id
+
+  modal.isOpen = false;
+  await page.waitForChanges();
+  modal.isOpen = true;
+  await page.waitForChanges();
+
+  modal = page.body.querySelector('ion-modal')!;
+
+  expect(modal.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/modal/test/modal-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Modal } from '../modal';
-import { h } from '@stencil/core';
-
-describe('modal: id', () => {
-  it('modal should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [Modal],
-      html: `<ion-modal is-open="true"></ion-modal>`,
-    });
-    let modal: HTMLIonModalElement;
-
-    modal = page.body.querySelector('ion-modal')!;
-
-    expect(modal).not.toBe(null);
-    expect(modal.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the modal from the DOM
-    modal.remove();
-    await page.waitForChanges();
-
-    // Create a new modal to verify the id is incremented
-    modal = document.createElement('ion-modal');
-    modal.isOpen = true;
-    page.body.appendChild(modal);
-    await page.waitForChanges();
-
-    modal = page.body.querySelector('ion-modal')!;
-
-    expect(modal.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same modal again should reuse the existing id
-
-    modal.isOpen = false;
-    await page.waitForChanges();
-    modal.isOpen = true;
-    await page.waitForChanges();
-
-    modal = page.body.querySelector('ion-modal')!;
-
-    expect(modal.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [Modal],
-      template: () => <ion-modal htmlAttributes={{ id }} overlayIndex={-1}></ion-modal>,
-    });
-
-    const alert = page.body.querySelector('ion-modal')!;
-    expect(alert.id).toBe(id);
-  });
-});

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

@@ -265,7 +265,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const backdrop = page.locator('ion-modal ion-backdrop');
 
       await handle.click();
-      await backdrop.click();
+      backdrop.click();
 
       await ionBreakpointDidChange.next();
 

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

@@ -199,9 +199,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    if (!this.htmlAttributes?.id) {
-      setOverlayId(this.el);
-    }
+    setOverlayId(this.el);
   }
 
   componentDidLoad() {

core/src/components/picker-legacy/test/picker-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Picker } from '../picker';
+
+it('picker should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Picker],
+    html: `<ion-picker-legacy is-open="true"></ion-picker-legacy>`,
+  });
+  let picker: HTMLIonPickerLegacyElement;
+
+  picker = page.body.querySelector('ion-picker-legacy')!;
+
+  expect(picker).not.toBe(null);
+  expect(picker.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the picker from the DOM
+  picker.remove();
+  await page.waitForChanges();
+
+  // Create a new picker to verify the id is incremented
+  picker = document.createElement('ion-picker-legacy');
+  picker.isOpen = true;
+  page.body.appendChild(picker);
+  await page.waitForChanges();
+
+  picker = page.body.querySelector('ion-picker-legacy')!;
+
+  expect(picker.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same picker again should reuse the existing id
+
+  picker.isOpen = false;
+  await page.waitForChanges();
+  picker.isOpen = true;
+  await page.waitForChanges();
+
+  picker = page.body.querySelector('ion-picker-legacy')!;
+
+  expect(picker.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/picker-legacy/test/picker-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Picker } from '../picker';
-import { h } from '@stencil/core';
-
-describe('picker: id', () => {
-  it('picker should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [Picker],
-      html: `<ion-picker-legacy is-open="true"></ion-picker-legacy>`,
-    });
-    let picker: HTMLIonPickerLegacyElement;
-
-    picker = page.body.querySelector('ion-picker-legacy')!;
-
-    expect(picker).not.toBe(null);
-    expect(picker.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the picker from the DOM
-    picker.remove();
-    await page.waitForChanges();
-
-    // Create a new picker to verify the id is incremented
-    picker = document.createElement('ion-picker-legacy');
-    picker.isOpen = true;
-    page.body.appendChild(picker);
-    await page.waitForChanges();
-
-    picker = page.body.querySelector('ion-picker-legacy')!;
-
-    expect(picker.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same picker again should reuse the existing id
-
-    picker.isOpen = false;
-    await page.waitForChanges();
-    picker.isOpen = true;
-    await page.waitForChanges();
-
-    picker = page.body.querySelector('ion-picker-legacy')!;
-
-    expect(picker.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [Picker],
-      template: () => <ion-picker-legacy htmlAttributes={{ id }} overlayIndex={-1}></ion-picker-legacy>,
-    });
-
-    const alert = page.body.querySelector('ion-picker-legacy')!;
-    expect(alert.id).toBe(id);
-  });
-});

core/src/components/popover/popover.tsx

@@ -365,7 +365,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
   componentWillLoad() {
     const { el } = this;
-    const popoverId = this.htmlAttributes?.id ?? setOverlayId(el);
+    const popoverId = setOverlayId(el);
 
     this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`) as HTMLIonPopoverElement | null;
 

core/src/components/popover/test/popover-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Popover } from '../popover';
+
+it('popover should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Popover],
+    html: `<ion-popover is-open="true"></ion-popover>`,
+  });
+  let popover: HTMLIonPopoverElement;
+
+  popover = page.body.querySelector('ion-popover')!;
+
+  expect(popover).not.toBe(null);
+  expect(popover.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the popover from the DOM
+  popover.remove();
+  await page.waitForChanges();
+
+  // Create a new popover to verify the id is incremented
+  popover = document.createElement('ion-popover');
+  popover.isOpen = true;
+  page.body.appendChild(popover);
+  await page.waitForChanges();
+
+  popover = page.body.querySelector('ion-popover')!;
+
+  expect(popover.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same popover again should reuse the existing id
+
+  popover.isOpen = false;
+  await page.waitForChanges();
+  popover.isOpen = true;
+  await page.waitForChanges();
+
+  popover = page.body.querySelector('ion-popover')!;
+
+  expect(popover.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/popover/test/popover-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Popover } from '../popover';
-import { h } from '@stencil/core';
-
-describe('popover: id', () => {
-  it('popover should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [Popover],
-      html: `<ion-popover is-open="true"></ion-popover>`,
-    });
-    let popover: HTMLIonPopoverElement;
-
-    popover = page.body.querySelector('ion-popover')!;
-
-    expect(popover).not.toBe(null);
-    expect(popover.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the popover from the DOM
-    popover.remove();
-    await page.waitForChanges();
-
-    // Create a new popover to verify the id is incremented
-    popover = document.createElement('ion-popover');
-    popover.isOpen = true;
-    page.body.appendChild(popover);
-    await page.waitForChanges();
-
-    popover = page.body.querySelector('ion-popover')!;
-
-    expect(popover.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same popover again should reuse the existing id
-
-    popover.isOpen = false;
-    await page.waitForChanges();
-    popover.isOpen = true;
-    await page.waitForChanges();
-
-    popover = page.body.querySelector('ion-popover')!;
-
-    expect(popover.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [Popover],
-      template: () => <ion-popover htmlAttributes={{ id }} overlayIndex={-1}></ion-popover>,
-    });
-
-    const alert = page.body.querySelector('ion-popover')!;
-    expect(alert.id).toBe(id);
-  });
-});

core/src/components/range/range.tsx

@@ -449,7 +449,7 @@ export class Range implements ComponentInterface {
    */
   private onEnd(detail: GestureDetail | MouseEvent) {
     const { contentEl, initialContentScrollY } = this;
-    const currentX = (detail as GestureDetail).currentX ?? (detail as MouseEvent).clientX;
+    const currentX = (detail as GestureDetail).currentX || (detail as MouseEvent).clientX;
 
     /**
      * The `pressedKnob` can be undefined if the user never

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

@@ -80,11 +80,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
          * is already visible. We manually click() the element instead
          * to avoid flaky tests.
          */
-        /* eslint-disable custom-rules/await-playwright-promise-assertion */
         el.click();
         el.click();
         el.click();
-        /* eslint-enable custom-rules/await-playwright-promise-assertion */
       });
 
       const alerts = await page.$$('ion-alert');