Merge pull request #31 from eBay/v11-touch-targets

feat: align touch target checks to latest WCAG guidance

Author: megan-woodruff

README.md

@@ -35,7 +35,7 @@ The plugin was developed by members of the accessibility and design teams at eBa
 
 **Future explorations**
 
-- [ ] Touch target revision (we are waiting for the WCAG updates to make the step aligned with the latest recommendations)
+- [X] Touch target revision 
 - [ ] Pointer gestures
 - [ ] Split between focus & reading order
 - [ ] Interactive elements step

package-lock.json

@@ -70,6 +70,8 @@ function Footer({ primaryAction, secondaryAction, routeName }) {
     updateState('gestures', {});
     updateState('gesturesTemp', null);
 
+    updateState('touchTargets', {});
+
     // make all layers visible
     sendToFigma('show-all-layers');
   };

previews/v11/include_banner.png

@@ -278,13 +278,13 @@ const getBase64FromHash = async (imagesScanned) => {
 };
 
 export default {
-  isEnterKey,
   capitalize,
   checkIfChildNameExists,
   checkTypeOfA11yLayer,
   frameExistsOrCreate,
   getBase64FromHash,
   hasNoImageFills,
+  isEnterKey,
   nameBeforePipe,
   sanitizeName,
   showAllLayers,

src/components/Footer.js

@@ -211,10 +211,10 @@ class AppState extends React.Component {
         const newPages = [...pages];
         const newStepsData = { ...stepsData };
 
-        if (status === 'add') {
-          const indexFound = pages.findIndex((p) => p.id === main.id);
-          const newPage = newPages[indexFound];
+        const indexFound = pages.findIndex((p) => p.id === main.id);
+        const newPage = newPages[indexFound];
 
+        if (status === 'add') {
           // make sure it's not already present
           if (newPage.stepsCompleted.includes(stepKey) === false) {
             newPage.stepsCompleted.push(stepKey);
@@ -224,6 +224,12 @@ class AppState extends React.Component {
               visible: true
             };
           }
+
+          newPage.stepsData[stepKey] = {
+            ...(newPage.stepsData[stepKey] || {}),
+            ...data[stepKey],
+            visible: true
+          };
         }
 
         // check if we have previous steps data
@@ -287,9 +293,7 @@ class AppState extends React.Component {
 
         const newTargetEntry = {
           id: targetId,
-          label: data.label,
-          name: data.name,
-          type: data.touchTargetType
+          name: data.name
         };
 
         this.setState({
@@ -382,6 +386,7 @@ class AppState extends React.Component {
 
     return (
       <Context.Provider
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
         value={{
           // global ui
           alertMsg,

src/constants/utilities.js

@@ -13,10 +13,10 @@
       "text": "Alternative text is announced by screen readers and describes the purpose, function, or content of an image.<br/><br/>Images that convey meaning are <em>informative</em> and require alt text. Images that do not convey meaning, or are non-functional and beside text that conveys their meaning are considered <em>decorative.</em>"
     },
     "Contrast": {
-      "text": "Text must have a contrast ratio of 4.5:1. Large text must have a contrast ratio of 3:1. Interactive and meaningful graphical elements must have a contrast ratio of 3:1.<br />Large text is 24px or greater, or 19px bold or greater. In CSS, bold text typically has font-weight:bold, or font-weight:700 or greater."
+      "text": "Text must have a contrast ratio of 4.5:1. Large text must have a contrast ratio of 3:1. Interactive and meaningful graphical elements must have a contrast ratio of 3:1."
     },
     "Touch target": {
-      "text": "Click or touch areas should be a minimum of 24px x 24px but many teams adhere to the standard native sizes: 44px x 44px for iOS and 48px x 48px for Android."
+      "text": "WCAG SC 2.5.8 Target Size defines the minimum area as 24px by 24px. Some teams prefer to use 44px x 44px for iOS and 48px x 48px for Android.<br/><br/>There are exceptions for undersize targets with sufficient spacing, links within sentences or blocks of text, or targets like pins on a map, or dots on a chart.<br/><br/>Use this step of <span style=\"font-style: italic;\">Include</span> as a tool to check where needed; it may not be necessary to annotate every target in every design."
     },
     "Text zoom": {
       "text": "Mobile devices allow users to customize text sizes. Ensure the layout will adapt to respect these user preferences."
@@ -42,10 +42,10 @@
       "text": "Alternative text is announced by screen readers and describes the purpose, function, or content of an image.<br/><br/>Images that convey meaning are <em>informative</em> and require alt text. Images that do not convey meaning, or are non-functional and beside text that conveys their meaning are considered <em>decorative.</em>"
     },
     "Contrast": {
-      "text": "Text must have a contrast ratio of 4.5:1. Large text must have a contrast ratio of 3:1. Interactive and meaningful graphical elements must have a contrast ratio of 3:1.<br />Large text is 24px or greater, or 19px bold or greater. In CSS, bold text typically has font-weight:bold, or font-weight:700 or greater."
+      "text": "Text must have a contrast ratio of 4.5:1. Large text must have a contrast ratio of 3:1. Interactive and meaningful graphical elements must have a contrast ratio of 3:1.<br /><br />Large text is 24px or greater, or 19px bold or greater. In CSS, bold text typically has font-weight:bold, or font-weight:700 or greater."
     },
     "Touch target": {
-      "text": "Click or touch areas should be a minimum of 24px x 24px but many teams adhere to the standard native sizes: 44px x 44px for iOS and 48px x 48px for Android."
+      "text": "WCAG SC 2.5.8 Target Size defines the minimum area as 24px by 24px, but allows exceptions for undersize targets with sufficient spacing, links within sentences or blocks of text, or targets like pins on a map, or dots on a chart.<br/><br/>Use this step of <span style=\"font-style: italic;\">Include</span> as a tool to check where needed; it may not be necessary to annotate every target in every design."
     },
     "Text zoom": {
       "text": "Users must be able to resize text at least 200% without loss of information. Enlarge the text in your design and consider how the content and layout is impacted.<br /><br />This step aligns with WCAG SC 1.4.4 Resize text"
@@ -60,4 +60,4 @@
       "text": "People may perceive colors differently, and may not be able to differentiate between some or all colors. Ensure a design does not rely only on color to convey meaning."
     }
   }
-}
+}

src/context/AppState.js

@@ -22,7 +22,6 @@ export default {
   ],
   a11yCheckboxLayers: [
     'Contrast Layer',
-    // 'Touch target Layer',
     'Text zoom Layer',
     'Responsive reflow Layer',
     'Color blindness Layer'

src/data/tips.json

@@ -3,7 +3,7 @@ import { figmaLayer, utils } from '../../constants';
 import { getOrCreateMainA11yFrame } from '../frame-helpers';
 
 export const add = (msg) => {
-  const { create, layerName, page, pageType } = msg;
+  const { create, layerName, page, pageType, existingData, stateKey } = msg;
 
   // main data and setup
   const { bounds, mainPageId, name } = page;
@@ -31,23 +31,27 @@ export const add = (msg) => {
     // if (mainFrame.children.length === 0) {
     //   mainFrame.remove();
     // }
-  } else if (layerExists === null && create === true) {
-    // create the layer frame
-    const layerFrame = figmaLayer.createTransparentFrame({
-      name: layerName,
-      height: 10,
-      width: 10
-    });
-
-    // update with id (for future scanning)
-    layerFrame.name = `${layerName} | ${layerFrame.id}`;
-    layerFrame.expanded = false;
-    layerFrame.visible = false;
-
-    layerId = layerFrame.id;
-
-    // add within main Accessibility layer
-    mainFrame.appendChild(layerFrame);
+  } else if (create) {
+    if (layerExists === null) {
+      // create the layer frame
+      const layerFrame = figmaLayer.createTransparentFrame({
+        name: layerName,
+        height: 10,
+        width: 10
+      });
+
+      // update with id (for future scanning)
+      layerFrame.name = `${layerName} | ${layerFrame.id}`;
+      layerFrame.expanded = false;
+      layerFrame.visible = false;
+
+      layerId = layerFrame.id;
+
+      // add within main Accessibility layer
+      mainFrame.appendChild(layerFrame);
+    } else {
+      layerId = layerExists;
+    }
   }
 
   // grab main page a11y scan was for
@@ -59,14 +63,18 @@ export const add = (msg) => {
   // update pagesData
   const stepKey = layerName.replace(/ Layer/g, '');
 
+  const updateData = { id: layerId };
+  if (existingData) {
+    updateData.existingData = existingData;
+  }
+
   figma.ui.postMessage({
     type: 'update-pages-data',
     data: {
       status,
       stepKey,
-      [stepKey]: {
-        id: layerId
-      },
+      stateKey,
+      [stepKey]: updateData,
       main: {
         id: mainFrame.id,
         name: saniName,

src/figma-code/config.js

@@ -69,7 +69,8 @@ export const noHeadings = (msg) => {
       status: 'add',
       stepKey: 'Headings',
       Headings: {
-        id: headingsFrame.id
+        id: headingsFrame.id,
+        existingData: {}
       },
       main: {
         id: mainFrame.id,
@@ -354,7 +355,8 @@ export const confirm = (msg) => {
       status: 'add',
       stepKey: 'Headings',
       Headings: {
-        id: headingsFrame.id
+        id: headingsFrame.id,
+        existingData: headings
       },
       main: {
         id: mainFrame.id,