diff --git a/.changeset/loud-donkeys-marry.md b/.changeset/loud-donkeys-marry.md new file mode 100644 index 000000000..0d069d6b2 --- /dev/null +++ b/.changeset/loud-donkeys-marry.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +Announce tooltip content when focusing tooltip trigger diff --git a/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.spec.ts b/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.spec.ts index 753dedc3a..11c8391e8 100644 --- a/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.spec.ts +++ b/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.spec.ts @@ -27,8 +27,8 @@ describe("mt-tooltip", () => { // ACT & ASSERT expect(screen.queryByRole("tooltip", { name: "Tooltip" })).not.toBeInTheDocument(); - expect(screen.getByRole("button", { name: "Open tooltip" })).not.toHaveAttribute( - "aria-describedby", + expect(screen.getByRole("button", { name: "Open tooltip" })).toHaveAccessibleDescription( + "Tooltip", ); }); @@ -108,7 +108,7 @@ describe("mt-tooltip", () => { }, ); - it("does not announce the content of the tooltip when the tooltip is hidden", async () => { + it("does read out the tooltip content when focusing the trigger", async () => { // ARRANGE render(MtTooltip, { props: { @@ -123,10 +123,10 @@ describe("mt-tooltip", () => { await flushPromises(); // ACT & ASSERT - expect(screen.getByRole("button", { name: "Open tooltip" })).not.toHaveAccessibleDescription( + expect(screen.getByRole("button", { name: "Open tooltip" })).toHaveAccessibleDescription( "Tooltip", ); - expect(screen.getByRole("button", { name: "Open tooltip" })).not.toHaveAttribute( + expect(screen.getByRole("button", { name: "Open tooltip" })).toHaveAttribute( "aria-describedby", ); }); diff --git a/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue b/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue index 68cfc408f..dc081946b 100644 --- a/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue +++ b/packages/component-library/src/components/overlay/mt-tooltip/mt-tooltip.vue @@ -17,7 +17,7 @@ onMouseleave, onMousedown, onMouseup: () => setState({ isPressingTrigger: false }), - 'aria-describedby': isVisible ? `mt-tooltip--${id}__tooltip` : undefined, + 'aria-describedby': `mt-tooltip--${id}__tooltip`, }" />