fix(block-section): restore block toggling when clicking on the heade…

…r switch (#9472) **Related Issue:** #9454 ## Summary Fixes toggling issue caused by moving switch outside toggle container. This regression was introduced by #9194.
Esri · Jun 4, 2024 · 519a11c · 519a11c
1 parent 0ec0371
commit 519a11c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 23 deletions.
diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -172,21 +172,38 @@ describe("calcite-block-section", () => {
     const element = await page.find("calcite-block-section");
     const toggleSpy = await element.spyOnEvent("calciteBlockSectionToggle");
     const toggle = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
+    let expectedClickEvents = 1;
 
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
 
     await toggle.click();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(1);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
     await toggle.click();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(2);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
 
+    if ((await element.getProperty("toggleDisplay")) === "switch") {
+      const switchToggle = await page.find(`calcite-block-section >>> .${CSS.switch}`);
+
+      await switchToggle.click();
+
+      expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
+      expect(await element.getProperty("open")).toBe(true);
+      expect(toggle.getAttribute("aria-expanded")).toBe("true");
+
+      await switchToggle.click();
+
+      expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
+      expect(await element.getProperty("open")).toBe(false);
+      expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    }
+
     const keyboardToggleEmitter =
       toggle.tagName === "CALCITE-ACTION"
         ? (
@@ -204,14 +221,14 @@ describe("calcite-block-section", () => {
     await keyboardToggleEmitter.press(" ");
     await page.waitForChanges();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(3);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
     await keyboardToggleEmitter.press("Enter");
     await page.waitForChanges();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(4);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
   }

diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -49,12 +49,6 @@
   }
 }
 
-.label {
-  @apply flex items-center justify-center my-1;
-
-  margin-inline-start: var(--calcite-spacing-md);
-}
-
 .section-header__text {
   @apply my-0
     flex-auto;
@@ -81,13 +75,6 @@
       color: var(--calcite-color-text-1);
     }
   }
-
-  .switch {
-    @apply flex items-center;
-
-    inset-block-start: 50%;
-    transform: translate(0, 50%);
-  }
 }
 
 .status-icon {

diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -268,11 +268,8 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
 
             {this.renderIcon(this.iconEnd)}
             {this.renderStatusIcon()}
-            {/* we use calcite-label to use a simple component that will allow us to prevent keyboard focus by setting tabindex="-1" on the host */}
+            <calcite-switch checked={open} class={CSS.switch} inert label={toggleLabel} scale="s" />
           </div>
-          <calcite-label class={CSS.label} layout="inline" tabIndex={-1}>
-            <calcite-switch checked={open} class={CSS.switch} label={toggleLabel} scale="s" />
-          </calcite-label>
         </div>
       ) : (
         <div

diff --git a/packages/calcite-components/src/components/block-section/resources.ts b/packages/calcite-components/src/components/block-section/resources.ts
@@ -6,11 +6,9 @@ export const IDS = {
 export const CSS = {
   chevronIcon: "chevron-icon",
   content: "content",
-  focusGuard: "focus-guard",
   iconStart: "icon--start",
   iconEnd: "icon--end",
   invalid: "invalid",
-  label: "label",
   sectionHeader: "section-header",
   sectionHeaderText: "section-header__text",
   statusIcon: "status-icon",