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()}