updated comments

src/code.js

@@ -45,7 +45,7 @@ let listenForAltText = false;
 console.clear();
 
 /* *****************************************************************************
- * Run once on Figma load
+ * run once on Figma load
  * this searches current figma page for any a11y layers, previous data created
  * https://www.figma.com/plugin-docs/api/figma/#once
  **************************************************************************** */

src/components/ErrorBoundary.js

@@ -5,7 +5,7 @@ import { analytics } from '../constants';
 // app state
 import Context from '../context';
 
-// Catch any React component issues and log to GA
+// catch any React component issues and log to GA
 class ErrorBoundary extends React.Component {
   componentDidCatch(error) {
     const { isProd, sessionId, currentUser } = this.context;

src/components/Footer.js

@@ -81,7 +81,7 @@ function Footer({ primaryAction = null, secondaryAction = null, routeName }) {
     const newStepsCompleted = [...stepsCompleted];
     const indexFound = stepsCompleted.indexOf(routeName);
 
-    // If not, add it as completed
+    // if not, add it as completed
     if (indexFound < 0) newStepsCompleted.push(routeName);
 
     sendToFigma('steps-completed', {

src/constants/analytics.js

@@ -21,7 +21,7 @@ export const logEvent = async (data) => {
       // fail silently
     }
   } else {
-    // Uncomment to debug analytics logging
+    // uncomment to debug analytics logging
     // console.log(
     //   'analytics event log call',
     //   `${baseURL}/${sessionId}/${currentUser}/${name}/${pageTitle}`

src/figma-code/frame-helpers.js

@@ -44,8 +44,8 @@ async function getOrCreateMainAnnotationsFrame({ mainFrame, page }) {
   // update with id (for future scanning)
   mainAnnotationsFrame.name = `${annotationLayerName} | ${mainAnnotationsFrame.id}`;
 
-  // Set up vertical auto-layout so that it looks okay
-  //   with any number of annotations added
+  // set up vertical auto-layout so that it looks okay
+  // with any number of annotations added
   mainAnnotationsFrame.fills = [
     { type: 'SOLID', color: colors.grey, opacity: 1 }
   ];
@@ -56,7 +56,7 @@ async function getOrCreateMainAnnotationsFrame({ mainFrame, page }) {
 }
 
 /**
- * Finds and removes existing annotation layer for the step using the layer name.
+ * finds and removes existing annotation layer for the step using the layer name.
  *
  * @param {object} mainAnnotationsFrame - the parent annotations frame
  * @param {string} layerName - the name of the annotations layer for the step
@@ -90,7 +90,7 @@ function createAnnotationFrame({ name }) {
     width: config.annotationWidth - 32
   });
 
-  // Give it vertical auto-layout formatting
+  // give it vertical auto-layout formatting
   annotationFrame.expanded = false;
   annotationFrame.layoutMode = 'VERTICAL';
   annotationFrame.counterAxisSizingMode = 'FIXED';
@@ -116,7 +116,7 @@ function createAnnotationFrameTitleText({ title }) {
 }
 
 /**
- * Creates and returns an annotation number label for use within an annotation
+ * creates and returns an annotation number label for use within an annotation
  * frame. Label is circular, with color background and white text.
  *
  * @param {number} number - The number to use for the annotation number label
@@ -158,7 +158,7 @@ function createAnnotationNumberFrame({ number, fillColor }) {
 }
 
 /**
- * Create annotation info frame with vertical auto-layout
+ * create annotation info frame with vertical auto-layout
  *
  * @param {string} name - desired name of the info frame
  * @returns Annotation info frame formatted with vertical auto-layout
@@ -177,7 +177,7 @@ function createAnnotationInfoFrame({ name }) {
 }
 
 /**
- * Creates a Figma frame with horizontal autolayout that contains two
+ * creates a Figma frame with horizontal autolayout that contains two
  * text nodes. The first text node is the bolded label, and the second
  * text nod is the value.
  *
@@ -218,7 +218,7 @@ function createAnnotationLabelValueRow({ rowName, label, value }) {
 }
 
 /**
- * Create inner annotation frame with horizontal auto-layout
+ * create inner annotation frame with horizontal auto-layout
  *
  * @param {string} annotationBlockName
  * @param {number} number - index of the frame

src/figma-code/initialize-page.js

@@ -26,7 +26,7 @@ export default async function initializePage({
     }
   );
 
-  // Initialize the designer checks frame on page creation
+  // initialize the designer checks frame on page creation
   designerChecks.createOrUpdateDesignerChecksFrame({
     page,
     pageType,
@@ -38,7 +38,7 @@ export default async function initializePage({
   // let figma creation catch up
   await utils.sleep(800);
 
-  // Initialize data for the page
+  // initialize data for the page
   figma.ui.postMessage({
     type: 'initialize-pages-data',
     data: {

src/figma-code/on-selection-change.js

@@ -109,7 +109,7 @@ export default (
       for (let i = 0; i < onlyTextNodes.length; i += 1) {
         const { id, characters, absoluteRenderBounds, name } = onlyTextNodes[i];
 
-        // Don't send the cursor focus text node
+        // don't send the cursor focus text node
         if (name !== 'cursor-focus-node') {
           // sanitize: remove double returns, and returns
           const title = characters

src/figma-code/onload-plugin.js

@@ -291,13 +291,13 @@ const isA11yLayer = async (children, childNode, name) => {
 
             // if we have an existing label, grab it from annotations frame
             if (gesturesAnnotationFrame) {
-              // Find annotation block for the id, if it exists
+              // find annotation block for the id, if it exists
               const gestureAnnotationBlock =
                 gesturesAnnotationFrame.children.find(
                   (annotationChild) => annotationChild.name.split('|')[1] === id
                 );
 
-              // Get the label node if it exists
+              // get the label node if it exists
               const labelNode = findDescendentOfFrame({
                 frame: gestureAnnotationBlock,
                 descendantNames: [

src/figma-code/steps/alt-text.js

@@ -180,7 +180,7 @@ const createAltTextAnnotationInfoFrame = ({ roleType, altText }) => {
     name: 'Alt text info'
   });
 
-  // Append the first row of alt text info
+  // append the first row of alt text info
   altTextInfoFrame.appendChild(
     createAnnotationLabelValueRow({
       rowName: 'Alt text',
@@ -189,7 +189,7 @@ const createAltTextAnnotationInfoFrame = ({ roleType, altText }) => {
     })
   );
 
-  // Append the second row of alt text info
+  // append the second row of alt text info
   altTextInfoFrame.appendChild(
     createAnnotationLabelValueRow({
       rowName: 'Role',
@@ -209,15 +209,15 @@ const createAltTextAnnotation = ({ number, id, roleType, altText }) => {
     id
   });
 
-  // Add the annotation number
+  // add the annotation number
   altTextAnnotationBlock.appendChild(
     createAnnotationNumberFrame({
       number,
       fillColor: colors.blue
     })
   );
 
-  // Add the annotation info
+  // add the annotation info
   altTextAnnotationBlock.appendChild(
     createAltTextAnnotationInfoFrame({
       roleType,
@@ -263,7 +263,7 @@ export const add = async (msg) => {
 
   const saniName = utils.sanitizeName(name);
 
-  // Check for existing annotation frame and remove if found
+  // check for existing annotation frame and remove if found
   findAndRemovePreviousAnnotationFrame({
     mainAnnotationsFrame,
     layerName: altTextAnnotationLayerName

src/figma-code/steps/landmarks.js

@@ -190,10 +190,10 @@ export const add = async (msg) => {
   // add label node to frame
   labelFrame.appendChild(labelNode);
 
-  // Add label frame to landmark block
+  // add label frame to landmark block
   landmarkBlock.appendChild(labelFrame);
 
-  // Add landmark block to greater landmarks frame
+  // add landmark block to greater landmarks frame
   landmarksFrame.appendChild(landmarkBlock);
 
   // de-selection of layer on Figma document

src/figma-code/steps/text-zoom.js

@@ -108,10 +108,10 @@ export const createClone = async (msg) => {
       if (typeof fontSize === 'number') {
         const { unit, value } = lineHeight;
 
-        // Web: scale everything by 2
+        // web: scale everything by 2
         let scaleFactor = 2;
 
-        // Native: scale based on current fontSize
+        // native: scale based on current fontSize
         if (pageType === 'native') {
           scaleFactor = 1.3;
           if (fontSize < 32) scaleFactor = 1.4;

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

@@ -113,7 +113,7 @@ export const checkTouchTargets = async (msg) => {
     )
   ).filter(Boolean);
 
-  // Rename the nodes based on how many we now have
+  // rename the nodes based on how many we now have
   validTargetNodes.forEach((targetNode, index) => {
     // eslint-disable-next-line no-param-reassign
     targetNode.name = `Touch target ${index + 1}`;
@@ -132,12 +132,12 @@ export const checkTouchTargets = async (msg) => {
     const radius1 = node1.width / 2.0;
     const radius2 = node2.width / 2.0;
 
-    // Calculate the distance between the centers of the two circles
+    // calculate the distance between the centers of the two circles
     const distanceX = node1.x - node2.x;
     const distanceY = node1.y - node2.y;
     const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
 
-    // If the distance is less than the sum of the radii, the circles intersect
+    // if the distance is less than the sum of the radii, the circles intersect
     return distance <= radius1 + radius2;
   }
 
@@ -149,20 +149,20 @@ export const checkTouchTargets = async (msg) => {
     const ry = node2.y;
     const { width, height } = node2;
 
-    // Check if circle's center is inside the rectangle
+    // check if circle's center is inside the rectangle
     if (rx <= x && x <= rx + width && ry <= y && y <= ry + height) {
       return true;
     }
 
-    // Find the closest point in the rectangle to the circle's center
+    // find the closest point in the rectangle to the circle's center
     const closestX = Math.max(rx, Math.min(x, rx + width));
     const closestY = Math.max(ry, Math.min(y, ry + height));
 
-    // Calculate the distance between the circle's center and this closest point
+    // calculate the distance between the circle's center and this closest point
     const distanceX = x - closestX;
     const distanceY = y - closestY;
 
-    // If the distance is less than the circle's radius, an intersection occurs
+    // if the distance is less than the circle's radius, an intersection occurs
     return distanceX * distanceX + distanceY * distanceY <= radius * radius;
   }
 
@@ -175,7 +175,7 @@ export const checkTouchTargets = async (msg) => {
     return doRectanglesIntersect(node1, node2);
   };
 
-  // In terms of WCAG compliance, this is the same on native and web
+  // in terms of WCAG compliance, this is the same on native and web
   const targetSize = 24;
 
   const checkOverlap = (nodes) => {
@@ -216,7 +216,7 @@ export const checkTouchTargets = async (msg) => {
 
     nodes.forEach((node) => {
       if (isUndersized(node)) {
-        // If the node is undersized, we need to see if it passes
+        // if the node is undersized, we need to see if it passes
         // via the spacing exception. We will set up a spacing-circle
         // that is 24x24 centered at the center of mass for the node
         const centerOfMass = {
@@ -240,7 +240,7 @@ export const checkTouchTargets = async (msg) => {
         nodesToCompare.push(compareNode);
       }
 
-      // No matter what, push the original node to the comparison list
+      // no matter what, push the original node to the comparison list
       nodesToCompare.push(node);
     });
 

src/pages/ComplexGestures.js

@@ -136,7 +136,7 @@ function ComplexGestures() {
         pageType
       });
     } else {
-      // Check that all gestures have annotations
+      // check that all gestures have annotations
       if (labelNeeded) {
         setAnnotateAttempted(true);
         return;
@@ -175,15 +175,15 @@ function ComplexGestures() {
     setLabelsTemp(newLabelsTemp);
   };
 
-  // Needs a label, and user tried to annotate without
+  // needs a label, and user tried to annotate without
   const showWarning = annotateAttempted && labelNeeded;
 
   React.useEffect(() => {
     checkForNeededLabels();
   }, [gestures]);
 
   const getPrimaryAction = () => {
-    // Gestures are set and none are in progress,
+    // gestures are set and none are in progress,
     // allow user to confirm and annotate
     if (gesturesAreSet || noGestures) {
       return {

src/pages/Headings.js

@@ -176,7 +176,7 @@ function Headings() {
   const getPrimaryAction = () => {
     if (headingsAreSet || noHeadings) {
       return {
-        onClick: onHeadingsConfirmed, // Create annotations
+        onClick: onHeadingsConfirmed, // create annotations
         completesStep: true
       };
     }

webpack.config.js

@@ -64,11 +64,11 @@ module.exports = (env, argv) => {
         {
           test: /\.s[ac]ss$/i,
           use: [
-            // Creates `style` nodes from JS strings
+            // creates `style` nodes from JS strings
             'style-loader',
-            // Translates CSS into CommonJS
+            // translates CSS into CommonJS
             'css-loader',
-            // Compiles Sass to CSS
+            // compiles Sass to CSS
             // 'sass-loader'
             {
               loader: 'sass-loader',