From cee22c32772a9e73109e50470cef6cf40c46b90e Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 5 May 2020 19:03:58 -0400
Subject: [PATCH] Move through svg icons and add aria labels

---
 client/components/Nav.jsx                     | 16 ++++----
 client/components/NavBasic.jsx                |  4 +-
 client/components/PreviewNav.jsx              |  6 +--
 client/modules/App/components/Overlay.jsx     |  4 +-
 client/modules/IDE/components/About.jsx       | 12 +++---
 client/modules/IDE/components/AssetList.jsx   |  3 +-
 .../CollectionList/CollectionList.jsx         | 28 ++++++++++++--
 .../CollectionList/CollectionListRow.jsx      |  1 +
 client/modules/IDE/components/Console.jsx     | 10 ++---
 .../modules/IDE/components/CopyableInput.jsx  |  3 +-
 .../modules/IDE/components/EditableInput.jsx  |  9 ++++-
 client/modules/IDE/components/Editor.jsx      | 12 +++---
 client/modules/IDE/components/Feedback.jsx    |  2 +-
 client/modules/IDE/components/FileNode.jsx    | 12 +++---
 .../modules/IDE/components/NewFileModal.jsx   |  8 +++-
 .../modules/IDE/components/NewFolderModal.jsx |  8 +++-
 client/modules/IDE/components/Preferences.jsx |  4 +-
 .../IDE/components/QuickAddList/Icons.jsx     |  6 +--
 .../components/QuickAddList/QuickAddList.jsx  | 35 +++++++++--------
 .../IDE/components/Searchbar/Searchbar.jsx    |  2 +-
 client/modules/IDE/components/Sidebar.jsx     |  4 +-
 client/modules/IDE/components/SketchList.jsx  | 34 ++++++++++++++---
 client/modules/IDE/components/Toast.jsx       |  4 +-
 client/modules/IDE/components/Toolbar.jsx     | 38 +++++++++++--------
 .../IDE/components/UploadFileModal.jsx        |  8 +++-
 client/modules/User/components/APIKeyForm.jsx |  2 +-
 client/modules/User/components/APIKeyList.jsx |  8 +++-
 client/styles/base/_base.scss                 | 12 ++++++
 28 files changed, 194 insertions(+), 101 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 5d9a522a..eb5ef944 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -228,11 +228,11 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon title="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">
-            <CaretLeftIcon className="nav__back-icon" />
+            <CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
             <span className="nav__item-header">
               Back to Editor
             </span>
@@ -246,7 +246,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon title="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
@@ -260,7 +260,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">File</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -362,7 +362,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Edit</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown" >
             <li className="nav__dropdown-item">
@@ -422,7 +422,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Sketch</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -497,7 +497,7 @@ class Nav extends React.PureComponent {
             }}
           >
             <span className="nav__item-header">Help</span>
-            <TriangleIcon className="nav__item-header-triangle" />
+            <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
             <li className="nav__dropdown-item">
@@ -574,7 +574,7 @@ class Nav extends React.PureComponent {
             }}
           >
             My Account
