Merge pull request #37 from eBay/v12-improvements

v12: Improvements for Landmark and more

.nvmrc

@@ -1 +1 @@
-18.13.0
+18.18.2

README.md

@@ -11,7 +11,7 @@ an accessibility annotation Figma plugin
 
 ## Intro
 
-<img alt="plugin version 11" src="previews/v11/include_banner.png" />
+<img alt="plugin version 12" src="previews/v12/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.
 
@@ -21,12 +21,12 @@ The plugin was developed by members of the accessibility and design teams at eBa
 
 **Near term bug fixes & improvements**
 
-- [ ] Add ability to edit landmarks
 - [ ] Scan for svg (alternative text)
 - [ ] Add images manually (alternative text)
 - [ ] Synchronize copy/paste, undo/redo between the plugin and Figma layers
 - [ ] Allow designer to annotate a section of a design
 - [ ] Add delete in multiple steps
+- [X] Add ability to edit landmarks (v12)
 - [X] Placing new arrow annotation below at end of previously placed arrow (v11)
 - [X] Touch target (v11)
 - [X] Updates for keyboard navigation (v10)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-include-accessibility-annotations",
-  "version": "11",
+  "version": "12",
   "description": "Include is a tool built to make annotating for accessibility (a11y) easier",
   "main": "code.js",
   "scripts": {

src/code.js

@@ -114,6 +114,11 @@ figma.ui.onmessage = async (msg) => {
     step.landmarks.add(msg);
   }
 
+  // update landmark type
+  if (type === 'update-landmark-type') {
+    step.landmarks.updateType(msg);
+  }
+
   // landmarks completed (annotation placement)
   if (type === 'completed-landmark') {
     step.landmarks.completed(msg);

src/components/Alert/index.js

@@ -7,7 +7,7 @@ import './styles.scss';
 function Alert({ icon = null, style = {}, text, type = 'info' }) {
   return (
     <div className={`alert ${type}`} style={style}>
-      {icon && <div className="mr2">{icon}</div>}
+      {icon && <div className="mr1">{icon}</div>}
 
       <p>{text}</p>
     </div>

src/components/Dropdown/index.js

@@ -9,8 +9,8 @@ import { SvgCheckSm, SvgDownCarrot } from '../../icons';
 import './styles.scss';
 
 function Dropdown(props) {
-  const { align = 'left', data, index, isOpened = false, onOpen } = props;
-  const { onSelect, type } = props;
+  const { align = 'left', data, disabledValues = [], index } = props;
+  const { isOpened = false, onOpen, onSelect, type } = props;
 
   // ui state
   const toggledValue = isOpened ? null : index;
@@ -20,6 +20,7 @@ function Dropdown(props) {
   const didSelect = (selectedType) => {
     // set new selection
     onSelect(selectedType, index);
+
     // close dropdown
     onOpen(toggledValue);
   };
@@ -45,27 +46,42 @@ function Dropdown(props) {
       </div>
 
       <ul className={`dropdown-options${alignClass}`}>
-        {data.map(({ id, value }) => (
-          <li key={id} className="flex-row-center relative">
-            {type === value && (
-              <div className="dropdown-option-selected">
-                <SvgCheckSm />
-              </div>
-            )}
-
-            <div
-              className="dropdown-option"
-              onClick={() => didSelect(value)}
-              onKeyDown={({ key }) => {
-                if (utils.isEnterKey(key)) didSelect(value);
-              }}
-              role="button"
-              tabIndex={isOpened ? 0 : -1}
+        {data.map(({ id, value }) => {
+          const disabled = disabledValues.includes(value);
+
+          return (
+            <li
+              key={id}
+              className={`flex-row-center relative${
+                disabled === true ? ' dropdown-option-disabled' : ''
+              }`}
             >
-              {value}
-            </div>
-          </li>
-        ))}
+              {type === value && (
+                <div className="dropdown-option-selected">
+                  <SvgCheckSm />
+                </div>
+              )}
+
+              <div
+                className="dropdown-option"
+                onClick={() => {
+                  if (disabled === true) return;
+
+                  didSelect(value);
+                }}
+                onKeyDown={({ key }) => {
+                  if (disabled === true) return;
+
+                  if (utils.isEnterKey(key)) didSelect(value);
+                }}
+                role="button"
+                tabIndex={isOpened ? 0 : -1}
+              >
+                {value}
+              </div>
+            </li>
+          );
+        })}
       </ul>
 
       <div
@@ -88,8 +104,10 @@ Dropdown.propTypes = {
   // required
   data: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      disabled: PropTypes.bool,
+      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+        .isRequired
     })
   ).isRequired,
   index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
@@ -99,6 +117,7 @@ Dropdown.propTypes = {
 
   // optional
   align: PropTypes.oneOf(['left', 'right']),
+  disabledValues: PropTypes.arrayOf(PropTypes.string),
   isOpened: PropTypes.bool
 };
 

src/components/Dropdown/styles.scss

@@ -81,6 +81,17 @@
     }
   }
 
+  .dropdown-option-disabled {
+    & .dropdown-option {
+      cursor: default;
+      opacity: 0.5;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
   .dropdown-option-selected {
     left: 5px;
     position: absolute;

src/figma-code/frame-helpers.js

@@ -4,6 +4,7 @@ import config from './config';
 function getMainA11yLayerName({ pageName, pageType }) {
   const saniName = utils.sanitizeName(pageName);
   const pageTypeCap = utils.capitalize(pageType);
+
   return `${saniName} ${config.a11ySuffix} | ${pageTypeCap}`;
 }
 

src/figma-code/steps/focus-grouping.js

@@ -111,9 +111,28 @@ export const add = (msg) => {
   // update with id (for future scanning)
   focusGroupFrame.name = `${focusGroupLayerName} | ${focusGroupFrame.id}`;
 
+  const focusGroupsLength = focusGroupFrame.children.length;
+  const currentGroupNum = focusGroupsLength + 1;
+  const isFirst = currentGroupNum === 1;
+
+  let xStart = 0;
+  let yStart = 0;
+
+  if (isFirst === false) {
+    // get last focus group
+    const lastLandmark = focusGroupFrame.children[focusGroupsLength - 1];
+    const { height, x, y } = lastLandmark;
+
+    // set new yStart below last landmark
+    xStart = x;
+    yStart = y + height;
+  }
+
   // create group overlay layer
   const rectNode = figmaLayer.createRectangle({
     name: focusGroupRectName,
+    x: xStart,
+    y: yStart,
     height: 100,
     width: 300,
     opacity: 0

src/figma-code/steps/landmarks.js

@@ -112,11 +112,28 @@ export const add = (msg) => {
   // update with id (for future scanning)
   landmarksFrame.name = `${landmarkLayerName} | ${landmarksFrame.id}`;
 
+  const landmarksLength = landmarksFrame.children.length;
+  const currentLandmarkNum = landmarksLength + 1;
+  const isFirst = currentLandmarkNum === 1;
+
+  let xStart = 0;
+  let yStart = 0;
+
+  if (isFirst === false) {
+    // get last landmark
+    const lastLandmark = landmarksFrame.children[landmarksLength - 1];
+    const { height, x, y } = lastLandmark;
+
+    // set new yStart below last landmark
+    xStart = x;
+    yStart = y + height;
+  }
+
   // create landmark layer
   const landmarkBlock = createTransparentFrame({
     name: `Landmark: ${landmark}`,
-    x: 0,
-    y: 0,
+    x: xStart,
+    y: yStart,
     width: 300,
     height: 100
   });
@@ -209,6 +226,48 @@ export const add = (msg) => {
   landmarkBlock.expanded = false;
 };
 
+export const updateType = (msg) => {
+  const { id, landmarkType, prevLandmarkType } = msg;
+
+  // get landmark
+  const landmarkNode = figma.getNodeById(id);
+
+  // prevent memory leak (if not found, early return)
+  if (landmarkNode === null) {
+    // let the user know an error occurred
+    figma.notify('Error occurred: please restart plugin if this continues.', {
+      error: true,
+      timeout: config.notifyTime
+    });
+
+    return;
+  }
+
+  const newType = landmarksTypesObj[landmarkType];
+  const prevType = landmarksTypesObj[prevLandmarkType];
+
+  // update landmark name
+  landmarkNode.name = `Landmark: ${landmarkType} | ${landmarkNode.id}`;
+
+  // get child landmark name
+  const landmarkName = landmarkNode.findOne(
+    (n) => n.name === `Landmark Name: ${prevType.label}`
+  );
+  if (landmarkName !== null) {
+    landmarkName.name = `Landmark Name: ${newType.label}`;
+    landmarkName.characters = newType.label;
+  }
+
+  // get child landmark area
+  const landmarkArea = landmarkNode.findOne(
+    (n) => n.name === `Landmark Area: ${prevLandmarkType}`
+  );
+
+  if (landmarkArea !== null) {
+    landmarkArea.name = `Landmark Area: ${landmarkType}`;
+  }
+};
+
 export const completed = (msg) => {
   const { page, pageType, landmarks = {} } = msg;
 
@@ -349,6 +408,7 @@ export const updateWithLabel = (msg) => {
 export default {
   noLandmarks,
   add,
+  updateType,
   completed,
   updateWithLabel
 };

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

@@ -1,12 +1,9 @@
 import { figmaLayer, utils } from '../../constants';
 import config from '../config';
-import {
-  getOrCreateMainA11yFrame,
-  getOrCreateMainAnnotationsFrame
-} from '../frame-helpers';
+import { getOrCreateMainA11yFrame } from '../frame-helpers';
 
 export const addArrow = (msg) => {
-  const { bounds, arrowType, name, page, pageId, pageType } = msg;
+  const { bounds, arrowType, name, pageId, pageType } = msg;
 
   const mainPageNode = figma.getNodeById(pageId);
 
@@ -36,10 +33,10 @@ export const addArrow = (msg) => {
   const { parent } = mainPageNode;
   const dims = { x, y, height, width };
   const mainFrame = utils.frameExistsOrCreate(parent.id, mainLayerName, dims);
-  const mainAnnotationsFrame = getOrCreateMainAnnotationsFrame({
-    mainFrame,
-    page
-  });
+  // const mainAnnotationsFrame = getOrCreateMainAnnotationsFrame({
+  //   mainFrame,
+  //   page
+  // });
 
   // does Reading order exists already?
   const readingOrderFrame = utils.frameExistsOrCreate(

src/pages/AltText.js

@@ -32,15 +32,15 @@ function AltText() {
   const hasImages = imagesData.length > 0;
 
   const onChange = (e, index) => {
-    const newImagesData = new Array(...imagesData);
+    const newImagesData = [...imagesData];
 
     // don't allow | or :
     newImagesData[index].altText = e.target.value.replace(/[|:]/g, '');
     updateState('imagesData', newImagesData);
   };
 
   const onTypeSelect = (type, index) => {
-    const newImagesData = new Array(...imagesData);
+    const newImagesData = [...imagesData];
     newImagesData[index].type = type;
 
     updateState('imagesData', newImagesData);

src/pages/FocusGrouping.js

@@ -100,7 +100,7 @@ function FocusGrouping() {
     });
 
     // update main state
-    const newGroupsArray = new Array(...groups);
+    const newGroupsArray = [...groups];
     newGroupsArray.pop();
     updateState('groups', newGroupsArray);
   };