refactor(modal, panel, popover)!: remove focusId param from setFocus method.

src/components/modal/modal.e2e.ts

@@ -317,7 +317,6 @@ describe("calcite-modal accessibility checks", () => {
     const createModalHTML = (contentHTML?: string, attrs?: string) =>
       `<calcite-modal open ${attrs}>${contentHTML}</calcite-modal>`;
 
-    const closeButtonFocusId = "close-button";
     const closeButtonTargetSelector = ".close";
     const focusableContentTargetClass = "test";
 
@@ -326,20 +325,13 @@ describe("calcite-modal accessibility checks", () => {
 
     it("focuses close button by default", async () =>
       focusable(createModalHTML(focusableContentHTML), {
-        focusId: closeButtonFocusId,
         shadowFocusTargetSelector: closeButtonTargetSelector
       }));
 
     it("focuses content if there is no close button", async () =>
       focusable(createModalHTML(focusableContentHTML, "close-button-disabled"), {
         focusTargetSelector: `.${focusableContentTargetClass}`
       }));
-
-    it.skip("can focus close button directly", async () =>
-      focusable(createModalHTML(focusableContentHTML), {
-        focusId: closeButtonFocusId,
-        shadowFocusTargetSelector: closeButtonTargetSelector
-      }));
   });
 
   it("has correct aria role/attribute", async () => {

src/components/modal/modal.tsx

@@ -12,7 +12,7 @@ import {
   VNode,
   Watch
 } from "@stencil/core";
-import { ensureId, focusElement, getSlotted } from "../../utils/dom";
+import { ensureId, focusFirstTabbable, getSlotted } from "../../utils/dom";
 import { Kind, Scale } from "../interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -28,7 +28,6 @@ import {
   connectFocusTrap,
   activateFocusTrap,
   deactivateFocusTrap,
-  focusFirstTabbable,
   updateFocusTrapElements
 } from "../../utils/focusTrapComponent";
 import {
@@ -381,20 +380,11 @@ export class Modal
    *
    * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
    * To focus on the close button, use the `close-button` focus ID.
-   *
-   * @param focusId
    */
   @Method()
-  async setFocus(focusId?: "close-button"): Promise<void> {
+  async setFocus(): Promise<void> {
     await componentLoaded(this);
-
-    const { closeButtonEl } = this;
-
-    if (closeButtonEl && focusId === "close-button") {
-      return focusElement(closeButtonEl);
-    }
-
-    focusFirstTabbable(this);
+    focusFirstTabbable(this.focusTrapEl);
   }
 
   /**

src/components/panel/panel.tsx

@@ -12,7 +12,7 @@ import {
   Watch
 } from "@stencil/core";
 import { CSS, ICONS, SLOTS } from "./resources";
-import { toAriaBoolean } from "../../utils/dom";
+import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom";
 import { Scale } from "../interfaces";
 import { HeadingLevel, Heading } from "../functional/Heading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
@@ -320,36 +320,11 @@ export class Panel
 
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
   @Method()
-  async setFocus(focusId?: "back-button" | "dismiss-button"): Promise<void> {
+  async setFocus(): Promise<void> {
     await componentLoaded(this);
-
-    const { backButtonEl, closeButtonEl, containerEl } = this;
-
-    if (focusId === "back-button") {
-      backButtonEl?.setFocus();
-      return;
-    }
-
-    if (focusId === "dismiss-button") {
-      closeButtonEl?.setFocus();
-      return;
-    }
-
-    if (backButtonEl) {
-      backButtonEl.setFocus();
-      return;
-    }
-
-    if (closeButtonEl) {
-      closeButtonEl.setFocus();
-      return;
-    }
-
-    containerEl?.focus();
+    focusFirstTabbable(this.containerEl);
   }
 
   /**

src/components/popover/popover.e2e.ts

@@ -720,19 +720,17 @@ describe("calcite-popover", () => {
     const createPopoverHTML = (contentHTML?: string, attrs?: string) =>
       `<calcite-popover open ${attrs} reference-element="ref">${contentHTML}</calcite-popover><button id="ref">Button</button>`;
 
-    const closeButtonFocusId = "close-button";
-
     const contentButtonClass = "my-button";
-    const contentHTML = `<button class="${contentButtonClass}">My Button</button>`;
+    const contentHTML = "Hello World!";
+    const buttonContentHTML = `<button class="${contentButtonClass}">My Button</button>`;
 
     it("should focus content by default", async () =>
-      focusable(createPopoverHTML(contentHTML), {
+      focusable(createPopoverHTML(buttonContentHTML), {
         focusTargetSelector: `.${contentButtonClass}`
       }));
 
     it("should focus close button", async () =>
       focusable(createPopoverHTML(contentHTML, "closable"), {
-        focusId: closeButtonFocusId,
         shadowFocusTargetSelector: `.${CSS.closeButton}`
       }));
   });

src/components/popover/popover.tsx

@@ -33,12 +33,11 @@ import {
   connectFocusTrap,
   activateFocusTrap,
   deactivateFocusTrap,
-  focusFirstTabbable,
   updateFocusTrapElements
 } from "../../utils/focusTrapComponent";
 
 import { guid } from "../../utils/guid";
-import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { focusFirstTabbable, queryElementRoots, toAriaBoolean } from "../../utils/dom";
 import {
   OpenCloseComponent,
   connectOpenCloseComponent,
@@ -385,23 +384,12 @@ export class Popover
 
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
   @Method()
-  async setFocus(focusId?: "close-button"): Promise<void> {
+  async setFocus(): Promise<void> {
     await componentLoaded(this);
-
-    const { closeButtonEl } = this;
-
-    if (focusId === "close-button" && closeButtonEl) {
-      forceUpdate(closeButtonEl);
-      closeButtonEl.setFocus();
-
-      return;
-    }
-
-    focusFirstTabbable(this);
+    forceUpdate(this);
+    focusFirstTabbable(this.focusTrapEl);
   }
 
   /**
@@ -552,7 +540,7 @@ export class Popover
   renderCloseButton(): VNode {
     const { messages, closable } = this;
     return closable ? (
-      <div class={CSS.closeButtonContainer}>
+      <div class={CSS.closeButtonContainer} key="close-button-container">
         <calcite-action
           class={CSS.closeButton}
           onClick={this.hide}
@@ -575,7 +563,7 @@ export class Popover
     ) : null;
 
     return headingNode ? (
-      <div class={CSS.header}>
+      <div class={CSS.header} key="header">
         {headingNode}
         {this.renderCloseButton()}
       </div>

src/tests/commonTests.ts

@@ -184,7 +184,11 @@ export async function hidden(componentTagOrHTML: TagOrHTML): Promise<void> {
 }
 
 interface FocusableOptions {
-  /** use this to pass an ID to setFocus() */
+  /**
+   * use this to pass an ID to setFocus()
+   *
+   * @deprecated components should no longer use a focusId parameter for setFocus()
+   */
   focusId?: string;
 
   /**

src/utils/dom.ts

@@ -1,6 +1,10 @@
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
+import { tabbable } from "tabbable";
 
+export const tabbableOptions = {
+  getShadowRoot: true
+};
 /**
  * This helper will guarantee an ID on the provided element.
  *
@@ -165,6 +169,15 @@ export async function focusElement(el: FocusableElement): Promise<void> {
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
 
+/**
+ * Helper to focus the first tabbable element.
+ *
+ * @param {HTMLElement} element The html element containing tabbable elements.
+ */
+export function focusFirstTabbable(element: HTMLElement): void {
+  (tabbable(element, tabbableOptions)[0] || element).focus();
+}
+
 interface GetSlottedOptions {
   all?: boolean;
   direct?: boolean;

src/utils/focusTrapComponent.ts

@@ -1,15 +1,6 @@
-import {
-  FocusTrap as _FocusTrap,
-  Options as FocusTrapOptions,
-  createFocusTrap,
-  FocusTrapTabbableOptions
-} from "focus-trap";
+import { FocusTrap as _FocusTrap, Options as FocusTrapOptions, createFocusTrap } from "focus-trap";
 import { FocusableElement, focusElement } from "./dom";
-import { tabbable } from "tabbable";
-
-const tabbableOptions: FocusTrapTabbableOptions = {
-  getShadowRoot: true
-};
+import { tabbableOptions } from "./dom";
 
 const trapStack: _FocusTrap[] = [];
 
@@ -92,15 +83,6 @@ export function deactivateFocusTrap(component: FocusTrapComponent): void {
   component.focusTrap?.deactivate();
 }
 
-/**
- * Helper to focus the first tabbable element within the FocusTrap component.
- *
- * @param {FocusTrapComponent} component The FocusTrap component.
- */
-export function focusFirstTabbable(component: FocusTrapComponent): void {
-  tabbable(component.focusTrapEl, tabbableOptions)[0]?.focus();
-}
-
 /**
  * Helper to update the element(s) that are used within the FocusTrap component.
  *