fix(Tooltip): ✅ aria-labels

src/components/Tooltip/Tooltip.js

@@ -446,19 +446,22 @@ class Tooltip extends Component {
       triggerClassName
     );
 
-    const ariaDescribedbyProps = !open
-      ? {}
-      : {
-          'aria-describedby': tooltipId,
-        };
-
     // if the user provides property `triggerText`,
     // then the button should use aria-labelledby to point to its id,
     // if the user doesn't provide property `triggerText`,
     // then they need to provide an aria-label via the `iconDescription` property.
-    const ariaProperties = triggerText
-      ? { 'aria-labelledby': triggerText }
-      : { 'aria-label': iconDescription };
+    const ariaProperties = {
+      'aria-haspopup': 'true',
+      'aria-expanded': open,
+      ...(triggerText
+        ? {
+            'aria-labelledby': triggerId,
+            'aria-describedby': triggerId,
+          }
+        : {
+            'aria-label': iconDescription,
+          }),
+    };
 
     const finalIcon = IconCustomElement ? (
       <IconCustomElement
@@ -484,22 +487,18 @@ class Tooltip extends Component {
       <>
         <ClickListener onClickOutside={this.handleClickOutside}>
           {showIcon ? (
-            <div className={triggerClasses}>
+            <div className={triggerClasses} id={triggerId}>
               {triggerText}
               <div
                 role="button"
-                id={triggerId}
                 className={`${prefix}--tooltip__trigger`}
                 tabIndex={tabIndex}
                 onClick={this.handleMouse}
                 onKeyDown={this.handleKeyPress}
                 onMouseOver={this.handleMouse}
                 onMouseOut={this.handleMouse}
                 onFocus={this.handleMouse}
-                onBlur={this.handleMouse}
-                aria-haspopup="true"
-                aria-expanded={open}
-                {...ariaDescribedbyProps}>
+                onBlur={this.handleMouse}>
                 {finalIcon}
               </div>
             </div>
@@ -518,9 +517,7 @@ class Tooltip extends Component {
               onMouseOut={this.handleMouse}
               onFocus={this.handleMouse}
               onBlur={this.handleMouse}
-              aria-haspopup="true"
-              aria-expanded={open}
-              {...ariaDescribedbyProps}>
+              {...ariaProperties}>
               {triggerText}
             </div>
           )}