From b4bc033b729f5e5991caeb933896c996f57b41dc Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 19 Jul 2023 10:12:24 -0700
Subject: [PATCH] Updating network list item hover (#20063)

* Updating network list item hover

* Updating e2e test

* Updating e2e test

* Updating e2e test

* Updating more e2e tests

* Updating more e2e tests
---
 test/e2e/tests/add-custom-network.spec.js            |  2 +-
 test/e2e/tests/chain-interactions.spec.js            |  2 +-
 test/e2e/tests/custom-rpc-history.spec.js            |  4 ++--
 test/e2e/tests/import-flow.spec.js                   |  2 +-
 test/e2e/tests/provider-api.spec.js                  |  2 +-
 .../__snapshots__/network-list-item.test.js.snap     |  8 ++------
 .../network-list-item/network-list-item.js           | 12 +++++++-----
 7 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/test/e2e/tests/add-custom-network.spec.js b/test/e2e/tests/add-custom-network.spec.js
index efea4d1d2..d094324ea 100644
--- a/test/e2e/tests/add-custom-network.spec.js
+++ b/test/e2e/tests/add-custom-network.spec.js
@@ -363,7 +363,7 @@ describe('Custom network', function () {
 
         const arbitrumNetwork = await driver.findElements({
           text: 'Arbitrum One',
-          tag: 'span',
+          tag: 'button',
         });
         assert.ok(arbitrumNetwork.length, 1);
       },
diff --git a/test/e2e/tests/chain-interactions.spec.js b/test/e2e/tests/chain-interactions.spec.js
index 3135ab168..efb83f35e 100644
--- a/test/e2e/tests/chain-interactions.spec.js
+++ b/test/e2e/tests/chain-interactions.spec.js
@@ -63,7 +63,7 @@ describe('Chain Interactions', function () {
         await driver.clickElement('[data-testid="network-display"]');
         const ganacheChain = await driver.findElements({
           text: `Localhost ${port}`,
-          tag: 'span',
+          tag: 'button',
         });
         assert.ok(ganacheChain.length, 1);
       },
diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js
index fd8e8314b..46bde39df 100644
--- a/test/e2e/tests/custom-rpc-history.spec.js
+++ b/test/e2e/tests/custom-rpc-history.spec.js
@@ -185,7 +185,7 @@ describe('Stores custom RPC history', function () {
         await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('[data-testid="network-display"]');
 
-        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' });
+        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'button' });
       },
     );
   });
@@ -237,7 +237,7 @@ describe('Stores custom RPC history', function () {
         });
 
         // click Mainnet to dismiss network dropdown
-        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' });
+        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'button' });
 
         assert.equal(customRpcs.length, 2);
       },
diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js
index dca9e2f72..3991350a6 100644
--- a/test/e2e/tests/import-flow.spec.js
+++ b/test/e2e/tests/import-flow.spec.js
@@ -79,7 +79,7 @@ describe('Import flow', function () {
         await driver.delay(largeDelayMs);
         await driver.clickElement('[data-testid="network-display"]');
         await driver.clickElement('.toggle-button');
-        await driver.clickElement({ text: 'Localhost', tag: 'span' });
+        await driver.clickElement({ text: 'Localhost', tag: 'button' });
 
         // choose Create account from the account menu
         await driver.clickElement('[data-testid="account-menu-icon"]');
diff --git a/test/e2e/tests/provider-api.spec.js b/test/e2e/tests/provider-api.spec.js
index b8c0e0edc..79ac8f9fe 100644
--- a/test/e2e/tests/provider-api.spec.js
+++ b/test/e2e/tests/provider-api.spec.js
@@ -47,7 +47,7 @@ describe('MetaMask', function () {
         await driver.switchToWindow(windowHandles[0]);
 
         await driver.clickElement('[data-testid="network-display"]');
-        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' });
+        await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'button' });
 
         await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
         const switchedNetworkDiv = await driver.waitForSelector({
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index dea38ffb6..a32760c67 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -18,13 +18,9 @@ exports[`NetworkListItem renders properly 1`] = `
       class="mm-box multichain-network-list-item__network-name"
     >
       <button
-        class="mm-box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
+        class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
       >
-        <span
-          class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
-        >
-          Polygon
-        </span>
+        Polygon
       </button>
     </div>
     <button
diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
index 88f84f7ca..442568a69 100644
--- a/ui/components/multichain/network-list-item/network-list-item.js
+++ b/ui/components/multichain/network-list-item/network-list-item.js
@@ -16,7 +16,7 @@ import {
 import {
   AvatarNetwork,
   ButtonIcon,
-  ButtonLink,
+  Text,
   IconName,
   Box,
 } from '../../component-library';
@@ -55,7 +55,7 @@ export const NetworkListItem = ({
 
   useEffect(() => {
     if (networkRef.current && selected) {
-      networkRef.current.querySelector('.mm-button-link').focus();
+      networkRef.current.focus();
     }
   }, [networkRef, selected]);
 
@@ -72,7 +72,6 @@ export const NetworkListItem = ({
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
       width={BlockSize.Full}
-      ref={networkRef}
     >
       {selected && (
         <Box
@@ -87,12 +86,15 @@ export const NetworkListItem = ({
         src={iconSrc}
       />
       <Box className="multichain-network-list-item__network-name">
-        <ButtonLink
+        <Text
+          ref={networkRef}
+          as="button"
           onClick={(e) => {
             e.stopPropagation();
             onClick();
           }}
           color={TextColor.textDefault}
+          backgroundColor={BackgroundColor.transparent}
           ellipsis
         >
           {name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
@@ -106,7 +108,7 @@ export const NetworkListItem = ({
           ) : (
             name
           )}
-        </ButtonLink>
+        </Text>
       </Box>
       {onDeleteClick ? (
         <ButtonIcon