-            <TriangleIcon className="nav__item-header-triangle" />
+            <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
index 65ef0555..411329d6 100644
--- a/client/components/NavBasic.jsx
+++ b/client/components/NavBasic.jsx
@@ -14,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">
-            <LogoIcon title="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">
-                  <ArrowIcon title="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
index 7faaf622..6a983e19 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -9,15 +9,15 @@ const PreviewNav = ({ owner, project }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <LogoIcon title="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}`}>
-        <CodeIcon className="preview-nav__editor-svg" />
+      <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/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 712583c3..4e54b615 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -80,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} >
-                  <ExitIcon title="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
index dbe86f30..213a1f46 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -12,7 +12,7 @@ function About(props) {
         <title>p5.js Web Editor | About</title>
       </Helmet>
       <div className="about__content-column">
-        <SquareLogoIcon className="about__logo" title="p5.js 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
@@ -32,7 +32,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Examples
           </a>
         </p>
@@ -42,7 +42,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Learn
           </a>
         </p>
@@ -55,7 +55,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Libraries
           </a>
         </p>
@@ -65,7 +65,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
+            <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
             Reference
           </a>
         </p>
@@ -75,7 +75,7 @@ function About(props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <AsteriskIcon className="about__content-column-asterisk" title="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
index 50b90dad..f2fef386 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -85,8 +85,9 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
+            aria-label="Toggle Open/Close Asset Options"
           >
-            <DownFilledTriangleIcon title="Menu" />
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
           {optionsOpen &&
             <ul
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 7a09aa5b..9fd70479 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -82,21 +82,43 @@ class CollectionList extends React.Component {
     return null;
   }
 
+  _getButtonLabel = (fieldName, displayName) => {
+    const { field, direction } = this.props.sorting;
+    let buttonLabel;
+    if (field !== fieldName) {
+      if (field === 'name') {
+        buttonLabel = `Sort by ${displayName} ascending.`;
+      } else {
+        buttonLabel = `Sort by ${displayName} descending.`;
+      }
+    } else if (direction === SortingActions.DIRECTION.ASC) {
+      buttonLabel = `Sort by ${displayName} descending.`;
+    } else {
+      buttonLabel = `Sort by ${displayName} ascending.`;
+    }
+    return buttonLabel;
+  }
+
   _renderFieldHeader = (fieldName, displayName) => {
     const { field, direction } = this.props.sorting;
     const headerClass = classNames({
       'sketches-table__header': true,
       'sketches-table__header--selected': field === fieldName
     });
+    const buttonLabel = this._getButtonLabel(fieldName, displayName);
     return (
       <th scope="col">
-        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+        <button
+          className="sketch-list__sort-button"
+          onClick={() => this.props.toggleDirectionForField(fieldName)}
+          aria-label={buttonLabel}
+        >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon />
+            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon />
+            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
           }
         </button>
       </th>
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 47395192..37f992e4 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -128,6 +128,7 @@ class CollectionListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
+          aria-label="Toggle Open/Close collection options"
         >
           <DownFilledTriangleIcon title="Menu" />
         </button>
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index 08e98706..604bf9f0 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -90,18 +90,18 @@ class Console extends React.Component {
         <div className="preview-console__header">
           <h2 className="preview-console__header-title">Console</h2>
           <div className="preview-console__header-buttons">
-            <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="clear console">
+            <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
               Clear
             </button>
             <button
               className="preview-console__collapse"
               onClick={this.props.collapseConsole}
-              aria-label="collapse console"
+              aria-label="Close console"
             >
-              <DownArrowIcon />
+              <DownArrowIcon focusable="false" aria-hidden="true" />
             </button>
-            <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="expand console">
-              <UpArrowIcon />
+            <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="Open console" >
+              <UpArrowIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
         </div>
diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
index 954a877f..cbce2f3e 100644
--- a/client/modules/IDE/components/CopyableInput.jsx
+++ b/client/modules/IDE/components/CopyableInput.jsx
@@ -69,8 +69,9 @@ class CopyableInput extends React.Component {
             rel="noopener noreferrer"
             href={value}
             className="copyable-input__preview"
+            aria-label={`Open ${label} view in new tab`}
           >
-            <ShareIcon title={`open ${label} view in new tab`} />
+            <ShareIcon focusable="false" aria-hidden="true" />
           </a>
         }
       </div>
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 7a59a283..c10f3d70 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import EditIcon from '../../../images/pencil.svg';
 
+// TODO I think this needs a description prop so that it's accessible
 function EditableInput({
   validate, value, emptyPlaceholder, InputComponent, inputProps, onChange
 }) {
@@ -47,9 +48,13 @@ function EditableInput({
 
   return (
     <span className={classes}>
-      <button className="editable-input__label" onClick={beginEditing}>
+      <button
+        className="editable-input__label"
+        onClick={beginEditing}
+        aria-label={`Edit ${displayValue} value`}
+      >
         <span>{displayValue}</span>
-        <EditIcon className="editable-input__icon" />
+        <EditIcon className="editable-input__icon" focusable="false" aria-hidden="true" />
       </button>
 
       <InputComponent
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index f11dec9b..9f2ac9e9 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -320,24 +320,26 @@ class Editor extends React.Component {
       >
         <header className="editor__header">
           <button
-            aria-label="collapse file navigation"
+            aria-label="Open Sketch files navigation"
             className="sidebar__contract"
             onClick={this.props.collapseSidebar}
           >
-            <LeftArrowIcon />
+            <LeftArrowIcon focusable="false" aria-hidden="true" />
           </button>
           <button
-            aria-label="expand file navigation"
+            aria-label="Close sketch files navigation"
             className="sidebar__expand"
             onClick={this.props.expandSidebar}
           >
-            <RightArrowIcon />
+            <RightArrowIcon focusable="false" aria-hidden="true" />
           </button>
           <div className="editor__file-name">
             <span>
               {this.props.file.name}
               <span className="editor__unsaved-changes">
-                {this.props.unsavedChanges ? <UnsavedChangesDotIcon /> : null}
+                {this.props.unsavedChanges ?
+                  <UnsavedChangesDotIcon role="img" aria-label="Sketch has unsaved changes" focusable="false" /> :
+                  null}
               </span>
             </span>
             <Timer
diff --git a/client/modules/IDE/components/Feedback.jsx b/client/modules/IDE/components/Feedback.jsx
index 8ebf18fe..409c1dcd 100644
--- a/client/modules/IDE/components/Feedback.jsx
+++ b/client/modules/IDE/components/Feedback.jsx
@@ -23,7 +23,7 @@ function Feedback(props) {
             className="feedback__github-link"
           >
             Go to Github
-            <GitHubLogo className="feedback__github-logo" />
+            <GitHubLogo className="feedback__github-logo" focusable="false" aria-hidden="true" />
           </a>
         </p>
       </div>
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 249307e9..bd077874 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -184,7 +184,7 @@ export class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             { isFile &&
               <span className="sidebar__file-item-icon">
-                <FileIcon />
+                <FileIcon focusable="false" aria-hidden="true" />
               </span>
             }
             { isFolder &&
@@ -192,14 +192,16 @@ export class FileNode extends React.Component {
                 <button
                   className="sidebar__file-item-closed"
                   onClick={this.showFolderChildren}
+                  aria-label="Open folder contents"
                 >
-                  <FolderRightIcon className="folder-right" />
+                  <FolderRightIcon className="folder-right" focusable="false" aria-hidden="true" />
                 </button>
                 <button
                   className="sidebar__file-item-open"
                   onClick={this.hideFolderChildren}
+                  aria-label="Close file contents"
                 >
-                  <FolderDownIcon className="folder-down" />
+                  <FolderDownIcon className="folder-down" focusable="false" aria-hidden="true" />
                 </button>
               </div>
             }
@@ -221,14 +223,14 @@ export class FileNode extends React.Component {
             />
             <button
               className="sidebar__file-item-show-options"
-              aria-label="view file options"
+              aria-label="Toggle open/close file options"
               ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
               tabIndex="0"
               onClick={this.toggleFileOptions}
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <DownArrowIcon />
+              <DownArrowIcon focusable="false" aria-hidden="true" />
             </button>
             <div className="sidebar__file-item-options">
               <ul title="file options">
diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx
index b8fff2af..412d9895 100644
--- a/client/modules/IDE/components/NewFileModal.jsx
+++ b/client/modules/IDE/components/NewFileModal.jsx
@@ -34,8 +34,12 @@ class NewFileModal extends React.Component {
         <div className="modal-content">
           <div className="modal__header">
             <h2 className="modal__title">Create File</h2>
-            <button className="modal__exit-button" onClick={this.props.closeNewFileModal}>
-              <ExitIcon title="Close New File Modal" />
+            <button
+              className="modal__exit-button"
+              onClick={this.props.closeNewFileModal}
+              aria-label="Close New File Modal"
+            >
+              <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           <NewFileForm
diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx
index 6f9ac5c9..13029d6c 100644
--- a/client/modules/IDE/components/NewFolderModal.jsx
+++ b/client/modules/IDE/components/NewFolderModal.jsx
@@ -16,8 +16,12 @@ class NewFolderModal extends React.Component {
         <div className="modal-content-folder">
           <div className="modal__header">
             <h2 className="modal__title">Create Folder</h2>
-            <button className="modal__exit-button" onClick={this.props.closeModal}>
-              <ExitIcon title="Close New Folder Modal" />
+            <button
+              className="modal__exit-button"
+              onClick={this.props.closeModal}
+              aria-label="Close New Folder Modal"
+            >
+              <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           <NewFolderForm {...this.props} />
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 4abd970b..1b5c342b 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -149,7 +149,7 @@ class Preferences extends React.Component {
                 aria-label="decrease font size"
                 disabled={this.state.fontSize <= 8}
               >
-                <MinusIcon title="Decrease Font Size" />
+                <MinusIcon focusable="false" aria-hidden="true" />
                 <h6 className="preference__label">Decrease</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
@@ -170,7 +170,7 @@ class Preferences extends React.Component {
                 aria-label="increase font size"
                 disabled={this.state.fontSize >= 36}
               >
-                <PlusIcon title="Increase Font Size" />
+                <PlusIcon focusable="false" aria-hidden="true" />
                 <h6 className="preference__label">Increase</h6>
               </button>
             </div>
diff --git a/client/modules/IDE/components/QuickAddList/Icons.jsx b/client/modules/IDE/components/QuickAddList/Icons.jsx
index 852e6787..ae59c7cf 100644
--- a/client/modules/IDE/components/QuickAddList/Icons.jsx
+++ b/client/modules/IDE/components/QuickAddList/Icons.jsx
@@ -12,9 +12,9 @@ const Icons = ({ isAdded }) => {
 
   return (
     <div className={classes}>
-      <CloseIcon className="quick-add__remove-icon" title="Remove from collection" />
-      <CheckIcon className="quick-add__in-icon" title="In collection" />
-      <CloseIcon className="quick-add__add-icon" title="Add to collection" />
+      <CloseIcon className="quick-add__remove-icon" role="img" aria-label="Descending" focusable="false" />
+      <CheckIcon className="quick-add__in-icon" role="img" aria-label="Descending" focusable="false" />
+      <CloseIcon className="quick-add__add-icon" role="img" aria-label="Descending" focusable="false" />
     </div>
   );
 };
diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
index 5694929d..be7a5ac3 100644
--- a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -6,22 +6,25 @@ import Icons from './Icons';
 
 const Item = ({
   isAdded, onSelect, name, url
-}) => (
-  <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
-    <button className="quick-add__item-toggle" onClick={onSelect}>
-      <Icons isAdded={isAdded} />
-    </button>
-    <span className="quick-add__item-name">{name}</span>
-    <Link
-      className="quick-add__item-view"
-      to={url}
-      target="_blank"
-      onClick={e => e.stopPropogation()}
-    >
-      View
-    </Link>
-  </li>
-);
+}) => {
+  const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
+  return (
+    <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
+      <button className="quick-add__item-toggle" onClick={onSelect} aria-label={buttonLabel}>
+        <Icons isAdded={isAdded} />
+      </button>
+      <span className="quick-add__item-name">{name}</span>
+      <Link
+        className="quick-add__item-view"
+        to={url}
+        target="_blank"
+        onClick={e => e.stopPropogation()}
+      >
+        View
+      </Link>
+    </li>
+  );
+};
 
 const ItemType = PropTypes.shape({
   name: PropTypes.string.isRequired,
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index 0eb9752d..b81b3bea 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -45,7 +45,7 @@ class Searchbar extends React.Component {
     return (
       <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
         <div className="searchbar__button">
-          <SearchIcon className="searchbar__icon" />
+          <SearchIcon className="searchbar__icon" focusable="false" aria-hidden="true" />
         </div>
         <input
           className="searchbar__input"
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index cfc8cb95..141728af 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -75,7 +75,7 @@ class Sidebar extends React.Component {
           </h3>
           <div className="sidebar__icons">
             <button
-              aria-label="add file or folder"
+              aria-label="Toggle open/close sketch file options"
               className="sidebar__add"
               tabIndex="0"
               ref={(element) => { this.sidebarOptions = element; }}
@@ -83,7 +83,7 @@ class Sidebar extends React.Component {
               onBlur={this.onBlurComponent}
               onFocus={this.onFocusComponent}
             >
-              <DownArrowIcon />
+              <DownArrowIcon focusable="false" aria-hidden="true" />
             </button>
             <ul className="sidebar__project-options">
               <li>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index bb09761f..c10855bd 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -167,8 +167,9 @@ class SketchListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
+          aria-label="Toggle Open/Close Sketch Options"
         >
-          <DownFilledTriangleIcon title="Menu" />
+          <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
         </button>
         {optionsOpen &&
           <ul
@@ -325,7 +326,6 @@ class SketchList extends React.Component {
     super(props);
     this.props.getProjects(this.props.username);
     this.props.resetSorting();
-    this._renderFieldHeader = this._renderFieldHeader.bind(this);
 
     this.state = {
       isInitialDataLoad: true,
@@ -368,21 +368,43 @@ class SketchList extends React.Component {
     return null;
   }
 
-  _renderFieldHeader(fieldName, displayName) {
+  _getButtonLabel = (fieldName, displayName) => {
+    const { field, direction } = this.props.sorting;
+    let buttonLabel;
+    if (field !== fieldName) {
+      if (field === 'name') {
+        buttonLabel = `Sort by ${displayName} ascending.`;
+      } else {
+        buttonLabel = `Sort by ${displayName} descending.`;
+      }
+    } else if (direction === SortingActions.DIRECTION.ASC) {
+      buttonLabel = `Sort by ${displayName} descending.`;
+    } else {
+      buttonLabel = `Sort by ${displayName} ascending.`;
+    }
+    return buttonLabel;
+  }
+
+  _renderFieldHeader = (fieldName, displayName) => {
     const { field, direction } = this.props.sorting;
     const headerClass = classNames({
       'sketches-table__header': true,
       'sketches-table__header--selected': field === fieldName
     });
+    const buttonLabel = this._getButtonLabel(fieldName, displayName);
     return (
       <th scope="col">
-        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+        <button
+          className="sketch-list__sort-button"
+          onClick={() => this.props.toggleDirectionForField(fieldName)}
+          aria-label={buttonLabel}
+        >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon />
+            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon />
+            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
           }
         </button>
       </th>
diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 9392cd2e..2b9a0d58 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -12,8 +12,8 @@ function Toast(props) {
       <p>
         {props.text}
       </p>
-      <button className="toast__close" onClick={props.hideToast}>
-        <ExitIcon title="Close Keyboard Shortcuts Overlay" />
+      <button className="toast__close" onClick={props.hideToast} aria-label="Close Alert" >
+        <ExitIcon focusable="false" aria-hidden="true" />
       </button>
     </section>
   );
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index 28fb9fb4..dd5010ca 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -59,6 +59,8 @@ class Toolbar extends React.Component {
       'toolbar__project-name-container--editing': this.props.project.isEditingName
     });
 
+    const canEditProjectName = this.canEditProjectName();
+
     return (
       <div className="toolbar">
         <button
@@ -68,25 +70,25 @@ class Toolbar extends React.Component {
             this.props.setTextOutput(true);
             this.props.setGridOutput(true);
           }}
-          aria-label="play sketch"
+          aria-label="Play sketch"
           disabled={this.props.infiniteLoop}
         >
-          <PlayIcon title="Play Sketch" />
+          <PlayIcon focusable="false" aria-hidden="true" />
         </button>
         <button
           className={playButtonClass}
           onClick={this.props.startSketch}
-          aria-label="play only visual sketch"
+          aria-label="Play only visual sketch"
           disabled={this.props.infiniteLoop}
         >
-          <PlayIcon title="Play only visual Sketch" />
+          <PlayIcon focusable="false" aria-hidden="true" />
         </button>
         <button
           className={stopButtonClass}
           onClick={this.props.stopSketch}
-          aria-label="stop sketch"
+          aria-label="Stop sketch"
         >
-          <StopIcon alt="Stop Sketch" />
+          <StopIcon focusable="false" aria-hidden="true" />
         </button>
         <div className="toolbar__autorefresh">
           <input
@@ -102,24 +104,28 @@ class Toolbar extends React.Component {
           </label>
         </div>
         <div className={nameContainerClass}>
-          <a
+          <button
             className="toolbar__project-name"
-            href={this.props.owner ? `/${this.props.owner.username}/sketches/${this.props.project.id}` : ''}
-            onClick={(e) => {
-              if (this.canEditProjectName()) {
-                e.preventDefault();
+            onClick={() => {
+              if (canEditProjectName) {
                 this.originalProjectName = this.props.project.name;
                 this.props.showEditProjectName();
                 setTimeout(() => this.projectNameInput.focus(), 0);
               }
             }}
+            disabled={!canEditProjectName}
+            aria-label="Edit sketch name"
           >
             <span>{this.props.project.name}</span>
             {
-              this.canEditProjectName() &&
-              <EditProjectNameIcon className="toolbar__edit-name-button" title="Edit Project Name" />
+              canEditProjectName &&
+              <EditProjectNameIcon
+                className="toolbar__edit-name-button"
+                focusable="false"
+                aria-hidden="true"
+              />
             }
-          </a>
+          </button>
           <input
             type="text"
             maxLength="128"
@@ -149,9 +155,9 @@ class Toolbar extends React.Component {
         <button
           className={preferencesButtonClass}
           onClick={this.props.openPreferences}
-          aria-label="preferences"
+          aria-label="Open Preferences"
         >
-          <PreferencesIcon role="img" />
+          <PreferencesIcon focusable="false" aria-hidden="true" />
         </button>
       </div>
     );
diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx
index 4f3d3522..27fa7c6f 100644
--- a/client/modules/IDE/components/UploadFileModal.jsx
+++ b/client/modules/IDE/components/UploadFileModal.jsx
@@ -32,8 +32,12 @@ class UploadFileModal extends React.Component {
         <div className="modal-content">
           <div className="modal__header">
             <h2 className="modal__title">Upload File</h2>
-            <button className="modal__exit-button" onClick={this.props.closeModal}>
-              <ExitIcon title="Close New File Modal" />
+            <button
+              className="modal__exit-button"
+              onClick={this.props.closeModal}
+              aria-label="Close upload file modal"
+            >
+              <ExitIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
           { this.props.reachedTotalSizeLimit &&
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index 9e7493f1..459efe31 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -85,7 +85,7 @@ class APIKeyForm extends React.Component {
               disabled={this.state.keyLabel === ''}
               type="submit"
             >
-              <PlusIcon className="api-key-form__create-icon" />
+              <PlusIcon className="api-key-form__create-icon" focusable="false" aria-hidden="true" />
               Create
             </button>
           </form>
diff --git a/client/modules/User/components/APIKeyList.jsx b/client/modules/User/components/APIKeyList.jsx
index 0c10f426..9201aa4b 100644
--- a/client/modules/User/components/APIKeyList.jsx
+++ b/client/modules/User/components/APIKeyList.jsx
@@ -31,8 +31,12 @@ function APIKeyList({ apiKeys, onRemove }) {
               <td>{format(new Date(key.createdAt), 'MMM D, YYYY h:mm A')}</td>
               <td>{lastUsed}</td>
               <td className="api-key-list__action">
-                <button className="api-key-list__delete-button" onClick={() => onRemove(key)}>
-                  <TrashCanIcon title="Delete Key" />
+                <button
+                  className="api-key-list__delete-button"
+                  onClick={() => onRemove(key)}
+                  aria-label="Delete API Key"
+                >
+                  <TrashCanIcon focusable="false" aria-hidden="true" />
                 </button>
               </td>
             </tr>
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 94b3d55a..58b1030b 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -96,3 +96,15 @@ textarea:focus {
 	outline: none;
 	box-shadow: 0 0 0 1px $outline-color;
 }
+
+// screen reader only class
+// from https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html#hiding-content-visually
+.sr-only:not(:focus):not(:active) {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}