Merge pull request #3158 from r0hit-gupta/msft259

MSFT-259

Author: sushilshinde

__tests__/shared/components/ProfilePage/BadgesModal/__snapshots__/index.jsx.snap

@@ -67,6 +67,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -91,6 +92,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -115,6 +117,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -139,6 +142,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -163,6 +167,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -191,6 +196,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -215,6 +221,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -239,6 +246,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -263,6 +271,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"
@@ -287,6 +296,7 @@ exports[`renders achievements correctly 1`] = `
               />
             }
             defaultVisible={false}
+            id=""
             onTooltipHover={[Function]}
             placeArrow={[Function]}
             position="top"

__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/ProgressBarTooltip.jsx.snap

@@ -18,6 +18,7 @@ exports[`Matches shallow shapshot 1`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="top"
@@ -54,6 +55,7 @@ exports[`Matches shallow shapshot 2`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="top"
@@ -90,6 +92,7 @@ exports[`Matches shallow shapshot 3`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="top"

__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/TrackAbbreviationTooltip.jsx.snap

@@ -11,6 +11,7 @@ exports[`Matches shallow shapshot 1`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="topLeft"
@@ -40,6 +41,7 @@ exports[`Matches shallow shapshot 2`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="topLeft"

__tests__/shared/components/challenge-listing/Tooltips/__snapshots__/UserAvatarTooltip.jsx.snap

@@ -18,6 +18,7 @@ exports[`Matches shallow shapshot 1`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="top"
@@ -56,6 +57,7 @@ exports[`Matches shallow shapshot 2`] = `
     />
   }
   defaultVisible={false}
+  id=""
   onTooltipHover={[Function]}
   placeArrow={[Function]}
   position="top"

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>