Merge pull request #42 from eBay/v14-add-images-and-movements

v14: Add Images and Movements

README.md

@@ -11,7 +11,7 @@ an accessibility annotation Figma plugin
 
 ## Intro
 
-<img alt="plugin version 12" src="previews/v12/include_banner.png" />
+<img alt="plugin version 14" src="previews/v14/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,11 +21,11 @@ The plugin was developed by members of the accessibility and design teams at eBa
 
 **Near term bug fixes & improvements**
 
-- [ ] 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
+- [ ] Scan for svg (alternative text)
+- [X] Add images manually in Alternative text step (v14)
 - [X] Add ability to edit landmarks (v12)
 - [X] Placing new arrow annotation below at end of previously placed arrow (v11)
 - [X] Touch target (v11)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-include-accessibility-annotations",
-  "version": "12",
+  "version": "14",
   "description": "Include is a tool built to make annotating for accessibility (a11y) easier",
   "main": "code.js",
   "scripts": {
@@ -64,11 +64,11 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1"
   },
-  "engines": {
-    "node": ">=18.18.2"
-  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "none"
+  },
+  "engines": {
+    "node": ">=18.18.2"
   }
 }

src/code.js

@@ -37,6 +37,9 @@ let currentPageID = null;
 let listenForHeadings = false;
 let defaultHeadingType = 2;
 
+// selection for alt text listener
+let listenForAltText = false;
+
 // clear console every time plugin opens
 // eslint-disable-next-line no-console
 console.clear();
