From 6ef11c44d39ad0aaa48f0b07c599f2ab1b1dd7ef Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 19 Dec 2019 13:28:49 -0800
Subject: [PATCH] feat(block): prevent disabled block content from being tabbed
 into (#652)

BREAKING CHANGE: disabled blocks are no longer interactive
---
 src/components/calcite-block/calcite-block.e2e.ts | 15 +++++++++++++++
 src/components/calcite-block/calcite-block.scss   |  9 +++++++++
 src/components/calcite-block/calcite-block.tsx    |  7 ++++---
 src/components/utils/CalciteScrim.tsx             |  1 +
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts
index a590dc5a..96f9ba92 100644
--- 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
index bf80c495..2510a965 100644
--- 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
index 7de64174..2886bda0 100644
--- 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
index aa3a4b0c..c9c8c94c 100644
--- 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"
 };