diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts index 6e532bbdb81..e7773bd9595 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts +++ b/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``); 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); }); }); diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 68f710da9c8..ccb4f667a31 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/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); + /** + * Made into a prop for testing purposes only + * + * @private + */ + messages = useT9n(); + //#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 ? ( {this.renderActionsEnd()}