@@ -75,7 +78,12 @@ figma.once('run', async () => {
  * https://www.figma.com/plugin-docs/api/properties/figma-on/#selectionchange
  **************************************************************************** */
 figma.on('selectionchange', () => {
-  onSelectionChange(pageSelected, listenForHeadings, defaultHeadingType);
+  onSelectionChange(
+    pageSelected,
+    listenForHeadings,
+    defaultHeadingType,
+    listenForAltText
+  );
 });
 
 /* *****************************************************************************
@@ -178,14 +186,35 @@ figma.ui.onmessage = async (msg) => {
     step.altText.add(msg);
   }
 
+  // set listening flag for alt text
+  if (type === 'alt-text-listening-flag') {
+    const { listen } = msg;
+
+    listenForAltText = listen;
+  }
+
+  // add image manually (alt text)
+  if (type === 'add-image-manually') {
+    step.altText.addImageManually(msg);
+  }
+
   // get base64 of image hash
   if (type === 'get-base64') {
-    const newImagesScanned = await utils.getBase64FromHash(msg.imagesScanned);
+    const { imagesManual, imagesScanned, page } = msg;
+
+    const newImages = await utils.getBase64FromHash(
+      imagesScanned,
+      imagesManual,
+      page
+    );
+
+    // combine new images (manual and scanned)
+    const combinedImages = [...newImages.scanned, ...newImages.manual];
 
     figma.ui.postMessage({
       type: 'base64-response',
       data: {
-        newImagesScanned
+        newImagesScanned: combinedImages
       }
     });
   }
@@ -379,6 +408,15 @@ figma.ui.onmessage = async (msg) => {
     });
   }
 
+  // set tip expanded preference
+  if (type === 'set-tip-preference') {
+    const { expanded } = msg;
+
+    // set user preference for tip expanded
+    const { setAsync } = figma.clientStorage;
+    await setAsync('prefTipExpanded', expanded);
+  }
+
   // resize plugin
   if (type === 'resize-plugin') {
     const { condensed, height, width } = msg;

src/components/AltTextRow/index.js

@@ -18,8 +18,11 @@ function AltTextRow(props) {
   // main app state
   const { zoomTo } = React.useContext(Context);
 
-  // image data and flags
-  const { base64, image, index, isOpened, warnClass = '' } = props;
+  // props data
+  const { base64 = null, displayType, index } = props;
+  const { image, imageBuffer = null, isOpened, warnClass = '' } = props;
+
+  // image data
   const { id, altText, name, type } = image;
 
   // on functions
@@ -38,11 +41,23 @@ function AltTextRow(props) {
         role="button"
         tabIndex="0"
       >
-        <img
-          alt={name}
-          className="image-preview"
-          src={`data:image/png;base64,${base64}`}
-        />
+        {displayType === 'scanned' && (
+          <img
+            alt={name}
+            className="image-preview"
+            src={`data:image/png;base64,${base64}`}
+          />
+        )}
+
+        {displayType === 'manual' && (
+          <div
+            alt={name}
+            className="image-preview-blob"
+            style={{
+              backgroundImage: `url("${URL.createObjectURL(new Blob([imageBuffer]))}")`
+            }}
+          />
+        )}
 
         <div className="scroll-to">scroll to</div>
       </div>
@@ -76,7 +91,7 @@ function AltTextRow(props) {
 
 AltTextRow.propTypes = {
   // required
-  base64: PropTypes.string.isRequired,
+  displayType: PropTypes.oneOf(['manual', 'scanned']).isRequired,
   image: PropTypes.shape({
     id: PropTypes.string.isRequired,
     altText: PropTypes.string.isRequired,
@@ -91,6 +106,8 @@ AltTextRow.propTypes = {
   onSelect: PropTypes.func.isRequired,
 
   // optional
+  base64: PropTypes.string,
+  imageBuffer: PropTypes.instanceOf(Uint8Array),
   warnClass: PropTypes.string
 };
 

src/components/AltTextRow/styles.scss

@@ -36,4 +36,14 @@
   min-width: 48px;
   object-fit: contain;
   width: 48px;
+}
+
+.image-preview-blob {
+  background-color: var(--figma-color-bg-disabled);
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 6px;
+  height: 48px;
+  min-width: 48px;
+  width: 48px;
 }

src/components/BannerTipText/index.js

@@ -1,22 +1,78 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { utils } from '../../constants';
+
+// icons
+import { SvgChevronDown } from '../../icons';
+
+// app state
+import Context from '../../context';
 
 // styles
 import './styles.scss';
 
 function BannerTipText(props) {
-  const { footer = null, helpText = 'Learn more', helpUrl = null } = props;
-  const { text } = props;
+  // main app state
+  const { sendToFigma, tipExpanded, updateState } = React.useContext(Context);
+
+  // props
+  const { footer = null } = props;
+  const { helpText = 'Learn more', helpUrl = null, text } = props;
+
+  // local state
+  const [animateClass, setAnimateClass] = React.useState('');
+
+  // ui state
+  const ariaLabel = tipExpanded ? 'collapse' : 'expand';
+  const rotateClass = tipExpanded ? ' rotate-right-rev' : ' rotate-left-rev';
+  const tipTextClass = tipExpanded ? '' : 'tip-text-collapsed';
+
+  const onToggle = () => {
+    updateState('tipExpanded', !tipExpanded);
+
+    sendToFigma('set-tip-preference', {
+      expanded: !tipExpanded
+    });
+  };
+
+  // animate on mount
+  React.useEffect(() => {
+    const animateTimer = setTimeout(() => {
+      setAnimateClass(' animated');
+    }, 800);
+
+    return () => {
+      clearTimeout(animateTimer);
+    };
+  }, []);
 
   return (
     <div className="banner-tip">
       <div className="flex-row align-start">
         <div className="tip-label">tip</div>
 
-        <p dangerouslySetInnerHTML={{ __html: text }} />
+        <p
+          className={tipTextClass}
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+
+        <div
+          aria-label={`${ariaLabel} tip`}
+          className="tip-toggle"
+          onClick={onToggle}
+          onKeyDown={({ key }) => {
+            if (utils.isEnterKey(key)) onToggle();
+          }}
+          role="button"
+          tabIndex="0"
+        >
+          <div className={`svg-theme${animateClass}${rotateClass}`}>
+            <SvgChevronDown size={12} />
+          </div>
+        </div>
       </div>
 
-      {footer && footer}
+      {footer && tipExpanded && footer}
 
       {helpUrl !== null && (
         <a className="tip-link" href={helpUrl} target="_blank" rel="noreferrer">

src/components/BannerTipText/styles.scss

@@ -4,7 +4,8 @@
   color: var(--foreground-on-warning);
   font-size: 11px;
   line-height: 15px;
-  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+  position: relative;
 }
 
 .tip-label {
@@ -14,6 +15,28 @@
   text-transform: uppercase;
 }
 
+.tip-text-collapsed {
+  max-height: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tip-toggle {
+  cursor: pointer;
+  position: absolute!important;
+  right: 8px;
+  top: 8px;
+
+  & .rotate-left-rev {
+    transform: rotate(-180deg)
+  }
+
+  & .rotate-right-rev {
+    transform: rotate(0deg)
+  }
+}
+
 .tip-link {
   border-radius: 2px;
   color: var(--foreground-on-warning);

src/components/FooterActionButton.js

@@ -14,7 +14,7 @@ function FooterActionButton(props) {
         type="button"
         className={className}
         onClick={onClick}
-        tabIndex="-1"
+        tabIndex="0"
       >
         {children}
       </Link>