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 */}
+