chore(): sync with main

chore(): sync with main

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,21 @@
+name: CodeQL
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    permissions:
+      security-events: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: github/codeql-action/init@v2
+        with:
+          languages: javascript
+      - uses: github/codeql-action/analyze@v2

CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.11](https://github.com/ionic-team/ionic-framework/compare/v6.1.10...v6.1.11) (2022-06-22)
+
+
+### Bug Fixes
+
+* **datetime:** closing time picker no longer changes month ([#25478](https://github.com/ionic-team/ionic-framework/issues/25478)) ([f9ab9b5](https://github.com/ionic-team/ionic-framework/commit/f9ab9b54ddb5a3004673e4aaa9cb62fd8e97ba07)), closes [#25438](https://github.com/ionic-team/ionic-framework/issues/25438)
+* **item:** multiple input appearance when using datetime ([#25498](https://github.com/ionic-team/ionic-framework/issues/25498)) ([1a8d23d](https://github.com/ionic-team/ionic-framework/commit/1a8d23da8125d54c3119eacb51206f7541c9f410)), closes [#25484](https://github.com/ionic-team/ionic-framework/issues/25484) [#25483](https://github.com/ionic-team/ionic-framework/issues/25483)
+* **overlays:** focus is not moved if active element is in overlay ([#25481](https://github.com/ionic-team/ionic-framework/issues/25481)) ([dcc2da2](https://github.com/ionic-team/ionic-framework/commit/dcc2da2800e69d938b4a62db436d9f07d9663dce)), closes [#24127](https://github.com/ionic-team/ionic-framework/issues/24127) [#24820](https://github.com/ionic-team/ionic-framework/issues/24820)
+* **refresher:** quickly swiping down no longer causes duplicate refresh ([#25476](https://github.com/ionic-team/ionic-framework/issues/25476)) ([3abfa78](https://github.com/ionic-team/ionic-framework/commit/3abfa780ccb32484b4d9f1b509e7ab910dfb901a)), closes [#25418](https://github.com/ionic-team/ionic-framework/issues/25418)
+* **vue:** adding class to IonPage no longer hides component ([#25490](https://github.com/ionic-team/ionic-framework/issues/25490)) ([cbaa971](https://github.com/ionic-team/ionic-framework/commit/cbaa9711f094975569e2fcb28060f8e456804073))
+* **vue:** components have correct type definitions ([#25499](https://github.com/ionic-team/ionic-framework/issues/25499)) ([b1821e9](https://github.com/ionic-team/ionic-framework/commit/b1821e9d0a55f20f74696f119de724ab70647977)), closes [#25485](https://github.com/ionic-team/ionic-framework/issues/25485)
+
+
+
+
+
+## [6.1.10](https://github.com/ionic-team/ionic-framework/compare/v6.1.9...v6.1.10) (2022-06-15)
+
+
+### Bug Fixes
+
+* **angular:** router compatibility with Angular 12/13 ([#25456](https://github.com/ionic-team/ionic-framework/issues/25456)) ([7b105a3](https://github.com/ionic-team/ionic-framework/commit/7b105a3471e5bc588ba63f820b707e131c878b6f)), closes [#25448](https://github.com/ionic-team/ionic-framework/issues/25448)
+* **fab-button:** improve ripple effect behavior on click ([#25413](https://github.com/ionic-team/ionic-framework/issues/25413)) ([efdaf90](https://github.com/ionic-team/ionic-framework/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0)), closes [#21772](https://github.com/ionic-team/ionic-framework/issues/21772)
+* **modal:** backdrop animation when backdropBreakpoint is 1 ([#25430](https://github.com/ionic-team/ionic-framework/issues/25430)) ([c10df52](https://github.com/ionic-team/ionic-framework/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f)), closes [#25402](https://github.com/ionic-team/ionic-framework/issues/25402)
+* **modal:** status bar color now correct with sheet modal ([#25424](https://github.com/ionic-team/ionic-framework/issues/25424)) ([377c4f5](https://github.com/ionic-team/ionic-framework/commit/377c4f597b972818d90132017d50c33074ddadab)), closes [#20501](https://github.com/ionic-team/ionic-framework/issues/20501)
+* **picker-column-internal:** switching off an input mode column preserves scroll ([#25467](https://github.com/ionic-team/ionic-framework/issues/25467)) ([989429d](https://github.com/ionic-team/ionic-framework/commit/989429d65cf57ef8fb69854639f8eac1a12369bc))
+* **popover:** ensure popover does not go offscreen when adjusting top position ([#25350](https://github.com/ionic-team/ionic-framework/issues/25350)) ([6926538](https://github.com/ionic-team/ionic-framework/commit/692653842b43b5e36c51163f8261fde3b5bea40d)), closes [#25349](https://github.com/ionic-team/ionic-framework/issues/25349)
+
+
+
+
+
 ## [6.1.9](https://github.com/ionic-team/ionic-framework/compare/v6.1.8...v6.1.9) (2022-06-08)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.11](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11) (2022-06-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.10](https://github.com/ionic-team/ionic/compare/v6.1.9...v6.1.10) (2022-06-15)
+
+
+### Bug Fixes
+
+* **angular:** router compatibility with Angular 12/13 ([#25456](https://github.com/ionic-team/ionic/issues/25456)) ([7b105a3](https://github.com/ionic-team/ionic/commit/7b105a3471e5bc588ba63f820b707e131c878b6f)), closes [#25448](https://github.com/ionic-team/ionic/issues/25448)
+
+
+
+
+
 ## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.9",
+  "version": "6.1.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.9",
+      "version": "6.1.11",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.9",
+        "@ionic/core": "^6.1.11",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
-      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.11.tgz",
+      "integrity": "sha512-hMYZ+Iqvv2a8Qj3HCbtnI4DDIplMvr7x1Jk3aljNsvYQeyVLXxXvyNfpBzVuJxF7lJeGMlq9cY5XWUXh2gQnIA==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -7939,9 +7939,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
-      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.11.tgz",
+      "integrity": "sha512-hMYZ+Iqvv2a8Qj3HCbtnI4DDIplMvr7x1Jk3aljNsvYQeyVLXxXvyNfpBzVuJxF7lJeGMlq9cY5XWUXh2gQnIA==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.9",
+  "version": "6.1.11",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.9",
+    "@ionic/core": "^6.1.11",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/directives/navigation/ion-router-outlet.ts

@@ -89,6 +89,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     private config: Config,
     private navCtrl: NavController,
     @Optional() private environmentInjector: EnvironmentInjector,
+    @Optional() private componentFactoryResolver: ComponentFactoryResolver,
     commonLocation: Location,
     elementRef: ElementRef,
     router: Router,
@@ -232,8 +233,25 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       this.updateActivatedRouteProxy(cmpRef.instance, activatedRoute);
     } else {
       const snapshot = (activatedRoute as any)._futureSnapshot;
+
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const component = snapshot.routeConfig!.component as any;
+
+      /**
+       * Angular 14 introduces a new `loadComponent` property to the route config,
+       * that assigns the component to load to the `component` property of
+       * the route snapshot. We can check for the presence of this property
+       * to determine if the route is using standalone components.
+       *
+       * TODO: FW-1631: Remove this check when supporting standalone components
+       */
+      if (component == null && snapshot.component) {
+        console.warn(
+          '[Ionic Warning]: Standalone components are not currently supported with ion-router-outlet. You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404'
+        );
+        return;
+      }
+
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       // We create an activated route proxy object that will maintain future updates for this component
@@ -243,6 +261,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
       const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
 
+      /**
+       * The resolver is not always provided and is required in Angular 12.
+       * Fallback to the class-level provider when the resolver is not set.
+       */
+      resolverOrInjector = resolverOrInjector || this.componentFactoryResolver;
+
       if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
         // Backwards compatibility for Angular 13 and lower
         const factory = resolverOrInjector.resolveComponentFactory(component);

angular/src/providers/platform.ts

@@ -253,7 +253,7 @@ export class Platform {
 }
 
 const readQueryParam = (url: string, key: string) => {
-  key = key.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
+  key = key.replace(/[[\]\\]/g, '\\$&');
   const regex = new RegExp('[\\?&]' + key + '=([^&#]*)');
   const results = regex.exec(url);
   return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;

angular/test/test-app/cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    specPattern: './e2e/**/*.spec.ts',
+    baseUrl: 'http://localhost:4200/',
+    excludeSpecPattern: '**/examples/*',
+  },
+})

angular/test/test-app/cypress.json

@@ -1,8 +0,0 @@
-{
-  "integrationFolder": "./e2e",
-  "testFiles": "**/*.spec.ts",
-  "baseUrl": "http://localhost:4200/",
-  "ignoreTestFiles": "**/examples/*",
-  "video": false,
-  "screenshotOnRunFailure": false
-}

angular/test/test-app/e2e/src/form.spec.ts

@@ -39,6 +39,9 @@ describe('Form', () => {
       cy.get('ion-input.required').invoke('prop', 'value', 'Some value');
       testStatus('INVALID');
 
+      // TODO: FW-1160 - Remove when v7 is released
+      cy.wait(300);
+
       cy.get('ion-select').invoke('prop', 'value', 'nes');
       testStatus('INVALID');
 

angular/test/test-app/e2e/src/providers.spec.ts

@@ -13,6 +13,7 @@ describe('Providers', () => {
     cy.get('#is-desktop').should('have.text', 'true');
     cy.get('#is-mobile').should('have.text', 'false');
     cy.get('#keyboard-height').should('have.text', '12345');
+    cy.get('#query-params').should('have.text', 'firstParam: null, firstParam: null');
   });
 
   it('should detect testing mode', () => {
@@ -20,5 +21,11 @@ describe('Providers', () => {
 
     cy.get('#is-testing').should('have.text', 'true');
   });
+
+  it('should get query params', () => {
+    cy.visit('/providers?firstParam=abc&secondParam=true');
+
+    cy.get('#query-params').should('have.text', 'firstParam: abc, firstParam: true');
+  })
 });
 

angular/test/test-app/e2e/src/virtual-scroll.spec.ts

@@ -5,10 +5,7 @@ describe('Virtual Scroll', () => {
   })
 
   it('should open virtual-scroll', () => {
-    cy.document().then((doc) => {
-      const virtualElements = doc.querySelectorAll('ion-virtual-scroll > *');
-      expect(virtualElements.length).to.be.greaterThan(0);
-    });
+    cy.get('ion-virtual-scroll > *').its('length').should('be.gt', 0);
   });
 });
 

angular/test/test-app/package.json

@@ -56,7 +56,7 @@
     "@typescript-eslint/eslint-plugin": "4.28.2",
     "@typescript-eslint/parser": "4.28.2",
     "concurrently": "^6.0.0",
-    "cypress": "^6.7.1",
+    "cypress": "^10.2.0",
     "eslint": "^7.26.0",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",

angular/test/test-app/src/app/providers/providers.component.html

@@ -33,4 +33,7 @@
     <p>
       keyboardHeight: <span id="keyboard-height">{{keyboardHeight}}</span>
     </p>
+    <p>
+      queryParams: <span id="query-params">{{queryParams}}</span>
+    </p>
   </ion-content>

angular/test/test-app/src/app/providers/providers.component.ts

@@ -20,6 +20,7 @@ export class ProvidersComponent {
   isDesktop: boolean = undefined;
   isMobile: boolean = undefined;
   keyboardHeight = 0;
+  queryParams = '';
 
   constructor(
     actionSheetCtrl: ActionSheetController,
@@ -64,6 +65,10 @@ export class ProvidersComponent {
       NgZone.assertInAngularZone();
       this.isResized = true;
     });
+    const firstQuery = platform.getQueryParam('firstParam');
+    const secondQuery = platform.getQueryParam('secondParam');
+    this.queryParams = `firstParam: ${firstQuery}, firstParam: ${secondQuery}`;
+
     this.isDesktop = platform.is('desktop');
     this.isMobile = platform.is('mobile');
 

commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional']
-}

core/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.11](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11) (2022-06-22)
+
+
+### Bug Fixes
+
+* **datetime:** closing time picker no longer changes month ([#25478](https://github.com/ionic-team/ionic/issues/25478)) ([f9ab9b5](https://github.com/ionic-team/ionic/commit/f9ab9b54ddb5a3004673e4aaa9cb62fd8e97ba07)), closes [#25438](https://github.com/ionic-team/ionic/issues/25438)
+* **item:** multiple input appearance when using datetime ([#25484](https://github.com/ionic-team/ionic/issues/25484)) ([3089f38](https://github.com/ionic-team/ionic/commit/3089f38f4d335c44e9913e874813dd4205c2b160)), closes [#25479](https://github.com/ionic-team/ionic/issues/25479)
+* **item:** multiple input appearance when using datetime ([#25498](https://github.com/ionic-team/ionic/issues/25498)) ([1a8d23d](https://github.com/ionic-team/ionic/commit/1a8d23da8125d54c3119eacb51206f7541c9f410)), closes [#25484](https://github.com/ionic-team/ionic/issues/25484) [#25483](https://github.com/ionic-team/ionic/issues/25483)
+* **overlays:** focus is not moved if active element is in overlay ([#25481](https://github.com/ionic-team/ionic/issues/25481)) ([dcc2da2](https://github.com/ionic-team/ionic/commit/dcc2da2800e69d938b4a62db436d9f07d9663dce)), closes [#24127](https://github.com/ionic-team/ionic/issues/24127) [#24820](https://github.com/ionic-team/ionic/issues/24820)
+* **refresher:** quickly swiping down no longer causes duplicate refresh ([#25476](https://github.com/ionic-team/ionic/issues/25476)) ([3abfa78](https://github.com/ionic-team/ionic/commit/3abfa780ccb32484b4d9f1b509e7ab910dfb901a)), closes [#25418](https://github.com/ionic-team/ionic/issues/25418)
+* **vue:** components have correct type definitions ([#25499](https://github.com/ionic-team/ionic/issues/25499)) ([b1821e9](https://github.com/ionic-team/ionic/commit/b1821e9d0a55f20f74696f119de724ab70647977)), closes [#25485](https://github.com/ionic-team/ionic/issues/25485)
+
+
+
+
+
+## [6.1.10](https://github.com/ionic-team/ionic/compare/v6.1.9...v6.1.10) (2022-06-15)
+
+
+### Bug Fixes
+
+* **fab-button:** improve ripple effect behavior on click ([#25413](https://github.com/ionic-team/ionic/issues/25413)) ([efdaf90](https://github.com/ionic-team/ionic/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0)), closes [#21772](https://github.com/ionic-team/ionic/issues/21772)
+* **modal:** backdrop animation when backdropBreakpoint is 1 ([#25430](https://github.com/ionic-team/ionic/issues/25430)) ([c10df52](https://github.com/ionic-team/ionic/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f)), closes [#25402](https://github.com/ionic-team/ionic/issues/25402)
+* **modal:** status bar color now correct with sheet modal ([#25424](https://github.com/ionic-team/ionic/issues/25424)) ([377c4f5](https://github.com/ionic-team/ionic/commit/377c4f597b972818d90132017d50c33074ddadab)), closes [#20501](https://github.com/ionic-team/ionic/issues/20501)
+* **picker-column-internal:** switching off an input mode column preserves scroll ([#25467](https://github.com/ionic-team/ionic/issues/25467)) ([989429d](https://github.com/ionic-team/ionic/commit/989429d65cf57ef8fb69854639f8eac1a12369bc))
+* **popover:** ensure popover does not go offscreen when adjusting top position ([#25350](https://github.com/ionic-team/ionic/issues/25350)) ([6926538](https://github.com/ionic-team/ionic/commit/692653842b43b5e36c51163f8261fde3b5bea40d)), closes [#25349](https://github.com/ionic-team/ionic/issues/25349)
+
+
+
+
+
 ## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
 
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.9",
+  "version": "6.1.11",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",
-    "@stencil/vue-output-target": "^0.6.0",
+    "@stencil/vue-output-target": "^0.6.1",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
     "@types/swiper": "5.4.0",
@@ -62,7 +62,6 @@
     "fs-extra": "^9.0.1",
     "jest": "^26.4.1",
     "jest-cli": "^26.4.1",
-    "np": "^6.4.0",
     "pixelmatch": "4.0.2",
     "prettier": "^2.6.1",
     "puppeteer": "^10.4.0",

core/src/components.d.ts

@@ -1006,7 +1006,8 @@ export namespace Components {
     }
     interface IonInput {
         /**
-          * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
+          * This attribute is ignored.
+          * @deprecated
          */
         "accept"?: string;
         /**
@@ -1082,7 +1083,7 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
          */
         "multiple"?: boolean;
         /**
@@ -1604,7 +1605,7 @@ export namespace Components {
          */
         "setCurrentBreakpoint": (breakpoint: number) => Promise<void>;
         /**
-          * If `true`, a backdrop will be displayed behind the modal.
+          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */
         "showBackdrop": boolean;
         /**
@@ -1623,7 +1624,7 @@ export namespace Components {
          */
         "animated": boolean;
         /**
-          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
+          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.
          */
         "animation"?: AnimationBuilder;
         /**
@@ -1970,7 +1971,7 @@ export namespace Components {
          */
         "reference": PositionReference;
         /**
-          * If `true`, a backdrop will be displayed behind the popover.
+          * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */
         "showBackdrop": boolean;
         /**
@@ -2284,7 +2285,7 @@ export namespace Components {
          */
         "animated": boolean;
         /**
-          * This property allows to create custom transition using AnimateBuilder functions.
+          * This property allows to create custom transition using AnimationBuilder functions.
          */
         "animation"?: AnimationBuilder;
         "commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
@@ -4936,7 +4937,8 @@ declare namespace LocalJSX {
     }
     interface IonInput {
         /**
-          * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
+          * This attribute is ignored.
+          * @deprecated
          */
         "accept"?: string;
         /**
@@ -5008,7 +5010,7 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
          */
         "multiple"?: boolean;
         /**
@@ -5536,7 +5538,7 @@ declare namespace LocalJSX {
          */
         "presentingElement"?: HTMLElement;
         /**
-          * If `true`, a backdrop will be displayed behind the modal.
+          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */
         "showBackdrop"?: boolean;
         /**
@@ -5555,7 +5557,7 @@ declare namespace LocalJSX {
          */
         "animated"?: boolean;
         /**
-          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
+          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.
          */
         "animation"?: AnimationBuilder;
         "delegate"?: FrameworkDelegate;
@@ -5824,7 +5826,7 @@ declare namespace LocalJSX {
          */
         "reference"?: PositionReference;
         /**
-          * If `true`, a backdrop will be displayed behind the popover.
+          * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */
         "showBackdrop"?: boolean;
         /**
@@ -6172,7 +6174,7 @@ declare namespace LocalJSX {
          */
         "animated"?: boolean;
         /**
-          * This property allows to create custom transition using AnimateBuilder functions.
+          * This property allows to create custom transition using AnimationBuilder functions.
          */
         "animation"?: AnimationBuilder;
         "delegate"?: FrameworkDelegate;

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

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: a11y', () => {
+  test('accordions should be keyboard navigable', async ({ page, browserName }) => {
+    // TODO(FW-1764): remove skip once issue is resolved
+    test.skip(browserName === 'firefox', 'https://github.com/ionic-team/ionic-framework/issues/25529');
+
+    await page.goto(`/src/components/accordion/test/a11y`);
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+    const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
+    const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
+    const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
+    const addressInput = page.locator('#address1 input');
+
+    await page.keyboard.press(tabKey);
+    await expect(personalInfoHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(billingAddressHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(shippingAddressHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(personalInfoHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowUp');
+    await expect(shippingAddressHeader).toBeFocused();
+
+    // open Shipping Address accordion and move focus to the input inside it
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    await page.keyboard.press(tabKey);
+    await expect(addressInput).toBeFocused();
+
+    // ensure keyboard interaction doesn't move focus from body
+    await page.keyboard.press('ArrowDown');
+    await expect(addressInput).toBeFocused();
+  });
+});

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

@@ -1,63 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-const getActiveElementText = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.innerText, activeElement);
-};
-
-const getActiveInputID = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.closest('ion-input')?.id, activeElement);
-};
-
-test('accordion: a11y', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('accordion:rtl: a11y', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('accordion: keyboard navigation', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true',
-  });
-
-  await page.keyboard.press('Tab');
-  expect(await getActiveElementText(page)).toEqual('Personal Information');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Billing Address');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Personal Information');
-
-  await page.keyboard.press('ArrowUp');
-  expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  // open Shipping Address accordion and move focus to the input inside it
-  await page.keyboard.press('Enter');
-  await page.waitForChanges();
-  await page.keyboard.press('Tab');
-
-  const activeID = await getActiveInputID(page);
-  expect(activeID).toEqual('address1');
-
-  // ensure keyboard interaction doesn't move focus from body
-  await page.keyboard.press('ArrowDown');
-  const activeIDAgain = await getActiveInputID(page);
-  expect(activeIDAgain).toEqual('address1');
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -42,12 +42,12 @@
 
         <div class="grid ion-padding">
           <div class="grid-item">
-            <h2>Inset, Color - iOS</h2>
-            <ion-accordion-group mode="ios" expand="inset">
+            <h2>Inset, Color</h2>
+            <ion-accordion-group expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -118,12 +118,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset - iOS</h2>
-            <ion-accordion-group mode="ios" expand="inset">
+            <h2>Inset</h2>
+            <ion-accordion-group expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -194,12 +194,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset, Color - MD</h2>
-            <ion-accordion-group mode="md" expand="inset">
+            <h2>Compact, Color</h2>
+            <ion-accordion-group value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -270,394 +270,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset - MD</h2>
-            <ion-accordion-group mode="md" expand="inset">
+            <h2>Compact</h2>
+            <ion-accordion-group value="attractions">
               <ion-accordion value="attractions">
                 <ion-item slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Compact, Color - iOS</h2>
-            <ion-accordion-group mode="ios">
-              <ion-accordion value="attractions">
-                <ion-item color="primary" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item color="warning" slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item color="danger" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item color="success" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact - iOS</h2>
-            <ion-accordion-group mode="ios">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact, Color - MD</h2>
-            <ion-accordion-group mode="md">
-              <ion-accordion value="attractions">
-                <ion-item color="primary" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item color="warning" slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item color="danger" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item color="success" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact - MD</h2>
-            <ion-accordion-group mode="md">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Multiple</h2>
-            <ion-accordion-group expand="inset" mode="md" multiple="true">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -729,10 +347,5 @@
         </div>
       </ion-content>
     </ion-app>
-
-    <script>
-      const multipleAccordion = document.querySelector('ion-accordion-group[multiple="true"]');
-      multipleAccordion.value = ['dining', 'exercise'];
-    </script>
   </body>
 </html>

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

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: multiple', () => {
+  test('should update value and not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/multiple`);
+    const accordionGroup = page.locator('ion-accordion-group');
+    const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
+    const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
+
+    await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
+
+    await diningHeader.click();
+    await page.waitForChanges();
+
+    await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
+
+    await diningHeader.click();
+    await attractionsHeader.click();
+    await page.waitForChanges();
+
+    await expect(accordionGroup).toHaveJSProperty('value', []);
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,54 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: multiple - open', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/multiple?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const accordionGroup = await page.find('ion-accordion-group');
-  const diningAccordion = await page.find('ion-accordion[value="dining"] ion-item[slot="header"]');
-
-  const groupValue = await accordionGroup.getProperty('value');
-  expect(groupValue).toEqual('attractions');
-
-  await diningAccordion.click();
-  await page.waitForChanges();
-
-  const groupValueAgain = await accordionGroup.getProperty('value');
-  expect(groupValueAgain).toEqual(['attractions', 'dining']);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('accordion: multiple - close', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/multiple?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const accordionGroup = await page.find('ion-accordion-group');
-  const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]');
-
-  await attractionsAccordion.click();
-  await page.waitForChanges();
-
-  const groupValue = await accordionGroup.getProperty('value');
-  expect(groupValue).toEqual([]);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: nested', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/nested`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`accordion-nested-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('nested: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/nested?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,21 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: standalone', () => {
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/standalone`);
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/standalone`);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+      `accordion-standalone-${page.getSnapshotSettings()}.png`
+    );
+  });
+});