From c708af14655775fb97e88dadefae0a83090fff73 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 5 May 2020 19:08:45 -0400
Subject: [PATCH] Finish adding aria labels

---
 client/modules/User/components/Collection.jsx | 34 ++++++++++++++++---
 .../modules/User/components/GithubButton.jsx  |  2 +-
 .../modules/User/components/GoogleButton.jsx  |  2 +-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index bb798161..05f6b757 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -53,9 +53,10 @@ const ShareURL = ({ value }) => {
       <button
         className="collection-share__button"
         onClick={() => setShowURL(!showURL)}
+        aria-label="Show collection share URL"
       >
         <span>Share</span>
-        <DropdownArrowIcon className="collection-share__arrow" />
+        <DropdownArrowIcon className="collection-share__arrow" focusable="false" aria-hidden="true" />
       </button>
       { showURL &&
         <div className="collection__share-dropdown">
@@ -97,8 +98,9 @@ class CollectionItemRowBase extends React.Component {
           <button
             className="collection-row__remove-button"
             onClick={this.handleSketchRemove}
+            aria-label="Remove sketch from collection"
           >
-            <RemoveIcon title="Remove" />
+            <RemoveIcon focusable="false" aria-hidden="true" />
           </button>
         </td>
       </tr>);
@@ -295,21 +297,43 @@ class Collection 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/User/components/GithubButton.jsx b/client/modules/User/components/GithubButton.jsx
index 58bc2f64..32edfe8a 100644
--- a/client/modules/User/components/GithubButton.jsx
+++ b/client/modules/User/components/GithubButton.jsx
@@ -9,7 +9,7 @@ function GithubButton(props) {
       className="github-button"
       href="/auth/github"
     >
-      <GithubIcon className="github-icon" />
+      <GithubIcon className="github-icon" role="img" aria-label="GitHub Logo" focusable="false" />
       <span>{props.buttonText}</span>
     </a>
   );
diff --git a/client/modules/User/components/GoogleButton.jsx b/client/modules/User/components/GoogleButton.jsx
index 5f07f5c7..c508aa9b 100644
--- a/client/modules/User/components/GoogleButton.jsx
+++ b/client/modules/User/components/GoogleButton.jsx
@@ -9,7 +9,7 @@ function GoogleButton(props) {
       className="google-button"
       href="/auth/google/"
     >
-      <GoogleIcon className="google-icon" />
+      <GoogleIcon className="google-icon" role="img" aria-label="Google Logo" focusable="false" />
       <span>{props.buttonText}</span>
     </a>
   );