Merge pull request #29 from eBay/update-touch-target

Update: Touch target

Author: calebnance

README.md

@@ -11,7 +11,7 @@ an accessibility annotation Figma plugin
 
 ## Intro
 
-<img alt="plugin version 9" src="previews/v10/include_banner.png" />
+<img alt="plugin version 11" src="previews/v11/include_banner.png" />
 
 The eBay Include accessibility annotation Figma plugin is a tool to make annotating for accessibility (a11y) easier — easier for designers to spec and easier for developers to understand what is required.
 

previews/v11/include_banner.png

@@ -6,14 +6,26 @@ import SvgTouchTargets from '../icons/touch-target';
 // setup touch target options
 export default {
   min24: {
-    icon: <SvgTouchTargets.SvgMin48 />,
+    icon: <SvgTouchTargets.SvgMin48 size={24} />,
     id: '1',
     value: 'min24',
-    label: 'min 24px'
+    label: '24px<br />(WCAG min)'
+  },
+  min44: {
+    icon: <SvgTouchTargets.SvgMin48 size={54} />,
+    id: '2',
+    value: 'min44',
+    label: '44px<br />(iOS min)'
+  },
+  min48: {
+    icon: <SvgTouchTargets.SvgMin48 size={60} />,
+    id: '3',
+    value: 'min48',
+    label: '48px<br />(Android min)'
   },
   custom: {
     icon: <SvgTouchTargets.SvgCustom />,
-    id: '2',
+    id: '4',
     value: 'custom',
     label: 'custom'
   }

src/data/touch-target-types.js

@@ -47,7 +47,9 @@ export const addArrow = (msg) => {
   const arrowsLength = readingOrderFrame.children.length;
   const arrowNumber = arrowsLength + 1;
   const isFirst = arrowNumber === 1;
-  const arrowName = isFirst ? 'Start Arrow' : `Arrow ${arrowNumber}`;
+  const arrowName = isFirst
+    ? `Start Arrow | ${arrowType}`
+    : `Arrow ${arrowNumber} | ${arrowType}`;
 
   let xStart = 50;
   let yStart = 50;
@@ -57,10 +59,16 @@ export const addArrow = (msg) => {
     const lastChild = readingOrderFrame.children[arrowsLength - 1];
     const { absoluteBoundingBox } = lastChild;
 
+    // if | is found, get the prevType
+    const hasPipe = lastChild.name.includes('|');
+    const prevType = hasPipe
+      ? lastChild.name.split('|')[1].trim()
+      : 'downRight';
+
     let xDiff = 0;
     let yDiff = 0;
 
-    switch (arrowType) {
+    switch (prevType) {
       case 'downLeft':
         xDiff = figmaLayer.arrowSize;
         break;

src/figma-code/steps/reading-order.js

@@ -95,8 +95,10 @@ export const add = (msg) => {
   // set selection of new touch target layer
   figma.currentPage.selection = [targetNode];
 
+  const labelFormatted = label.replace(/<br \/>/g, ' ');
+
   // let the user know rectangle has been added
-  figma.notify(`${label} overlay added successfully!`, {
+  figma.notify(`${labelFormatted} overlay added successfully!`, {
     timeout: config.notifyTime
   });
 
@@ -132,6 +134,14 @@ export const checkTouchTargets = (msg) => {
     return overlapX && overlapY;
   };
 
+  const tooSmall = (nodeId) => {
+    const node = figma.getNodeById(nodeId);
+
+    const isTooSmall = node.width < 24 || node.height < 24;
+
+    return isTooSmall;
+  };
+
   const checkOverlap = (nodes) => {
     const overlappingNodes = [];
 
@@ -155,13 +165,31 @@ export const checkTouchTargets = (msg) => {
     return overlappingNodes;
   };
 
+  const checkMinSize = (nodes) => {
+    const tooSmallNodes = [];
+
+    // check if any nodes are too small
+    for (let i = 0; i < nodes.length; i += 1) {
+      const node = nodes[i];
+
+      // check if nodes overlap
+      if (tooSmall(node)) {
+        tooSmallNodes.push(node);
+      }
+    }
+
+    return tooSmallNodes;
+  };
+
   const overlaps = checkOverlap(Object.keys(touchTargets));
+  const tooSmallNodes = checkMinSize(Object.keys(touchTargets));
 
   // send message response back to plugin frontend (ui.js)
   figma.ui.postMessage({
     type: 'touch-targets-checked',
     data: {
-      overlapsFound: overlaps
+      overlapsFound: overlaps,
+      tooSmallFound: tooSmallNodes
     }
   });
 };

src/figma-code/steps/touch-target.js

@@ -1,11 +1,26 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 
-function SvgMin48() {
+function SvgMin48({ size }) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 60 60"
+      fill="none"
+    >
       <circle cx="30.25" cy="30" r="12" fill="#000" />
     </svg>
   );
 }
 
+SvgMin48.defaultProps = {
+  size: 60
+};
+
+SvgMin48.propTypes = {
+  size: PropTypes.number
+};
+
 export default React.memo(SvgMin48);

src/icons/touch-target/SvgMin48.js

@@ -5,6 +5,7 @@ import { utils } from '../constants';
 import {
   Alert,
   AnnotationStepPage,
+  BannerSuccess,
   EmptyStepSelection,
   HeadingStep
 } from '../components';
@@ -61,7 +62,7 @@ function TouchTarget() {
 
   // local state
   const [checkedOverlap, setCheckedOverlap] = React.useState(false);
-  const [overlaps, setOverlaps] = React.useState([]);
+  const [errors, setErrorsFound] = React.useState({});
   const [noTargets, setNoTargets] = React.useState(defaultNoTargets);
 
   const onEmptySelected = () => {
@@ -133,13 +134,25 @@ function TouchTarget() {
 
     // only listen for this response type on this step
     if (type === 'touch-targets-checked') {
-      const { overlapsFound } = data;
+      const { overlapsFound, tooSmallFound } = data;
 
-      setOverlaps(overlapsFound);
+      const newErrors = {};
+      overlapsFound.forEach((id) => {
+        newErrors[id] = { id, type: 'overlap' };
+      });
+
+      tooSmallFound.forEach((id) => {
+        newErrors[id] = { id, type: 'too-small' };
+      });
+
+      setErrorsFound(newErrors);
 
       // no issues found
-      if (overlapsFound.length === 0) {
+      if (Object.keys(newErrors).length === 0) {
         setCheckedOverlap(true);
+      } else {
+        // scroll to bottom
+        utils.scrollToBottomOfAnnotationStep();
       }
     }
   };
@@ -154,7 +167,7 @@ function TouchTarget() {
     };
   }, []);
 
-  const checkText = overlaps.length > 0 ? 'Re-check' : 'Check';
+  const checkText = Object.keys(errors).length > 0 ? 'Re-check' : 'Check';
 
   return (
     <AnnotationStepPage
@@ -180,12 +193,7 @@ function TouchTarget() {
       <React.Fragment>
         <HeadingStep
           number={1}
-          text="Check if there are any small elements that need to have the touch target marked up (e.g. an icon without background)."
-        />
-
-        <HeadingStep
-          number={2}
-          text="Add any additional annotation for elements to be regarded as one area (e.g. an image + CTA tile)."
+          text="Identify areas that need touch target annotations."
         />
 
         {!targetsAreSet && (
@@ -197,7 +205,51 @@ function TouchTarget() {
           />
         )}
 
-        {overlaps.length > 0 && (
+        {noTargets === false && (
+          <div className="button-group" role="radiogroup">
+            {targetTypesArray.map((type) => {
+              const { label, icon } = touchTargetsTypes[type];
+
+              const onClick = () => {
+                onAddTouchTarget(type);
+              };
+
+              return (
+                <div key={label} className="container-selection-button">
+                  <div
+                    className="selection-button"
+                    onClick={onClick}
+                    onKeyDown={(e) => {
+                      if (utils.isEnterKey(e.key)) onClick();
+                    }}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <div>{icon}</div>
+                  </div>
+
+                  <div
+                    className="selection-button-label"
+                    dangerouslySetInnerHTML={{ __html: label }}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {targetsArray.length > 1 && (
+          <React.Fragment>
+            <div className="spacer1" />
+            <HeadingStep number={2} text="Check the touch points" />
+          </React.Fragment>
+        )}
+
+        {checkedOverlap === true && Object.keys(errors).length === 0 && (
+          <BannerSuccess text="All touch points meet accessibility criteria" />
+        )}
+
+        {Object.keys(errors).length > 0 && (
           <React.Fragment>
             <Alert
               icon={<SvgWarning />}
@@ -210,15 +262,21 @@ function TouchTarget() {
 
             <HeadingStep number={3} text="Fix the issues" />
 
-            {targetsArray.map((key) => {
-              const { id, type } = touchTargets[key];
-              const { label: labelType } = touchTargetsTypes[type];
+            {targetsArray.map((key, index) => {
+              const { id } = touchTargets[key];
+              const num = index + 1;
 
               // only show issues
-              if (overlaps.includes(key) === false) {
+              if (Object.keys(errors).includes(key) === false) {
                 return null;
               }
 
+              const { type } = errors[key];
+
+              const Icon =
+                type === 'overlap'
+                  ? SvgTouchTarget.SvgOverlap
+                  : SvgTouchTarget.SvgResize;
               const onClick = () => zoomTo([key], true);
 
               return (
@@ -232,8 +290,8 @@ function TouchTarget() {
                     role="button"
                     tabIndex="0"
                   >
-                    <SvgTouchTarget.SvgOverlap />
-                    <div className="touch-target-type">{`Touch target (${labelType})`}</div>
+                    <Icon />
+                    <div className="ml1">{`${num} Touch target`}</div>
                   </div>
 
                   <div
@@ -257,40 +315,6 @@ function TouchTarget() {
             <div className="divider" />
           </React.Fragment>
         )}
-
-        {noTargets === false && (
-          <React.Fragment>
-            <div className="spacer2" />
-
-            <div className="button-group" role="radiogroup">
-              {targetTypesArray.map((type) => {
-                const { label, icon } = touchTargetsTypes[type];
-
-                const onClick = () => {
-                  onAddTouchTarget(type);
-                };
-
-                return (
-                  <div key={label} className="container-selection-button">
-                    <div
-                      className="selection-button"
-                      onClick={onClick}
-                      onKeyDown={(e) => {
-                        if (utils.isEnterKey(e.key)) onClick();
-                      }}
-                      role="button"
-                      tabIndex={0}
-                    >
-                      <div>{icon}</div>
-                    </div>
-
-                    <div className="selection-button-label">{label}</div>
-                  </div>
-                );
-              })}
-            </div>
-          </React.Fragment>
-        )}
       </React.Fragment>
     </AnnotationStepPage>
   );