processing · catarak · May 6, 2020 · Apr 29, 2020 · May 5, 2020 · May 5, 2020
diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InlineSVG from 'react-inlinesvg';
 
-const addIcon = require('../images/plus.svg');
-const removeIcon = require('../images/minus.svg');
+import AddIcon from '../images/plus.svg';
+import RemoveIcon from '../images/minus.svg';
 
 const AddRemoveButton = ({ type, onClick }) => {
-  const alt = type === 'add' ? 'add to collection' : 'remove from collection';
-  const icon = type === 'add' ? addIcon : removeIcon;
+  const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
+  const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
-    <button className="overlay__close-button" onClick={onClick}>
-      <InlineSVG src={icon} alt={alt} />
+    <button
+      className="overlay__close-button"
+      onClick={onClick}
+      aria-label={alt}
+    >
+      <Icon focusable="false" aria-hidden="true" />
     </button>
   );
 };

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { Link } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
@@ -12,10 +11,10 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
 import { metaKeyName, } from '../utils/metaKey';
-import caretLeft from '../images/left-arrow.svg';
 
-const triangleUrl = require('../images/down-filled-triangle.svg');
-const logoUrl = require('../images/p5js-logo-small.svg');
+import CaretLeftIcon from '../images/left-arrow.svg';
+import TriangleIcon from '../images/down-filled-triangle.svg';
+import LogoIcon from '../images/p5js-logo-small.svg';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
 
@@ -229,11 +228,11 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
         </li>
         <li className="nav__item nav__item--no-icon">
           <Link to="/" className="nav__back-link">
-            <InlineSVG src={caretLeft} className="nav__back-icon" />
+            <CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
             <span className="nav__item-header">
               Back to Editor
             </span>
@@ -247,7 +246,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
         </li>
         <li className={navDropdownState.file}>
           <button
@@ -261,7 +260,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">File</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -363,7 +362,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Edit</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown" >
             <li className="nav__dropdown-item">
@@ -423,7 +422,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Sketch</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -498,7 +497,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Help</span>
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -575,7 +574,7 @@ class Nav extends React.PureComponent {
             }}
           >
             My Account
-            <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">

diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
-const logoUrl = require('../images/p5js-logo-small.svg');
-const arrowUrl = require('../images/triangle-arrow-left.svg');
+import LogoIcon from '../images/p5js-logo-small.svg';
+import ArrowIcon from '../images/triangle-arrow-left.svg';
 
 class NavBasic extends React.PureComponent {
   static defaultProps = {
@@ -15,13 +14,13 @@ class NavBasic extends React.PureComponent {
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
         <ul className="nav__items-left">
           <li className="nav__item-logo">
-            <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+            <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
           </li>
           { this.props.onBack && (
             <li className="nav__item">
               <button onClick={this.props.onBack}>
                 <span className="nav__item-header">
-                  <InlineSVG src={arrowUrl} alt="Left arrow" />
+                  <ArrowIcon focusable="false" aria-hidden="true" />
                 </span>
                 Back to the editor
               </button>

diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
@@ -1,24 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
 
-const logoUrl = require('../images/p5js-logo-small.svg');
-const editorUrl = require('../images/code.svg');
+import LogoIcon from '../images/p5js-logo-small.svg';
+import CodeIcon from '../images/code.svg';
 
 const PreviewNav = ({ owner, project }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+        <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
       <p className="toolbar__project-owner">by</p>
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`}>
-        <InlineSVG className="preview-nav__editor-svg" src={editorUrl} />
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
+        <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
   </nav>

diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -11,8 +11,11 @@ exports[`Nav renders correctly 1`] = `
     <li
       className="nav__item-logo"
     >
-      <span
-        className="isvg loading svg__logo"
+      <test-file-stub
+        aria-label="p5.js Logo"
+        className="svg__logo"
+        focusable="false"
+        role="img"
       />
     </li>
     <li
@@ -29,8 +32,10 @@ exports[`Nav renders correctly 1`] = `
         >
           File
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul
@@ -108,8 +113,10 @@ exports[`Nav renders correctly 1`] = `
         >
           Edit
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul
@@ -201,8 +208,10 @@ exports[`Nav renders correctly 1`] = `
         >
           Sketch
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul
@@ -282,8 +291,10 @@ exports[`Nav renders correctly 1`] = `
         >
           Help
         </span>
-        <span
-          className="isvg loading nav__item-header-triangle"
+        <test-file-stub
+          aria-hidden="true"
+          className="nav__item-header-triangle"
+          focusable="false"
         />
       </button>
       <ul

diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { browserHistory } from 'react-router';
 
-const exitUrl = require('../../../images/exit.svg');
+import ExitIcon from '../../../images/exit.svg';
 
 class Overlay extends React.Component {
   constructor(props) {
@@ -81,8 +80,8 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} >
-                  <InlineSVG src={exitUrl} alt="close overlay" />
+                <button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
+                  <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>
             </header>

diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { Helmet } from 'react-helmet';
 
-const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
-// const playUrl = require('../../../images/play.svg');
-const asteriskUrl = require('../../../images/p5-asterisk.svg');
+import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
+// import PlayIcon from '../../../images/play.svg';
+import AsteriskIcon from '../../../images/p5-asterisk.svg';
 
 function About(props) {
   return (
@@ -13,15 +12,15 @@ function About(props) {
         <title>p5.js Web Editor | About</title>
       </Helmet>
       <div className="about__content-column">
-        <InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
+        <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
         {/* Video button to hello p5 video page */}
         {/* <p className="about__play-video">
           <a
             href="http://hello.p5js.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
+            <PlayIcon className="about__play-video-button" title="Play Hello Video" />
           Play hello! video</a>
         </p>  */}
       </div>
@@ -33,7 +32,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Examples
           </a>
         </p>
@@ -43,7 +42,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Learn
           </a>
         </p>
@@ -56,7 +55,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Libraries
           </a>
         </p>
@@ -66,7 +65,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Reference
           </a>
         </p>
@@ -76,7 +75,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Forum
           </a>
         </p>

diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
@@ -5,11 +5,10 @@ import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
-import InlineSVG from 'react-inlinesvg';
 
 import Loader from '../../App/components/loader';
 import * as AssetActions from '../actions/assets';
-import downFilledTriangle from '../../../images/down-filled-triangle.svg';
+import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
 class AssetListRowBase extends React.Component {
   constructor(props) {
@@ -86,8 +85,9 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
+            aria-label="Toggle Open/Close Asset Options"
           >
-            <InlineSVG src={downFilledTriangle} alt="Menu" />
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
           {optionsOpen &&
             <ul