From 8a9a79720b80375d3f8fe5e697daed5cab7e1b8d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 30 Jan 2020 15:55:45 -0500
Subject: [PATCH] add aria-label and alt messages

---
 ui/component/channelThumbnail/view.jsx | 16 ++++++++++++++--
 ui/component/header/view.jsx           | 15 ++++++++++-----
 ui/scss/component/_header.scss         |  6 ++++++
 ui/scss/component/menu-button.scss     |  6 ------
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index b153d35f7..659a5bb0c 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -35,8 +35,20 @@ function ChannelThumbnail(props: Props) {
         'channel-thumbnail--small': small,
       })}
     >
-      {!showThumb && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
-      {showThumb && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
+      {!showThumb && (
+        <img
+          alt={__('Channel profile picture')}
+          className="channel-thumbnail__default"
+          src={thumbnailPreview || Gerbil}
+        />
+      )}
+      {showThumb && (
+        <img
+          alt={__('Channel profile picture')}
+          className="channel-thumbnail__custom"
+          src={thumbnailPreview || thumbnail}
+        />
+      )}
     </div>
   );
 }
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 18fee57f8..343167754 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -132,13 +132,16 @@ const Header = (props: Props) => {
             {(!IS_WEB || authenticated) && (
               <Fragment>
                 <Button
+                  aria-label={__('Your wallet')}
                   navigate={`/$/${PAGES.WALLET}`}
                   className="header__navigation-item menu__title header__navigation-item--balance"
                   label={getWalletTitle()}
                 />
                 <Menu>
                   <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
-                    <Icon size={18} icon={ICONS.PUBLISH} />
+                    <span aria-label={__('Publish a file, or create a channel')}>
+                      <Icon size={18} icon={ICONS.PUBLISH} />
+                    </span>
                   </MenuButton>
                   <MenuList className="menu__list--header">
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
@@ -154,7 +157,9 @@ const Header = (props: Props) => {
 
                 <Menu>
                   <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
-                    <Icon size={18} icon={ICONS.ACCOUNT} />
+                    <span aria-label={__('Your account')}>
+                      <Icon size={18} icon={ICONS.ACCOUNT} />
+                    </span>
                   </MenuButton>
                   <MenuList className="menu__list--header">
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
@@ -169,8 +174,6 @@ const Header = (props: Props) => {
                       <Icon aria-hidden icon={ICONS.FEATURED} />
                       {__('Rewards')}
                     </MenuItem>
-
-                    {/* Commented out until new invite system is implemented */}
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
                       <Icon aria-hidden icon={ICONS.INVITE} />
                       {__('Invites')}
@@ -196,7 +199,9 @@ const Header = (props: Props) => {
             )}
             <Menu>
               <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
-                <Icon size={18} icon={ICONS.SETTINGS} />
+                <span aria-label={__('Settings')}>
+                  <Icon size={18} icon={ICONS.SETTINGS} />
+                </span>
               </MenuButton>
               <MenuList className="menu__list--header">
                 <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 29f172083..93822000a 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -126,6 +126,12 @@
   &:focus {
     @include focus;
   }
+
+  span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 .header__navigation-item--lbry {
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index d98b59c92..c1f3896bb 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -75,9 +75,3 @@
   font-size: var(--font-small);
   padding-top: 0;
 }
-
-.menu__title {
-  span {
-    margin-left: var(--spacing-miniscule);
-  }
-}