feat(accordion-item): add setFocus

packages/calcite-components/src/components.d.ts

@@ -252,6 +252,10 @@ export namespace Components {
           * Specifies the size of the component inherited from the `calcite-accordion`.
          */
         "scale": Scale;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
     }
     interface CalciteAction {
         /**

packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots, hidden } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden, focusable } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, IDS, SLOTS } from "./resources";
 
@@ -20,6 +20,10 @@ describe("calcite-accordion-item", () => {
     slots("calcite-accordion-item", SLOTS);
   });
 
+  describe("is focusable", () => {
+    focusable("calcite-accordion-item");
+  });
+
   it("properly uses ARIA and roles", async () => {
     // this test covers a11y relationships not reported by axe-core/accessible test helper
 

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -6,6 +6,7 @@ import {
   h,
   Host,
   Listen,
+  Method,
   Prop,
   VNode,
 } from "@stencil/core";
@@ -23,6 +24,7 @@ import {
 import { CSS_UTILITY } from "../../utils/resources";
 import { getIconScale } from "../../utils/component";
 import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
+import { componentFocusable } from "../../utils/component";
 import { SLOTS, CSS, IDS } from "./resources";
 import { RequestedItem } from "./interfaces";
 
@@ -180,6 +182,7 @@ export class AccordionItem implements ConditionalSlotComponent {
               class={CSS.headerContent}
               id={IDS.sectionToggle}
               onClick={this.itemHeaderClickHandler}
+              ref={this.storeHeaderEl}
               role="button"
               tabindex="0"
             >
@@ -286,12 +289,31 @@ export class AccordionItem implements ConditionalSlotComponent {
 
   @Element() el: HTMLCalciteAccordionItemElement;
 
+  private headerEl: HTMLDivElement;
+
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+
+  /** Sets focus on the component. */
+  @Method()
+  async setFocus(): Promise<void> {
+    await componentFocusable(this.el);
+    this.headerEl.focus();
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
+  private storeHeaderEl = (el: HTMLDivElement): void => {
+    this.headerEl = el;
+  };
+
   /** handle clicks on item header */
   private itemHeaderClickHandler = (): void => this.emitRequestedItem();