feat(tooltip): Update bubble wrapper to a div tag

telus · Oct 3, 2017 · 7c95a1f · 7c95a1f
1 parent 30795bf
commit 7c95a1f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
@@ -34,12 +34,14 @@ class Tooltip extends React.Component {
       this.state.open ? styles.showBubble : styles.hideBubble
     )
 
+    const ariaHidden = this.state.open ? 'false' : 'true'
+
     return (
-      <span className={bubbleClasses} id={id} role='tooltip'>
-        <Box spacing="padding" vertical={3} horizontal={4}>
+      <div className={bubbleClasses} id={id} role='tooltip' aria-hidden={ariaHidden}>
+        <Box spacing="padding" vertical={2} horizontal={3}>
           <Text size="small">{children}</Text>
         </Box>
-      </span>
+      </div>
     )
   }
 

diff --git a/src/components/Tooltip/Tooltip.md b/src/components/Tooltip/Tooltip.md
@@ -1,3 +1,6 @@
 ```
-<Tooltip id="the-id-1">This text describes the field.</Tooltip>
+<div style={{display: 'flex'}}>
+  <div style={{flex: 1}}></div>
+  <Tooltip id="the-id-1">This text describes the field.</Tooltip>
+</div>
 ```
diff --git a/src/components/Tooltip/__tests__/Tooltip.spec.jsx b/src/components/Tooltip/__tests__/Tooltip.spec.jsx
@@ -13,7 +13,7 @@ describe('Tooltip', () => {
     <Tooltip {...overrides} id={id}>{children}</Tooltip>
   )
 
-  const findBubbleElement = tooltip => tooltip.find('span')
+  const findBubbleElement = tooltip => tooltip.find('div').at(1)
   const openBubble = tooltip => tooltip.find('button').simulate('click')
 
   it('renders', () => {