UX: Multichain: Improve accessibility of accounts menu (#18309)

* UX: Multichain: Improve accessibility of accounts menu

* Use button instead of a

* Pass color instead of using CSS

ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = `
 <div>
-  <button
+  <div
     class="box multichain-account-list-item box--padding-4 box--display-flex box--gap-2 box--flex-direction-row box--background-color-transparent"
   >
     <div
@@ -60,7 +60,15 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           <div
             class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
-            Test Account
+            <button
+              class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
+            >
+              <span
+                class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              >
+                Test Account
+              </span>
+            </button>
           </div>
           <div
             class="box box--display-flex box--flex-direction-row box--align-items-center"
@@ -123,18 +131,17 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
       </div>
     </div>
     <div>
-      <div
+      <button
         aria-label="Test Account Options"
         class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
         data-testid="account-list-item-menu-button"
-        tabindex="0"
       >
         <span
           class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
           style="mask-image: url('./images/icons/more-vertical.svg');"
         />
-      </div>
+      </button>
     </div>
-  </button>
+  </div>
 </div>
 `;

ui/components/multichain/account-list-item/account-list-item.js

@@ -17,6 +17,7 @@ import {
   ICON_SIZES,
   AvatarFavicon,
   Tag,
+  ButtonLink,
 } from '../../component-library';
 import {
   Color,
@@ -87,9 +88,7 @@ export const AccountListItem = ({
       className={classnames('multichain-account-list-item', {
         'multichain-account-list-item--selected': selected,
       })}
-      as="button"
-      onClick={(e) => {
-        e.preventDefault();
+      onClick={() => {
         // Without this check, the account will be selected after
         // the account options menu closes
         if (!accountOptionsMenuOpen) {
@@ -121,17 +120,24 @@ export const AccountListItem = ({
             gap={2}
           >
             <Text ellipsis as="div">
-              {identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
-                <Tooltip
-                  title={identity.name}
-                  position="bottom"
-                  wrapperClassName="multichain-account-list-item__tooltip"
-                >
-                  {identity.name}
-                </Tooltip>
-              ) : (
-                identity.name
-              )}
+              <ButtonLink
+                onClick={onClick}
+                className="multichain-account-list-item__account-name"
+                color={Color.textDefault}
+                ellipsis
+              >
+                {identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
+                  <Tooltip
+                    title={identity.name}
+                    position="bottom"
+                    wrapperClassName="multichain-account-list-item__tooltip"
+                  >
+                    {identity.name}
+                  </Tooltip>
+                ) : (
+                  identity.name
+                )}
+              </ButtonLink>
             </Text>
             <Box
               display={DISPLAY.FLEX}
@@ -195,13 +201,6 @@ export const AccountListItem = ({
             e.stopPropagation();
             setAccountOptionsMenuOpen(true);
           }}
-          as="div"
-          tabIndex={0}
-          onKeyPress={(e) => {
-            if (e.key === 'Enter') {
-              setAccountOptionsMenuOpen(true);
-            }
-          }}
           data-testid="account-list-item-menu-button"
         />
         {accountOptionsMenuOpen ? (

ui/components/multichain/account-list-item/index.scss

@@ -1,6 +1,7 @@
 .multichain-account-list-item {
   position: relative;
   width: 100%;
+  cursor: pointer;
 
   &:not(.account-list-item--selected) {
     &:hover,
@@ -9,6 +10,13 @@
     }
   }
 
+  &__account-name {
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+
   &__selected-indicator {
     width: 4px;
     height: calc(100% - 8px);