Skip to content

Commit

Permalink
feat(Tooltip): add several ARIA attributes (#5282)
Browse files Browse the repository at this point in the history
This change adds several ARIA attributes along with `tooltipBodyId`
prop, so element relationships are better described.

This better aligns to the change made to vanilla earlier
(#3148 and #3476).

Fixes #3812.
  • Loading branch information
asudoh authored Feb 6, 2020
1 parent 4b9cc7c commit 45acec0
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 3 deletions.
4 changes: 2 additions & 2 deletions packages/react/src/components/Tooltip/Tooltip-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ storiesOf('Tooltip', module)
'default (bottom)',
() => (
<div style={{ marginTop: '2rem' }}>
<Tooltip {...props.withIcon()}>
<p>
<Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
<p id="tooltip-body">
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
Expand Down
16 changes: 15 additions & 1 deletion packages/react/src/components/Tooltip/Tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ class Tooltip extends Component {
*/
tooltipId: PropTypes.string,

/**
* The ID of the tooltip body content.
*/
tooltipBodyId: PropTypes.string,

/**
* Optional starting value for uncontrolled state
*/
Expand Down Expand Up @@ -369,6 +374,7 @@ class Tooltip extends Component {
`__carbon-tooltip_${Math.random()
.toString(36)
.substr(2)}`),
tooltipBodyId,
children,
className,
triggerClassName,
Expand Down Expand Up @@ -412,6 +418,7 @@ class Tooltip extends Component {
onMouseOut: this.handleMouse,
onFocus: this.handleMouse,
onBlur: this.handleMouse,
'aria-controls': !open ? undefined : tooltipId,
'aria-haspopup': 'true',
'aria-expanded': open,
'aria-describedby': open ? tooltipId : null,
Expand Down Expand Up @@ -469,7 +476,14 @@ class Tooltip extends Component {
onContextMenu={this.handleMouse}
role="tooltip">
<span className={`${prefix}--tooltip__caret`} />
{children}
<div
className={`${prefix}--tooltip__content`}
tabindex="-1"
role="dialog"
aria-describedby={tooltipBodyId}
aria-labelledby={triggerId}>
{children}
</div>
</div>
</FloatingMenu>
)}
Expand Down

0 comments on commit 45acec0

Please sign in to comment.