feat(accordion): add shape styles for the ionic theme (#29973)

- Applies border radius based on the `shape` defined on the parent accordion group
- Adds an e2e test for shape with focused items to show the border radius
- Adds screenshots for the e2e test

Author: brandyscarney

core/src/components/accordion-group/accordion-group.ionic.scss

@@ -19,13 +19,19 @@
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-round) {
+  --border-radius: #{globals.$ion-border-radius-400};
+
   @include globals.border-radius(globals.$ion-border-radius-400);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-soft) {
+  --border-radius: #{globals.$ion-border-radius-200};
+
   @include globals.border-radius(globals.$ion-border-radius-200);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
+  --border-radius: #{globals.$ion-border-radius-0};
+
   @include globals.border-radius(globals.$ion-border-radius-0);
 }

core/src/components/accordion/accordion.common.scss

@@ -1,6 +1,3 @@
-// @import "../../themes/functions.string";
-// @import "../../themes/mixins";
-
 // Accordion: Common
 // --------------------------------------------------
 

core/src/components/accordion/accordion.ionic.scss

@@ -42,7 +42,7 @@
 // The border is removed from the item in the header because
 // we are adding a border to the ::after element of the accordion.
 ::slotted(ion-item[slot="header"]) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: inherit;
   --color: #{globals.$ion-primitives-neutral-1200};
   --border-width: 0;
   --inner-border-width: 0;
@@ -55,11 +55,6 @@
   @include globals.typography(globals.$ion-heading-h6-medium);
 }
 
-// Shape only applies when inside an inset accordion group
-:host(.in-accordion-group-expand-inset) ::slotted(ion-item[slot="header"]) {
-  --border-radius: #{globals.$ion-border-radius-400};
-}
-
 // Accordion Content
 // --------------------------------------------------
 

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

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: shape'), () => {
+    ['round', 'soft', 'rectangular'].forEach((shape) => {
+      test(`${shape} - should not have visual regressions`, async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            /* Background styles to show the border radius */
+            :root {
+              background: #222;
+            }
+          </style>
+
+          <!-- Focused accordion to show the border radius -->
+          <ion-accordion-group value="first" expand="inset" shape="${shape}">
+            <ion-accordion value="first">
+              <ion-item slot="header" class="ion-focused">
+                <ion-label>Accordion title</ion-label>
+              </ion-item>
+              <div slot="content">This is the body of the accordion.</div>
+            </ion-accordion>
+            <ion-accordion value="second">
+              <ion-item slot="header">
+                <ion-label>Accordion title</ion-label>
+              </ion-item>
+              <div slot="content">This is the body of the accordion.</div>
+            </ion-accordion>
+            <ion-accordion value="third">
+              <ion-item slot="header">
+                <ion-label>Accordion title</ion-label>
+              </ion-item>
+              <div slot="content">This is the body of the accordion.</div>
+            </ion-accordion>
+          </ion-accordion-group>
+      `,
+          config
+        );
+
+        const accordionGroup = page.locator('ion-accordion-group');
+
+        await expect(accordionGroup).toHaveScreenshot(screenshot(`accordion-shape-${shape}`));
+      });
+    });
+  });
+});