feat(block): prevent disabled block content from being tabbed into (#652

) BREAKING CHANGE: disabled blocks are no longer interactive
Esri · Dec 19, 2019 · 6ef11c4 · 6ef11c4
1 parent 173aa21
commit 6ef11c4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts
@@ -48,8 +48,23 @@ describe("calcite-block", () => {
     block.setProperty("disabled", true);
     await page.waitForChanges();
 
+    // `tabindex=-1` on host removes children from the tab order
+    expect(block.getAttribute("tabindex")).toBe("-1");
+
     await content.click();
     expect(clickSpy).toHaveReceivedEventTimes(1);
+
+    const header = await page.find(`calcite-block >>> .${CSS.headerContainer}`);
+    const toggleSpy = await block.spyOnEvent("calciteBlockToggle");
+
+    await header.click();
+    await header.click();
+    expect(toggleSpy).toHaveReceivedEventTimes(0);
+
+    block.setAttribute("disabled", false);
+    await page.waitForChanges();
+
+    expect(block.getAttribute("tabindex")).toBeNull();
   });
 
   it("has a loading state", async () => {

diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss
@@ -6,6 +6,15 @@
   @include borderShadow();
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  user-select: none;
+
+  .header-container {
+    opacity: var(--calcite-app-disabled-opacity);
+  }
+}
+
 calcite-loader[inline] {
   color: var(--calcite-app-foreground-subtle);
 }

diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx
@@ -138,9 +138,10 @@ export class CalciteBlock {
     const toggleLabel = open ? textCollapse : textExpand;
     const content = loading ? (
       <calcite-loader inline is-active></calcite-loader>
-    ) : !disabled ? (
+    ) : (
       <slot name={SLOTS.control} />
-    ) : null;
+    );
+
     const hasIcon = el.querySelector(`[slot=${SLOTS.icon}]`);
     const headerContent = (
       <header class={CSS.header}>
@@ -185,7 +186,7 @@ export class CalciteBlock {
     );
 
     return (
-      <Host>
+      <Host tabIndex={disabled ? -1 : null}>
         <article aria-expanded={collapsible ? open.toString() : null} aria-busy={loading}>
           {headerNode}
           <div class={CSS.content} hidden={!hasContent || !open}>

diff --git a/src/components/utils/CalciteScrim.tsx b/src/components/utils/CalciteScrim.tsx
@@ -11,6 +11,7 @@ const scrimDivStyle = {
   position: "absolute",
   right: "0",
   top: "0",
+  userSelect: "none",
   zIndex: "2"
 };