Accessibility changes in Tooltip and Checkbox component

Author: shruti-14

src/lib/components/Tooltip/Tooltip.js

@@ -7,20 +7,19 @@ import positionTooltip from "../../helpers/positionTooltip.js";
 /*
   Renders an accessible element that displays a tooltip.
   Element can either be a link or not.
-  
+
   Usage:
     
     <Tooltip
       tooltipBody="This is some helper text to display in a tooltip"
       id="forgot-tooltip"
       text="Forgot something?"
     />
-  
-    Props:
 
+  Props:
     --REQUIRED--
-    text [String] - The text to display. Hovering over it will reveal the tooltip.
-    tooltipBody [String] - The text to be displayed in the tooltip
+    text [String] - Visible text (also acts as accessible label)
+    tooltipBody [String] - Tooltip content
 
     --OPTIONAL--
     classes [String] - Additional CSS classes that will be added to the control container div element.
@@ -49,67 +48,59 @@ const Tooltip = (props) => {
   const tooltipRef = useRef(null);
   const triggerClass = classnames("dfn-tooltip-trigger", classes);
 
-  const handleMouseEnter = (event) => {
+  const handleMouseEnter = () => {
     const currentTooltip = tooltipRef.current;
-    positionTooltip(currentTooltip, position);
-  };
-
-  const renderTriggerElement = () => {
-    if (link) {
-      return renderLink();
-    } else if (url) {
-      return renderAnchor();
-    } else {
-      return renderButton();
+    if (currentTooltip) {
+      positionTooltip(currentTooltip, position);
     }
   };
 
-  const renderAnchor = () => {
-    return (
-      <a
-        aria-labelledby={tooltipElementId}
-        className={triggerClass}
-        href={url}
-        onMouseEnter={handleMouseEnter}
-      >
-        {text}
-      </a>
-    );
-  };
+  const renderAnchor = () => (
+    <a
+      aria-describedby={tooltipElementId}
+      className={triggerClass}
+      href={url}
+      onMouseEnter={handleMouseEnter}
+    >
+      {text}
+    </a>
+  );
 
-  const renderButton = () => {
-    return (
-      <button
-        aria-labelledby={tooltipElementId}
-        className={triggerClass}
-        onClick={onClick}
-        onMouseEnter={handleMouseEnter}
-        type={buttonType}
-      >
-        {text}
-      </button>
-    );
-  };
+  const renderButton = () => (
+    <button
+      aria-describedby={tooltipElementId}
+      className={triggerClass}
+      onClick={onClick}
+      onMouseEnter={handleMouseEnter}
+      type={buttonType}
+    >
+      {text}
+    </button>
+  );
 
-  const renderLink = () => {
-    return (
-      <Link
-        aria-labelledby={tooltipElementId}
-        className={triggerClass}
-        onMouseEnter={handleMouseEnter}
-        to={link}
-      >
-        {text}
-      </Link>
-    );
+  const renderLink = () => (
+    <Link
+      aria-describedby={tooltipElementId}
+      className={triggerClass}
+      onMouseEnter={handleMouseEnter}
+      to={link}
+    >
+      {text}
+    </Link>
+  );
+
+  const renderTriggerElement = () => {
+    if (link) return renderLink();
+    if (url) return renderAnchor();
+    return renderButton();
   };
 
   return (
     <div className="dfn-tooltip">
       {renderTriggerElement()}
       <div
         className={classnames("dfn-tooltip-bubble", `tooltip-${position}`)}
-        id={`${id}-desc`}
+        id={tooltipElementId}
         ref={tooltipRef}
         role="tooltip"
       >

src/scss/styles.scss

@@ -217,17 +217,17 @@ a {
 
     &:focus ~ .control-indicator,
     &:hover ~ .control-indicator {
-      border-color: $blue;
+      border-color: $green-dark;
     }
 
     &:focus ~ .control-label,
     &:hover ~ .control-label {
-      color: $blue;
+      color: $green-dark;
     }
 
     &:checked:focus ~ .control-indicator,
     &:checked:hover ~ .control-indicator {
-      background-color: $blue;
+      background-color: $green-dark;
     }
 
     &.invalid ~ .control-indicator,

src/scss/variables.scss

@@ -3,6 +3,7 @@ $black: #000 !default;
 $blue: blue !default;
 $gray-light: #eee !default;
 $green: green !default;
+$green-dark: #397600;
 $muted: #767676 !default;
 $red: #ee0000 !default;
 $white: #fff !default;