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.
carbon-design-system · Feb 6, 2020 · 45acec0 · 45acec0
1 parent 4b9cc7c
commit 45acec0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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>
         )}