feat: setFocus on dismiss button method #740

src/components/calcite-panel/calcite-panel.e2e.ts

@@ -51,4 +51,34 @@ describe("calcite-panel", () => {
       <div slot="${SLOTS.footer}">test Footer</div>
     </calcite-panel>
     `));
+
+  it("should focus on close button", 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("dismiss-button");
+      const activeElement = calcitePanel.shadowRoot.activeElement;
+      return activeElement.tagName;
+    });
+
+    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");
+  });
 });

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";
@@ -7,6 +17,8 @@ import { VNode } from "@stencil/core/internal";
 import { CalciteScale, CalciteTheme } from "../interfaces";
 import CalciteScrim from "../utils/CalciteScrim";
 
+type FocusId = "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.
@@ -74,6 +86,10 @@ export class CalcitePanel {
 
   @Element() el: HTMLCalcitePanelElement;
 
+  dismissButtonEl: HTMLCalciteActionElement;
+
+  containerEl: HTMLElement;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -102,6 +118,22 @@ export class CalcitePanel {
     this.dismissed = true;
   };
 
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+
+  @Method()
+  async setFocus(focusId?: FocusId) {
+    if (focusId === "dismiss-button") {
+      this.dismissButtonEl?.setFocus();
+      return;
+    }
+
+    this.containerEl?.focus();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -129,7 +161,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;
@@ -193,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
           })}

src/demos/panel/basic.html

@@ -53,6 +53,9 @@ <h2>Dismissible Panel</h2>
           dismissiblePanel.addEventListener("calcitePanelDismissedChange", function() {
             console.log("calcitePanelDismiss event");
           });
+          setTimeout(function() {
+            dismissiblePanel.setFocus("dismiss-button");
+          }, 3000);
         </script>
 
         <div class="panel-container" dir="rtl">
@@ -73,7 +76,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>