diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcChip.cy.tsx-custom-dismiss-label.png b/packages/react/cypress-image-diff-screenshots/baseline/IcChip.cy.tsx-custom-dismiss-label.png new file mode 100755 index 0000000000..690100144b Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcChip.cy.tsx-custom-dismiss-label.png differ diff --git a/packages/react/src/component-tests/IcChip/IcChip.cy.tsx b/packages/react/src/component-tests/IcChip/IcChip.cy.tsx index 3dd83e7245..d9fa864955 100644 --- a/packages/react/src/component-tests/IcChip/IcChip.cy.tsx +++ b/packages/react/src/component-tests/IcChip/IcChip.cy.tsx @@ -15,6 +15,7 @@ import { WithIcon, WithBadgeSlot, InAGGrid, + CustomDismissLabel, } from "./IcChipTestData"; import { HAVE_BEEN_CALLED_ONCE, @@ -148,6 +149,20 @@ describe("IcChip visual regression and a11y tests", () => { }); }); + it("should render dismissible chip with custom tooltip label", () => { + mount(); + + cy.checkHydrated("ic-chip#default-chip"); + + cy.findShadowEl("ic-chip#default-chip", "button").eq(0).focus(); + + cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "custom-dismiss-label", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + }); + }); + it("should render disabled chip", () => { mount(); diff --git a/packages/react/src/component-tests/IcChip/IcChipTestData.tsx b/packages/react/src/component-tests/IcChip/IcChipTestData.tsx index 6661b7fc0a..46dcec61be 100644 --- a/packages/react/src/component-tests/IcChip/IcChipTestData.tsx +++ b/packages/react/src/component-tests/IcChip/IcChipTestData.tsx @@ -146,6 +146,19 @@ export const Dismissible = () => { ); }; +export const CustomDismissLabel = () => { + return ( +
+ +
+ ); +}; + export const WithIcon = () => { return (
diff --git a/packages/react/src/stories/ic-chip.stories.mdx b/packages/react/src/stories/ic-chip.stories.mdx index f168a5e9da..c1a6801a0c 100644 --- a/packages/react/src/stories/ic-chip.stories.mdx +++ b/packages/react/src/stories/ic-chip.stories.mdx @@ -508,6 +508,7 @@ export const defaultArgs = { customColor: null, disabled: false, dismissible: false, + dismissLabel: "Dismiss", label: "Default", size: "default", transparentBackground: true, @@ -555,6 +556,7 @@ export const defaultArgs = { label={args.label} customColor={args.customColor} dismissible={args.dismissible} + dismissLabel={args.dismissLabel} disabled={args.disabled} size={args.size} variant={args.variant}