From 61336a0b207c493087dac735809ba9c4506d7ef2 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 30 May 2024 15:00:20 -0700
Subject: [PATCH] fix(block-section): restore block toggling when clicking on
 the header switch

---
 .../block-section/block-section.e2e.ts        | 25 ++++++++++++++++---
 .../block-section/block-section.scss          | 13 ----------
 .../block-section/block-section.tsx           |  5 +---
 .../src/components/block-section/resources.ts |  2 --
 4 files changed, 22 insertions(+), 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
index 25fec736473..0913ae112b9 100644
--- 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
index 863ae4f77e6..36ebde3e877 100644
--- 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
index 909834bf36f..b1a26bab001 100644
--- 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
index 67509fc607f..9efb94b3684 100644
--- 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",