changes for MSFT-259

Author: r0hit-gupta

src/shared/components/Tooltip/index.jsx

@@ -21,9 +21,11 @@ function Tooltip({
   suppressDiv,
   trigger,
   defaultVisible,
+  id,
 }) {
   return (
     <RCTooltip
+      id={id}
       placement={position}
       overlay={content}
       overlayClassName={className}
@@ -49,6 +51,7 @@ Tooltip.defaultProps = {
   position: 'top',
   className: '',
   content: '',
+  id: '',
   onTooltipHover: _.noop,
   placeArrow: _.noop,
   suppressDiv: false,
@@ -60,6 +63,7 @@ Tooltip.propTypes = {
   align: PT.shape({}),
   position: PT.string,
   children: PT.node.isRequired,
+  id: PT.string,
   className: PT.string,
   content: PT.node,
   onTooltipHover: PT.func,

src/shared/components/challenge-detail/Specification/SideBar/index.jsx

@@ -108,8 +108,8 @@ Final Review:
             </h3>
             <span styleName="link-like-paragraph tooltip-container">
               {reviewTypeTitle}
-              <Tooltip content={reviewTip} trigger={['hover', 'focus']}>
-                <div styleName="tctooltip" tabIndex="0" role="button">
+              <Tooltip id="review-tip" content={reviewTip} trigger={['hover', 'focus']}>
+                <div styleName="tctooltip" tabIndex="0" role="button" aria-describedBy="review-tip">
 ?
                 </div>
               </Tooltip>
@@ -119,8 +119,8 @@ Approval:
             </h3>
             <span styleName="link-like-paragraph tooltip-container">
               User Sign-Off
-              <Tooltip content={approvalTip} className={styles['tooltip-overlay']} trigger={['hover', 'focus']}>
-                <div styleName="tctooltip" tabIndex="0" role="button">
+              <Tooltip id="approval-tip" content={approvalTip} className={styles['tooltip-overlay']} trigger={['hover', 'focus']}>
+                <div styleName="tctooltip" tabIndex="0" role="button" aria-describedBy="approval-tip">
 ?
                 </div>
               </Tooltip>