From 6c920bf2a86fbac4b29cc5e511c987e597fb44a0 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Tue, 7 Jan 2020 15:27:17 -0800
Subject: [PATCH 1/6] #740 setFocus on dismiss button method

---
 .../calcite-panel/calcite-panel.tsx           | 32 +++++++++++++++++--
 src/demos/panel/basic.html                    |  5 ++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index 7ce08b44..e5011fcb 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -1,4 +1,14 @@
-import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from "@stencil/core";
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  Host,
+  Method,
+  Prop,
+  Watch,
+  h
+} from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { getElementDir } from "../utils/dom";
 import classnames from "classnames";
@@ -74,6 +84,8 @@ export class CalcitePanel {
 
   @Element() el: HTMLCalcitePanelElement;
 
+  private dismissButtonEl: HTMLCalciteActionElement;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -102,6 +114,17 @@ export class CalcitePanel {
     this.dismissed = true;
   };
 
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+
+  @Method()
+  async setFocusDismissButton() {
+    this.dismissButtonEl?.setFocus();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -129,7 +152,12 @@ export class CalcitePanel {
     const { dismiss, dismissible, textClose } = this;
 
     const dismissibleNode = dismissible ? (
-      <calcite-action aria-label={textClose} text={textClose} onClick={dismiss}>
+      <calcite-action
+        ref={(dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl)}
+        aria-label={textClose}
+        text={textClose}
+        onClick={dismiss}
+      >
         <calcite-icon scale="s" icon={ICONS.close} />
       </calcite-action>
     ) : null;
diff --git a/src/demos/panel/basic.html b/src/demos/panel/basic.html
index 066fd15f..86645e47 100644
--- a/src/demos/panel/basic.html
+++ b/src/demos/panel/basic.html
@@ -52,6 +52,9 @@ <h2>Dismissible Panel</h2>
           dismissiblePanel.addEventListener("calcitePanelDismissedChange", function() {
             console.log("calcitePanelDismiss event");
           });
+          setTimeout(function() {
+            dismissiblePanel.setDismissFocus();
+          }, 3000);
         </script>
 
         <div class="panel-container" dir="rtl">
@@ -72,7 +75,7 @@ <h3>With Header Actions</h3>
           </calcite-panel>
 
           <h3>Dismissible Panel</h3>
-          <calcite-panel dismissible id="dismissible-panel">
+          <calcite-panel dismissible>
             <div slot="header-content">Dismissible panel header</div>
             <p>X position reversed!</p>
           </calcite-panel>

From f81a7f18b3aaaa3c0d3dd552ac5af924b3d1eb9c Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Thu, 9 Jan 2020 13:39:42 -0800
Subject: [PATCH 2/6] review fixes

---
 src/components/calcite-panel/calcite-panel.e2e.ts | 12 ++++++++++++
 src/components/calcite-panel/calcite-panel.tsx    |  2 +-
 src/demos/panel/basic.html                        |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-panel/calcite-panel.e2e.ts b/src/components/calcite-panel/calcite-panel.e2e.ts
index 776ff0e4..9c92b1b0 100644
--- a/src/components/calcite-panel/calcite-panel.e2e.ts
+++ b/src/components/calcite-panel/calcite-panel.e2e.ts
@@ -51,4 +51,16 @@ describe("calcite-panel", () => {
       <div slot="${SLOTS.footer}">test Footer</div>
     </calcite-panel>
     `));
+
+  it("should have 'focusDismissButton' method", async () => {
+    const page = await setUpPage("<calcite-panel dismissible>test</calcite-panel>", {
+      withPeerDependencies: true
+    });
+
+    const panel = await page.find("calcite-panel");
+
+    const focusDismissButton = panel.callMethod("focusDismissButton");
+
+    expect(focusDismissButton).toBeInstanceOf(Promise);
+  });
 });
diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index e5011fcb..5868e28a 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -121,7 +121,7 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
 
   @Method()
-  async setFocusDismissButton() {
+  async focusDismissButton() {
     this.dismissButtonEl?.setFocus();
   }
 
diff --git a/src/demos/panel/basic.html b/src/demos/panel/basic.html
index f8b70a45..8e98531c 100644
--- a/src/demos/panel/basic.html
+++ b/src/demos/panel/basic.html
@@ -54,7 +54,7 @@ <h2>Dismissible Panel</h2>
             console.log("calcitePanelDismiss event");
           });
           setTimeout(function() {
-            dismissiblePanel.setDismissFocus();
+            dismissiblePanel.focusDismissButton();
           }, 3000);
         </script>
 

From f4228b0fce18f68ab1645bafe98167f905a42562 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Thu, 9 Jan 2020 16:28:55 -0800
Subject: [PATCH 3/6] review fixes

---
 src/components/calcite-panel/calcite-panel.e2e.ts |  6 +++---
 src/components/calcite-panel/calcite-panel.tsx    | 10 +++++++---
 src/demos/panel/basic.html                        |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/calcite-panel/calcite-panel.e2e.ts b/src/components/calcite-panel/calcite-panel.e2e.ts
index 9c92b1b0..678ef2fa 100644
--- a/src/components/calcite-panel/calcite-panel.e2e.ts
+++ b/src/components/calcite-panel/calcite-panel.e2e.ts
@@ -52,15 +52,15 @@ describe("calcite-panel", () => {
     </calcite-panel>
     `));
 
-  it("should have 'focusDismissButton' method", async () => {
+  it("should have 'setFocus' method", async () => {
     const page = await setUpPage("<calcite-panel dismissible>test</calcite-panel>", {
       withPeerDependencies: true
     });
 
     const panel = await page.find("calcite-panel");
 
-    const focusDismissButton = panel.callMethod("focusDismissButton");
+    const setFocus = panel.callMethod("setFocus");
 
-    expect(focusDismissButton).toBeInstanceOf(Promise);
+    expect(setFocus).toBeInstanceOf(Promise);
   });
 });
diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index 5868e28a..1b513d78 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -17,6 +17,8 @@ import { VNode } from "@stencil/core/internal";
 import { CalciteScale, CalciteTheme } from "../interfaces";
 import CalciteScrim from "../utils/CalciteScrim";
 
+type FocusElement = "dismiss-button";
+
 /**
  * @slot header-content - A slot for adding content in the center of the header.
  * @slot header-leading-content - A slot for adding a `calcite-action` on the leading side of the header.
@@ -84,7 +86,7 @@ export class CalcitePanel {
 
   @Element() el: HTMLCalcitePanelElement;
 
-  private dismissButtonEl: HTMLCalciteActionElement;
+  dismissButtonEl: HTMLCalciteActionElement;
 
   // --------------------------------------------------------------------------
   //
@@ -121,8 +123,10 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
 
   @Method()
-  async focusDismissButton() {
-    this.dismissButtonEl?.setFocus();
+  async setFocus(focusId?: FocusElement) {
+    if (focusId === "dismiss-button") {
+      this.dismissButtonEl?.setFocus();
+    }
   }
 
   // --------------------------------------------------------------------------
diff --git a/src/demos/panel/basic.html b/src/demos/panel/basic.html
index 8e98531c..89bc1fc3 100644
--- a/src/demos/panel/basic.html
+++ b/src/demos/panel/basic.html
@@ -54,7 +54,7 @@ <h2>Dismissible Panel</h2>
             console.log("calcitePanelDismiss event");
           });
           setTimeout(function() {
-            dismissiblePanel.focusDismissButton();
+            dismissiblePanel.setFocus("dismiss-button");
           }, 3000);
         </script>
 

From b2fc2fe183de0a7a6da25618e502425fc9dd3872 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Thu, 9 Jan 2020 16:30:46 -0800
Subject: [PATCH 4/6] rename type

---
 src/components/calcite-panel/calcite-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index 1b513d78..8ad36113 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -17,7 +17,7 @@ import { VNode } from "@stencil/core/internal";
 import { CalciteScale, CalciteTheme } from "../interfaces";
 import CalciteScrim from "../utils/CalciteScrim";
 
-type FocusElement = "dismiss-button";
+type FocusId = "dismiss-button";
 
 /**
  * @slot header-content - A slot for adding content in the center of the header.
@@ -123,7 +123,7 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
 
   @Method()
-  async setFocus(focusId?: FocusElement) {
+  async setFocus(focusId?: FocusId) {
     if (focusId === "dismiss-button") {
       this.dismissButtonEl?.setFocus();
     }

From 0ce724a361af5fbd0408836973fa2f02b82ee2fa Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Tue, 14 Jan 2020 16:12:19 -0800
Subject: [PATCH 5/6] fix test for review

---
 src/components/calcite-panel/calcite-panel.e2e.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/calcite-panel/calcite-panel.e2e.ts b/src/components/calcite-panel/calcite-panel.e2e.ts
index 678ef2fa..2deba137 100644
--- a/src/components/calcite-panel/calcite-panel.e2e.ts
+++ b/src/components/calcite-panel/calcite-panel.e2e.ts
@@ -57,10 +57,13 @@ describe("calcite-panel", () => {
       withPeerDependencies: true
     });
 
-    const panel = await page.find("calcite-panel");
-
-    const setFocus = panel.callMethod("setFocus");
+    const tagName = await page.evaluate(async () => {
+      const calcitePanel = document.querySelector("calcite-panel");
+      await calcitePanel.setFocus("dismiss-button");
+      const activeElement = calcitePanel.shadowRoot.activeElement;
+      return activeElement.tagName;
+    });
 
-    expect(setFocus).toBeInstanceOf(Promise);
+    expect(tagName).toBe("CALCITE-ACTION");
   });
 });

From 90a2b884bffb1b7b595e20321a3fc8160c0937e6 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Tue, 14 Jan 2020 16:26:27 -0800
Subject: [PATCH 6/6] add ability to focus on container as well.

---
 .../calcite-panel/calcite-panel.e2e.ts          | 17 ++++++++++++++++-
 src/components/calcite-panel/calcite-panel.tsx  |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/calcite-panel/calcite-panel.e2e.ts b/src/components/calcite-panel/calcite-panel.e2e.ts
index 2deba137..b14a07b1 100644
--- a/src/components/calcite-panel/calcite-panel.e2e.ts
+++ b/src/components/calcite-panel/calcite-panel.e2e.ts
@@ -52,7 +52,7 @@ describe("calcite-panel", () => {
     </calcite-panel>
     `));
 
-  it("should have 'setFocus' method", async () => {
+  it("should focus on close button", async () => {
     const page = await setUpPage("<calcite-panel dismissible>test</calcite-panel>", {
       withPeerDependencies: true
     });
@@ -66,4 +66,19 @@ describe("calcite-panel", () => {
 
     expect(tagName).toBe("CALCITE-ACTION");
   });
+
+  it("should focus on container", async () => {
+    const page = await setUpPage("<calcite-panel dismissible>test</calcite-panel>", {
+      withPeerDependencies: true
+    });
+
+    const tagName = await page.evaluate(async () => {
+      const calcitePanel = document.querySelector("calcite-panel");
+      await calcitePanel.setFocus();
+      const activeElement = calcitePanel.shadowRoot.activeElement;
+      return activeElement.tagName;
+    });
+
+    expect(tagName).toBe("ARTICLE");
+  });
 });
diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index 8ad36113..dff46693 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -88,6 +88,8 @@ export class CalcitePanel {
 
   dismissButtonEl: HTMLCalciteActionElement;
 
+  containerEl: HTMLElement;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -126,7 +128,10 @@ export class CalcitePanel {
   async setFocus(focusId?: FocusId) {
     if (focusId === "dismiss-button") {
       this.dismissButtonEl?.setFocus();
+      return;
     }
+
+    this.containerEl?.focus();
   }
 
   // --------------------------------------------------------------------------
@@ -225,6 +230,7 @@ export class CalcitePanel {
           onKeyUp={panelKeyUpHandler}
           tabIndex={dismissible ? 0 : -1}
           hidden={dismissible && dismissed}
+          ref={(containerEl) => (this.containerEl = containerEl)}
           class={classnames(CSS.container, {
             [CSS_UTILITY.rtl]: rtl
           })}