From cadffda20cba264635209717ae4d0dcb29dd59ae Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Sep 2024 12:37:02 -0400 Subject: [PATCH 1/5] fix(Tooltip): always add aria-hidden --- packages/react/src/TooltipV2/Tooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx index ab5c5fe6648..31a5415eecd 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} From fc41ed372a2d59843ea8bb81bba3469a0fabdaca Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Sep 2024 12:49:48 -0400 Subject: [PATCH 2/5] test(TooltipV2): add test for aria-hidden in description type --- packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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() 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() + 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() const triggerEL = getByRole('button') From 29d50df0348eb28a9ec3408221e6baca3db7c03b Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Fri, 27 Sep 2024 12:52:20 -0400 Subject: [PATCH 3/5] Create perfect-fishes-camp.md --- .changeset/perfect-fishes-camp.md | 5 +++++ 1 file changed, 5 insertions(+) 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 From 2c1f1fa0d54e91ea881f2760e19e0ec569978542 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Sep 2024 14:54:20 -0400 Subject: [PATCH 4/5] test(ActionMenu): adjust for aria-hidden tooltip --- packages/react/src/__tests__/ActionMenu.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx index 4b067fda8be..3de6b2c53dc 100644 --- a/packages/react/src/__tests__/ActionMenu.test.tsx +++ b/packages/react/src/__tests__/ActionMenu.test.tsx @@ -401,7 +401,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 () => { @@ -437,7 +437,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 () => { From a00eb057f0346414ed4da60fb18fb24a07c494b7 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Sep 2024 16:12:28 -0400 Subject: [PATCH 5/5] test(TextInput): update snapshot to account for aria-hidden tooltip --- .../react/src/__tests__/__snapshots__/TextInput.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) 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`] = `