From 4da550ee52bcc8874ddae86e01e26ace64f48bf8 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:50:09 -0400
Subject: [PATCH] fix(TooltipV2): always add aria-hidden (#5041)

* fix(Tooltip): always add aria-hidden

* test(TooltipV2): add test for aria-hidden in description type

* Create perfect-fishes-camp.md

* test(ActionMenu): adjust for aria-hidden tooltip

* test(TextInput): update snapshot to account for aria-hidden tooltip
---
 .changeset/perfect-fishes-camp.md                            | 5 +++++
 packages/react/src/TooltipV2/Tooltip.tsx                     | 4 ++--
 packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx      | 4 ++++
 packages/react/src/__tests__/ActionMenu.test.tsx             | 4 ++--
 .../src/__tests__/__snapshots__/TextInput.test.tsx.snap      | 1 +
 5 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/perfect-fishes-camp.md

diff --git a/.changeset/perfect-fishes-camp.md b/.changeset/perfect-fishes-camp.md
new file mode 100644
index 00000000000..7bc8ee2b346
--- /dev/null
+++ b/.changeset/perfect-fishes-camp.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(TooltipV2): always add aria-hidden
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index 3f613d340a2..4c574664b31 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -328,8 +328,8 @@ export const Tooltip = React.forwardRef(
             {...rest}
             // Only need tooltip role if the tooltip is a description for supplementary information
             role={type === 'description' ? 'tooltip' : undefined}
-            // stop AT from announcing the tooltip twice when it is a label type because it will be announced with "aria-labelledby"
-            aria-hidden={type === 'label' ? true : undefined}
+            // stop AT from announcing the tooltip twice: when it is a label type it will be announced with "aria-labelledby",when it is a description type it will be announced with "aria-describedby"
+            aria-hidden={true}
             id={tooltipId}
             // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip
             onMouseEnter={openTooltip}
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index 0bf8c8b3149..a088914a114 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -51,6 +51,10 @@ describe('Tooltip', () => {
     const {getByText} = HTMLRender(<TooltipComponent type="label" />)
     expect(getByText('Tooltip text')).toHaveAttribute('aria-hidden', 'true')
   })
+  it('should render aria-hidden on the tooltip element when the tooltip is description type', () => {
+    const {getByText} = HTMLRender(<TooltipComponent type="description" />)
+    expect(getByText('Tooltip text')).toHaveAttribute('aria-hidden', 'true')
+  })
   it('should describe the trigger element by its tooltip when the tooltip type is description (by default)', () => {
     const {getByRole, getByText} = HTMLRender(<TooltipComponent />)
     const triggerEL = getByRole('button')
diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
index 5abc967ed55..8c8d372e403 100644
--- a/packages/react/src/__tests__/ActionMenu.test.tsx
+++ b/packages/react/src/__tests__/ActionMenu.test.tsx
@@ -402,7 +402,7 @@ describe('ActionMenu', () => {
       button.focus()
     })
 
-    expect(component.getByRole('tooltip')).toBeInTheDocument()
+    expect(component.getByRole('tooltip', {hidden: true})).toBeInTheDocument()
   })
 
   it('should open menu on menu anchor click and it is wrapped with tooltip v2', async () => {
@@ -438,7 +438,7 @@ describe('ActionMenu', () => {
       button.focus()
     })
 
-    expect(component.getByRole('tooltip')).toBeInTheDocument()
+    expect(component.getByRole('tooltip', {hidden: true})).toBeInTheDocument()
   })
 
   it('should pass the "id" prop from ActionMenu.Button to the HTML button', async () => {
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index f5f5c3e315b..e7d70033076 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -3401,6 +3401,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
       </span>
     </button>
     <span
+      aria-hidden={true}
       className="c6"
       data-direction="s"
       id=":rk:"