refactor(tooltip): Use interactive standalone icon

src/components/Icons/StandaloneIcon/StandaloneIcon.modules.scss

@@ -1,12 +1,17 @@
 .interactive {
-  composes: noSpacing from '../../Spacing.modules.scss';
   composes: none from '../../Borders.modules.scss';
+  // Reset the text color because Safari tries to set its own color for buttons
+  composes: color from '../../Typography/Text/Text.modules.scss';
 
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  // FIXME: Without the 1px padding the icon gets clipped just barely. This is due to the odd sizing/positioning of
+  // the icon font. Can switch to the composes when using SVGs.
+  // composes: noSpacing from '../Spacing.modules.scss';
+  padding: 0 1px;
+  margin: 0;
 
+  appearance: none;
   background: none;
+  box-shadow: none;
 
   cursor: pointer;
 }

src/components/Tooltip/Tooltip.jsx

@@ -108,19 +108,15 @@ class Tooltip extends React.Component {
       <div {...safeRest(rest)} className={iconWrapperStyles.fixLineHeight}>
         {this.renderBubble(bubbleId, direction, this.state.open, children)}
 
-        <button
-          id={triggerId}
-          className={styles.trigger}
+        <StandaloneIcon
+          symbol="questionMarkCircle"
+          a11yText={getTriggerA11yText(connectedFieldLabel)}
           onClick={this.toggleBubble}
+          id={triggerId}
           aria-controls={bubbleId}
           aria-haspopup="true"
           aria-expanded={this.state.open ? 'true' : 'false'}
-        >
-          <StandaloneIcon
-            symbol="questionMarkCircle"
-            a11yText={getTriggerA11yText(connectedFieldLabel)}
-          />
-        </button>
+        />
       </div>
     )
   }

src/components/Tooltip/Tooltip.modules.scss

@@ -10,24 +10,6 @@ $bubble-triangle-height: 10px;
 $bubble-triangle-width: 7px;
 $bubble-triangle-position: $bubble-triangle-width + 5px;
 
-.trigger {
-  composes: none from '../Borders.modules.scss';
-  composes: color from '../Typography/Text/Text.modules.scss';
-
-  // FIXME: Without the 1px padding the icon gets clipped just barely. This is due to the odd sizing/positioning of
-  // the icon font. Can switch to the composes when using SVGs.
-  // composes: noSpacing from '../Spacing.modules.scss';
-  padding: 0 1px;
-
-  background: none;
-  box-shadow: none;
-
-  cursor: pointer;
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
 .bubble {
   composes: rounded from '../Borders.modules.scss';
 

src/components/Tooltip/__tests__/Tooltip.spec.jsx

@@ -14,7 +14,7 @@ describe('Tooltip', () => {
     shallow(<Tooltip {...overrides}>{children}</Tooltip>)
 
   const findBubble = tooltip => tooltip.find('[data-testid="bubble"]')
-  const findTrigger = tooltip => tooltip.find('button')
+  const findTrigger = tooltip => tooltip.find(StandaloneIcon)
   const toggleBubble = tooltip => findTrigger(tooltip).simulate('click')
 
   it('renders', () => {
@@ -26,9 +26,8 @@ describe('Tooltip', () => {
   it('has a trigger', () => {
     const tooltip = doShallow()
 
-    expect(findTrigger(tooltip)).toContainReact(
-      <StandaloneIcon symbol="questionMarkCircle" a11yText="Reveal additional information." />
-    )
+    expect(findTrigger(tooltip)).toHaveProp('symbol', 'questionMarkCircle')
+    expect(findTrigger(tooltip)).toHaveProp('a11yText', 'Reveal additional information.')
   })
 
   it('has small text in the bubble', () => {

src/components/Tooltip/__tests__/__snapshots__/Tooltip.spec.jsx.snap

@@ -22,7 +22,7 @@ exports[`Tooltip renders 1`] = `
     aria-controls="unknown-field_tooltip"
     aria-expanded="false"
     aria-haspopup="true"
-    class="trigger"
+    class="interactive"
     id="unknown-field_trigger"
   >
     <i