feat(Tooltip): add several ARIA attributes (#5282)

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.

packages/react/src/components/Tooltip/Tooltip-story.js

@@ -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.

packages/react/src/components/Tooltip/Tooltip.js

@@ -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
  */
@@ -369,6 +374,7 @@ class Tooltip extends Component {
  `__carbon-tooltip_${Math.random()
  .toString(36)
  .substr(2)}`),
+ tooltipBodyId,
  children,
  className,
  triggerClassName,
@@ -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,
@@ -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>
  )}