From 45acec0b9f6e225b2b85c7c6c5513a7852725ee9 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Fri, 7 Feb 2020 07:26:52 +0900
Subject: [PATCH] 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.
---
 .../src/components/Tooltip/Tooltip-story.js      |  4 ++--
 packages/react/src/components/Tooltip/Tooltip.js | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
index af45fe898246..365986947235 100644
--- a/packages/react/src/components/Tooltip/Tooltip-story.js
+++ b/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.
diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
index 5a22adb2e107..993d91f98e77 100644
--- a/packages/react/src/components/Tooltip/Tooltip.js
+++ b/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>
         )}