chore(component-library): announce tooltip content when focusing tool…

…tip content
shopware · Feb 5, 2025 · c5471b3 · c5471b3
1 parent 5180945
commit c5471b3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/loud-donkeys-marry.md 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
@@ -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
@@ -17,7 +17,7 @@
       onMouseleave,
       onMousedown,
       onMouseup: () => setState({ isPressingTrigger: false }),
-      'aria-describedby': isVisible ? `mt-tooltip--${id}__tooltip` : undefined,
+      'aria-describedby': `mt-tooltip--${id}__tooltip`,
     }"
   />