Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(TooltipV2): always add aria-hidden #5041

5 changes: 5 additions & 0 deletions .changeset/perfect-fishes-camp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

fix(TooltipV2): always add aria-hidden
4 changes: 2 additions & 2 deletions packages/react/src/TooltipV2/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/__tests__/ActionMenu.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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:"
Expand Down
Loading