-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tooltip): Add accessibility enhancements
Use aria-labelledby, aria-haspopup to connect the trigger and bubble content for screen readers
- Loading branch information
Showing
4 changed files
with
105 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,97 @@ | ||
| import React from "react"; | ||
| import { shallow, render } from "enzyme"; | ||
| import toJson from "enzyme-to-json"; | ||
|
|
||
| import Tooltip from "../Tooltip"; | ||
| import DecorativeIcon from "../../Icons/DecorativeIcon/DecorativeIcon"; | ||
| import Text from "../../Typography/Text/Text"; | ||
|
|
||
| describe("Tooltip", () => { | ||
| const defaultChildren = "Helper text"; | ||
| const randomId = "the-id"; | ||
| const doShallow = ( | ||
| overrides = {}, | ||
| children = defaultChildren, | ||
| id = randomId | ||
| ) => | ||
| import React from 'react' | ||
| import {shallow, render} from 'enzyme' | ||
| import toJson from 'enzyme-to-json' | ||
|
|
||
| import Tooltip from '../Tooltip' | ||
| import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon' | ||
| import Text from '../../Typography/Text/Text' | ||
|
|
||
| describe('Tooltip', () => { | ||
| const defaultChildren = 'Helper text' | ||
| const randomId = 'the-id' | ||
| const doShallow = (overrides = {}, children = defaultChildren, id = randomId) => | ||
| shallow( | ||
| <Tooltip {...overrides} id={id}> | ||
| {children} | ||
| </Tooltip> | ||
| ); | ||
| ) | ||
|
|
||
| const findBubbleElement = tooltip => tooltip.find("div").at(1); | ||
| const openBubble = tooltip => tooltip.find("button").simulate("click"); | ||
| const findBubbleElement = tooltip => tooltip.find('div').at(1) | ||
| const findTrigger = tooltip => tooltip.find('button') | ||
| const openBubble = tooltip => tooltip.find('button').simulate('click') | ||
|
|
||
| it("renders", () => { | ||
| const tooltip = render(<Tooltip id="the-id">Helper text</Tooltip>); | ||
| it('renders', () => { | ||
| const tooltip = render(<Tooltip id="the-id">Helper text</Tooltip>) | ||
|
|
||
| expect(toJson(tooltip)).toMatchSnapshot(); | ||
| }); | ||
| expect(toJson(tooltip)).toMatchSnapshot() | ||
| }) | ||
|
|
||
| it("has an id", () => { | ||
| const tooltip = doShallow({ id: "the-bubble-id" }); | ||
| openBubble(tooltip); | ||
| it('has an id', () => { | ||
| const tooltip = doShallow({}, 'Some text', 'the-bubble-id') | ||
| openBubble(tooltip) | ||
|
|
||
| expect(findBubbleElement(tooltip)).toHaveProp("id", "the-bubble-id"); | ||
| }); | ||
| expect(findBubbleElement(tooltip)).toHaveProp('id', 'the-bubble-id') | ||
| }) | ||
|
|
||
| it("has a trigger", () => { | ||
| const tooltip = doShallow(); | ||
| it('has a trigger', () => { | ||
| const tooltip = doShallow() | ||
|
|
||
| expect(tooltip.find("button")).toContainReact( | ||
| <DecorativeIcon symbol="questionMarkCircle" /> | ||
| ); | ||
| }); | ||
| expect(findTrigger(tooltip)).toContainReact(<DecorativeIcon symbol="questionMarkCircle" />) | ||
| }) | ||
|
|
||
| it("shows the bubble content", () => { | ||
| const tooltip = doShallow({}, "Some content"); | ||
| openBubble(tooltip); | ||
| it('shows the bubble content', () => { | ||
| const tooltip = doShallow({}, 'Some content') | ||
| openBubble(tooltip) | ||
|
|
||
| expect( | ||
| findBubbleElement(tooltip) | ||
| .find(Text) | ||
| .dive() | ||
| ).toHaveText("Some content"); | ||
| }); | ||
| ).toHaveText('Some content') | ||
| }) | ||
|
|
||
| it("has small text in the bubble", () => { | ||
| const tooltip = doShallow({}, "Some content"); | ||
| openBubble(tooltip); | ||
| it('has small text in the bubble', () => { | ||
| const tooltip = doShallow({}, 'Some content') | ||
| openBubble(tooltip) | ||
|
|
||
| expect(findBubbleElement(tooltip)).toContainReact( | ||
| <Text size="small">Some content</Text> | ||
| ); | ||
| }); | ||
| expect(findBubbleElement(tooltip)).toContainReact(<Text size="small">Some content</Text>) | ||
| }) | ||
|
|
||
| it("has a direction", () => { | ||
| let tooltip = doShallow(); | ||
| openBubble(tooltip); | ||
| it('has a direction', () => { | ||
| let tooltip = doShallow() | ||
| openBubble(tooltip) | ||
|
|
||
| expect(findBubbleElement(tooltip)).toHaveClassName("right"); | ||
| expect(findBubbleElement(tooltip)).toHaveClassName('right') | ||
|
|
||
| tooltip = doShallow({ direction: "left" }); | ||
| openBubble(tooltip); | ||
| tooltip = doShallow({direction: 'left'}) | ||
| openBubble(tooltip) | ||
|
|
||
| expect(findBubbleElement(tooltip)).toHaveClassName("left"); | ||
| }); | ||
| expect(findBubbleElement(tooltip)).toHaveClassName('left') | ||
| }) | ||
|
|
||
| it("passes additional attributes to the element", () => { | ||
| const tooltip = doShallow({ "data-some-attr": "some value" }); | ||
| describe('accessibility', () => { | ||
| it('connects the bubble message to the trigger button for screen readers', () => { | ||
| const tooltip = doShallow({}, 'Random text', 'random-id') | ||
|
|
||
| expect(tooltip).toHaveProp("data-some-attr", "some value"); | ||
| }); | ||
| expect(findBubbleElement(tooltip)).toHaveProp('id', 'random-id') | ||
| expect(findTrigger(tooltip)).toHaveProp('aria-labelledby', 'random-id') | ||
| expect(findTrigger(tooltip)).toHaveProp('aria-haspopup', 'true') | ||
| }) | ||
| }) | ||
|
|
||
| it("does not allow custom CSS", () => { | ||
| it('passes additional attributes to the element', () => { | ||
| const tooltip = doShallow({'data-some-attr': 'some value'}) | ||
|
|
||
| expect(tooltip).toHaveProp('data-some-attr', 'some value') | ||
| }) | ||
|
|
||
| it('does not allow custom CSS', () => { | ||
| const tooltip = doShallow({ | ||
| className: "my-custom-class", | ||
| style: { color: "hotpink" } | ||
| }); | ||
|
|
||
| expect(tooltip).not.toHaveProp("className", "my-custom-class"); | ||
| expect(tooltip).not.toHaveProp("style"); | ||
| }); | ||
| }); | ||
| className: 'my-custom-class', | ||
| style: {color: 'hotpink'}, | ||
| }) | ||
|
|
||
| expect(tooltip).not.toHaveProp('className', 'my-custom-class') | ||
| expect(tooltip).not.toHaveProp('style') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters