From 40656c70d15b4451e18e11a084e873e309a18bf1 Mon Sep 17 00:00:00 2001
From: Arun <arun4033622@gmail.com>
Date: Tue, 23 Mar 2021 16:48:10 +0530
Subject: [PATCH] fix: Make help toggle tabbable (#3310)

* fix: Make help toggle tabbable

* Update src/components/HelpIcon.tsx

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
---
 src/components/HelpIcon.tsx | 12 +++++++++---
 src/css/styles.scss         |  8 ++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/HelpIcon.tsx b/src/components/HelpIcon.tsx
index 8ec09d4e..5e12154b 100644
--- a/src/components/HelpIcon.tsx
+++ b/src/components/HelpIcon.tsx
@@ -9,7 +9,13 @@ type HelpIconProps = {
 };
 
 export const HelpIcon = (props: HelpIconProps) => (
-  <label title={`${props.title} — ?`} className="help-icon">
-    <div onClick={props.onClick}>{questionCircle}</div>
-  </label>
+  <button
+    className="help-icon"
+    onClick={props.onClick}
+    type="button"
+    title={`${props.title} — ?`}
+    aria-label={props.title}
+  >
+    {questionCircle}
+  </button>
 );
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 4fd03820..2fecd353 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -454,6 +454,14 @@
     fill: $oc-gray-6;
     bottom: 14px;
     width: 1.5rem;
+    padding: 0;
+    margin: 0;
+    background: none;
+    color: var(--icon-fill-color);
+
+    &:hover {
+      background: none;
+    }
 
     :root[dir="ltr"] & {
       right: 14px;