From b5088f65a9c68ca098db047f2c53958e8486605b Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 18 Mar 2022 10:16:11 -0500
Subject: [PATCH] ToggleButton: Use label so users can click text (#13876)

---
 test/e2e/tests/send-eth.spec.js                           | 4 ++--
 ui/components/ui/toggle-button/index.scss                 | 2 ++
 ui/components/ui/toggle-button/toggle-button.component.js | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js
index f17f116d9..fab46be79 100644
--- a/test/e2e/tests/send-eth.spec.js
+++ b/test/e2e/tests/send-eth.spec.js
@@ -190,7 +190,7 @@ describe('Send ETH from dapp using advanced gas controls', function () {
         await driver.clickElement({ text: 'Settings', tag: 'div' });
         await driver.clickElement({ text: 'Advanced', tag: 'div' });
         await driver.clickElement(
-          '[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > div > div',
+          '[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > label > div',
         );
         const advancedGasTitle = await driver.findElement({
           text: 'Advanced gas controls',
@@ -198,7 +198,7 @@ describe('Send ETH from dapp using advanced gas controls', function () {
         });
         await driver.scrollToElement(advancedGasTitle);
         await driver.clickElement(
-          '[data-testid="advanced-setting-advanced-gas-inline"] .settings-page__content-item-col > div > div',
+          '[data-testid="advanced-setting-advanced-gas-inline"] .settings-page__content-item-col > label > div',
         );
         windowHandles = await driver.getAllWindowHandles();
         extension = windowHandles[0];
diff --git a/ui/components/ui/toggle-button/index.scss b/ui/components/ui/toggle-button/index.scss
index 57bbd4505..503a7f1d0 100644
--- a/ui/components/ui/toggle-button/index.scss
+++ b/ui/components/ui/toggle-button/index.scss
@@ -1,5 +1,7 @@
 .toggle-button {
   display: flex;
+  cursor: pointer;
+
   $self: &;
 
   &__status {
diff --git a/ui/components/ui/toggle-button/toggle-button.component.js b/ui/components/ui/toggle-button/toggle-button.component.js
index 271707cbe..10a2bb538 100644
--- a/ui/components/ui/toggle-button/toggle-button.component.js
+++ b/ui/components/ui/toggle-button/toggle-button.component.js
@@ -52,7 +52,7 @@ const ToggleButton = (props) => {
   const modifier = value ? 'on' : 'off';
 
   return (
-    <div
+    <label
       tabIndex="0"
       onKeyDown={(e) => {
         if (e.key === 'Enter') {
@@ -82,7 +82,7 @@ const ToggleButton = (props) => {
         <span className="toggle-button__label-off">{offLabel}</span>
         <span className="toggle-button__label-on">{onLabel}</span>
       </div>
-    </div>
+    </label>
   );
 };