From f99ce16a67188132a2876cbf6a341b11700c424f Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 30 Apr 2020 11:42:40 -0400
Subject: [PATCH] improve header markup for voiceover and add aria-expanded
 attribute for cards

---
 ui/component/common/card.jsx   |  1 +
 ui/component/header/view.jsx   | 27 +++++++++++++++------------
 ui/scss/component/_button.scss |  4 ++++
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx
index 3d24f8685..c9d6869f4 100644
--- a/ui/component/common/card.jsx
+++ b/ui/component/common/card.jsx
@@ -55,6 +55,7 @@ export default function Card(props: Props) {
               <div className="card__title-actions">
                 <Button
                   button={'alt'}
+                  aria-expanded={expanded}
                   aria-label={__('More')}
                   icon={expanded ? ICONS.SUBTRACT : ICONS.ADD}
                   onClick={() => setExpanded(!expanded)}
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 71abb35c6..8cca9d547 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -162,10 +162,11 @@ const Header = (props: Props) => {
                   label={getWalletTitle()}
                 />
                 <Menu>
-                  <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
-                    <span aria-label={__('Publish a file, or create a channel')}>
-                      <Icon size={18} icon={ICONS.PUBLISH} />
-                    </span>
+                  <MenuButton
+                    aria-label={__('Publish a file, or create a channel')}
+                    className="header__navigation-item menu__title header__navigation-item--icon"
+                  >
+                    <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
                   </MenuButton>
                   <MenuList className="menu__list--header">
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
@@ -180,10 +181,11 @@ const Header = (props: Props) => {
                 </Menu>
 
                 <Menu>
-                  <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
-                    <span aria-label={__('Your account')}>
-                      <Icon size={18} icon={ICONS.ACCOUNT} />
-                    </span>
+                  <MenuButton
+                    aria-label={__('Your account')}
+                    className="header__navigation-item menu__title header__navigation-item--icon"
+                  >
+                    <Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
                   </MenuButton>
                   <MenuList className="menu__list--header">
                     <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
@@ -232,10 +234,11 @@ const Header = (props: Props) => {
               </Fragment>
             )}
             <Menu>
-              <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
-                <span aria-label={__('Settings')}>
-                  <Icon size={18} icon={ICONS.SETTINGS} />
-                </span>
+              <MenuButton
+                aria-label={__('Settings')}
+                className="header__navigation-item menu__title header__navigation-item--icon"
+              >
+                <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
               </MenuButton>
               <MenuList className="menu__list--header">
                 <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 764aac5c1..a008320c8 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -4,6 +4,10 @@
   @media (max-width: $breakpoint-small) {
     font-size: var(--font-small);
   }
+
+  &:focus {
+    @include focus;
+  }
 }
 
 .button--uri-indicator {