feat(standalone-icon): Expand the touch area of small interactive ico…

…ns to be at least 32px

src/components/Icons/StandaloneIcon/StandaloneIcon.jsx

@@ -7,6 +7,16 @@ import Icon from '../Icon/Icon'
 
 import styles from './StandaloneIcon.modules.scss'
 
+const mobileDeviceTapArea = 32 // https://www.w3.org/TR/mobile-accessibility-mapping/#touch-target-size-and-spacing
+const touchAreaStyles = iconSize => {
+  const length = (mobileDeviceTapArea - iconSize) / 2
+
+  return {
+    padding: `${length}px`,
+    margin: `-${length}px`,
+  }
+}
+
 /**
  * An icon that has meaning within the context of the page, which should be communicated to screen readers.
  *
@@ -21,8 +31,15 @@ const StandaloneIcon = ({ symbol, variant, size, onClick, a11yText, ...rest }) =
   }
 
   if (onClick) {
+    const needsExpandedTouchArea = size < mobileDeviceTapArea
+
     return (
-      <button {...safeRest(rest)} onClick={onClick} className={styles.interactive}>
+      <button
+        {...safeRest(rest)}
+        onClick={onClick}
+        className={styles.interactive}
+        style={needsExpandedTouchArea && touchAreaStyles(size)}
+      >
         <Icon {...iconProps} />
       </button>
     )

src/components/Icons/StandaloneIcon/StandaloneIcon.md

@@ -2,10 +2,13 @@
 
 Use the `onClick` prop to create an accessible interactive icon.
 
+Interactive icons will have a minimum click/tap area of about 32px, or 8-10mm, to ensure that they can be touched eacily on 
+mobile devices. Take care not to place other elements too close to interactive icons, as the touch area could overlap. 
+
 ```
 <StandaloneIcon 
   symbol="spyglass" 
-  size={48}
+  size={24}
   a11yText="Search this site." 
   onClick={() => console.log("searching...")}
 />

src/components/Icons/StandaloneIcon/__tests__/StandaloneIcon.spec.jsx

@@ -78,6 +78,26 @@ describe('StandaloneIcon', () => {
       expect(onClickMock).toHaveBeenCalled()
     })
 
+    describe('touch area', () => {
+      it('expands the touch area to be large enough for a finger when the icon is small', () => {
+        let interactiveIcon = doShallow({ size: 16 })
+        expect(interactiveIcon).toHaveStyle('padding', '8px')
+        expect(interactiveIcon).toHaveStyle('margin', '-8px')
+
+        interactiveIcon = doShallow({ size: 24 })
+
+        expect(interactiveIcon).toHaveStyle('padding', '4px')
+        expect(interactiveIcon).toHaveStyle('margin', '-4px')
+      })
+
+      it('does not expand the touch area when the icon is large', () => {
+        const interactiveIcon = doShallow({ size: 48 })
+
+        expect(interactiveIcon).not.toHaveStyle('padding')
+        expect(interactiveIcon).not.toHaveStyle('margin')
+      })
+    })
+
     it('passes additional attributes to the button element', () => {
       const interactiveIcon = doShallow({
         id: 'the-interactiveIcon',
@@ -95,7 +115,7 @@ describe('StandaloneIcon', () => {
       })
 
       expect(interactiveIcon).not.toHaveProp('className', 'my-custom-class')
-      expect(interactiveIcon).not.toHaveProp('style')
+      expect(interactiveIcon).not.toHaveStyle('color', 'hotpink')
     })
   })
 })

src/components/Icons/StandaloneIcon/__tests__/__snapshots__/StandaloneIcon.spec.jsx.snap

@@ -3,6 +3,7 @@
 exports[`StandaloneIcon Interactive StandaloneIcon renders 1`] = `
 <button
   class="interactive"
+  style="padding:4px;margin:-4px"
 >
   <i
     aria-label="Some text for the screen readers."

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

@@ -24,6 +24,7 @@ exports[`Tooltip renders 1`] = `
     aria-haspopup="true"
     class="interactive"
     id="unknown-field_trigger"
+    style="padding:4px;margin:-4px"
   >
     <i
       aria-label="Reveal additional information."