feat(accordion-item): add title to expand icon

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

@@ -1,6 +1,16 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, renders, slots, hidden, themed, focusable, reflects, defaults } from "../../tests/commonTests";
+import {
+  accessible,
+  renders,
+  slots,
+  hidden,
+  themed,
+  focusable,
+  reflects,
+  defaults,
+  t9n,
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, IDS, SLOTS } from "./resources";
 
@@ -219,10 +229,16 @@ describe("calcite-accordion-item", () => {
     expect(headerContent.getAttribute("aria-expanded")).toBe("true");
   });
 
+  describe("translation support", () => {
+    t9n("calcite-accordion-item");
+  });
+
   it("should emit expanded/collapsed events when toggled", async () => {
+    const messages = await import("./assets/t9n/messages.json");
     const page = await newE2EPage();
     await page.setContent(html`<calcite-accordion-item heading="Test"></calcite-accordion-item>`);
     const item = await page.find("calcite-accordion-item");
+    const expandIcon = await page.find(`calcite-accordion-item >>> .${CSS.expandIcon}`);
 
     const expandSpy = await page.spyOnEvent("calciteAccordionItemExpand");
     const collapseSpy = await page.spyOnEvent("calciteAccordionItemCollapse");
@@ -232,11 +248,13 @@ describe("calcite-accordion-item", () => {
     expect(await item.getProperty("expanded")).toBe(true);
     expect(expandSpy).toHaveReceivedEventTimes(1);
     expect(collapseSpy).toHaveReceivedEventTimes(0);
+    expect(expandIcon.getAttribute("title")).toBe(messages.collapse);
 
     item.setProperty("expanded", false);
     await page.waitForChanges();
     expect(await item.getProperty("expanded")).toBe(false);
     expect(expandSpy).toHaveReceivedEventTimes(1);
     expect(collapseSpy).toHaveReceivedEventTimes(1);
+    expect(expandIcon.getAttribute("title")).toBe(messages.expand);
   });
 });

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

@@ -12,10 +12,12 @@ import { FlipContext, Position, Scale, SelectionMode, IconType, Appearance } fro
 import { IconNameOrString } from "../icon/interfaces";
 import type { Accordion } from "../accordion/accordion";
 import { useSetFocus } from "../../controllers/useSetFocus";
+import { useT9n } from "../../controllers/useT9n";
 import { Heading, HeadingLevel } from "../functional/Heading";
 import { SLOTS, CSS, IDS, ICONS } from "./resources";
 import { RequestedItem } from "./interfaces";
 import { styles } from "./accordion-item.scss";
+import T9nStrings from "./assets/t9n/messages.en.json";
 
 declare global {
   interface DeclareElements {
@@ -41,6 +43,13 @@ export class AccordionItem extends LitElement {
 
   private focusSetter = useSetFocus<this>()(this);
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @private
+   */
+  messages = useT9n<typeof T9nStrings>();
+
   //#endregion
 
   //#region State Properties
@@ -109,6 +118,9 @@ export class AccordionItem extends LitElement {
    */
   @property({ reflect: true }) scale: Scale;
 
+  /** Use this property to override individual strings used by the component. */
+  @property() messageOverrides?: typeof this.messages._overrides;
+
   //#endregion
 
   //#region Public Methods
@@ -293,8 +305,10 @@ export class AccordionItem extends LitElement {
   }
 
   override render(): JsxNode {
-    const { iconFlipRtl, heading, headingLevel } = this;
+    const { iconFlipRtl, heading, headingLevel, messages, expanded } = this;
     const dir = getElementDir(this.el);
+    const expandIconTitle = expanded ? messages.collapse : messages.expand;
+
     const iconStartEl = this.iconStart ? (
       <calcite-icon
         class={{ [CSS.icon]: true, [CSS.iconStart]: true }}
@@ -331,7 +345,7 @@ export class AccordionItem extends LitElement {
           {this.renderActionsStart()}
           <div
             aria-controls={IDS.section}
-            ariaExpanded={this.expanded}
+            ariaExpanded={expanded}
             class={CSS.headerContent}
             id={IDS.sectionToggle}
             onClick={this.itemHeaderClickHandler}
@@ -356,11 +370,12 @@ export class AccordionItem extends LitElement {
                   ? ICONS.chevronDown
                   : this.iconType === "caret"
                     ? ICONS.caretDown
-                    : this.expanded
+                    : expanded
                       ? ICONS.minus
                       : ICONS.plus
               }
               scale={getIconScale(this.scale)}
+              title={expandIconTitle}
             />
           </div>
           {this.renderActionsEnd()}