import React from 'react'
import { render, screen, waitFor } from '@testing-library/react'
import { Button } from '~components/ButtonV1'
import { Tooltip } from './index'
describe('', () => {
describe('Linking the tooltip to the inner element with aria-describedby', () => {
it('adds an accessible description when wrapping Kaizen Button', async () => {
render(
,
)
await waitFor(() => {
expect(screen.getByRole('button', { name: 'More info' })).toHaveAccessibleDescription(
'Tooltip popup description for Kaizen Button',
)
})
})
it("doesn't add an accessible description if the tooltip is inactive", async () => {
render(
,
)
await waitFor(() => {
expect(screen.queryByRole('tooltip')).toBe(null)
expect(screen.getByRole('button', { name: 'More info' })).not.toHaveAttribute(
'aria-describedby',
)
})
})
// Non-semantic elements without roles should not have aria-description on them.
// They won't read to all screen readers as expected and may be reported in Storybook's accessibility tab (which uses Axe under the hood)
it("doesn't add an accessible description when wrapping a non-semantic element", async () => {
const warn = vi.spyOn(console, 'warn').mockImplementation(vi.fn())
render(
Non semantic element
,
)
await waitFor(() => {
expect(screen.getByText('Non semantic element')).not.toHaveAttribute('aria-describedby')
expect(warn).toHaveBeenCalledWith(
' is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly.',
)
})
})
})
it('adds an accessible description when wrapping a semantic element', async () => {
render(
,
)
await waitFor(() => {
expect(screen.getByRole('textbox')).toHaveAccessibleDescription(
'Tooltip popup description for div',
)
})
})
})