Make the accounts menu accessible (#14936)

ui/components/app/account-menu/account-menu.component.js

@@ -50,13 +50,13 @@ export function AccountMenuItem(props) {
       {children}
     </div>
   ) : (
-    <div className={itemClassName} onClick={onClick}>
+    <button className={itemClassName} onClick={onClick}>
       {icon ? <div className="account-menu__item__icon">{icon}</div> : null}
       {text ? <div className="account-menu__item__text">{text}</div> : null}
       {subText ? (
         <div className="account-menu__item__subtext">{subText}</div>
       ) : null}
-    </div>
+    </button>
   );
 }
 
@@ -200,7 +200,7 @@ export default class AccountMenu extends Component {
       const iconAndNameForOpenSubject = addressSubjects[originOfCurrentTab];
 
       return (
-        <div
+        <button
           className="account-menu__account account-menu__item--clickable"
           onClick={() => {
             this.context.trackEvent({
@@ -239,7 +239,7 @@ export default class AccountMenu extends Component {
               />
             </div>
           ) : null}
-        </div>
+        </button>
       );
     });
   }

ui/components/app/account-menu/index.scss

@@ -32,6 +32,9 @@
     align-items: center;
     position: relative;
     z-index: 201;
+    border: 0;
+    background: none;
+    width: 100%;
 
     @media screen and (max-width: $break-small) {
       padding: 14px;
@@ -63,6 +66,8 @@
 
     &__text {
       @include Paragraph;
+
+      color: var(--color-text-default);
     }
 
     &__subtext {
@@ -182,6 +187,9 @@
     flex-flow: row nowrap;
     padding: 16px 14px;
     flex: 0 0 auto;
+    background: none;
+    border: 0;
+    width: 100%;
 
     @media screen and (max-width: $break-small) {
       padding: 12px 14px;
@@ -230,6 +238,7 @@
     overflow: hidden;
     white-space: nowrap;
     max-width: 200px;
+    text-align: start;
   }
 
   &__balance {

ui/components/app/app-header/app-header.component.js

@@ -76,7 +76,7 @@ export default class AppHeader extends PureComponent {
 
     return (
       isUnlocked && (
-        <div
+        <button
           className={classnames('account-menu__icon', {
             'account-menu__icon--disabled': disabled,
           })}
@@ -105,7 +105,7 @@ export default class AppHeader extends PureComponent {
             )
             ///: END:ONLY_INCLUDE_IN
           }
-        </div>
+        </button>
       )
     );
   }

ui/components/app/app-header/index.scss

@@ -89,6 +89,8 @@
 
   .account-menu__icon {
     position: relative;
+    border: 0;
+    background: none;
 
     &__notification-count {
       position: absolute;