From 7e7b97d7c9eeb42096ec707f178f9d0997aff326 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 4 Apr 2022 10:36:56 -0700
Subject: [PATCH] Improving identicon settings accessibility (#13760)

* Improving identicon settings accessibility

* Make settings keyboard accessible
---
 ui/pages/settings/index.scss                  |  2 ++
 .../settings-tab/settings-tab.component.js    | 20 +++++++++++--------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index bea6e6e6e..7696fce54 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -298,6 +298,8 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
+        background: unset;
+        border: 1px solid transparent;
 
         &__icon {
           &--active {
diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js
index 8a2654cc2..aacff5327 100644
--- a/ui/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/pages/settings/settings-tab/settings-tab.component.js
@@ -200,16 +200,18 @@ export default class SettingsTab extends PureComponent {
             {t('jazzAndBlockies')}
           </span>
           <div className="settings-page__content-item__identicon">
-            <div className="settings-page__content-item__identicon__item">
+            <button
+              data-test-id="jazz_icon"
+              onClick={() => setUseBlockie(false)}
+              className="settings-page__content-item__identicon__item"
+            >
               <div
-                data-test-id="jazz_icon"
                 className={classnames(
                   'settings-page__content-item__identicon__item__icon',
                   {
                     'settings-page__content-item__identicon__item__icon--active': !useBlockie,
                   },
                 )}
-                onClick={() => setUseBlockie(false)}
               >
                 <Jazzicon
                   id="jazzicon"
@@ -227,17 +229,19 @@ export default class SettingsTab extends PureComponent {
               >
                 {t('jazzicons')}
               </Typography>
-            </div>
-            <div className="settings-page__content-item__identicon__item">
+            </button>
+            <button
+              data-test-id="blockie_icon"
+              onClick={() => setUseBlockie(true)}
+              className="settings-page__content-item__identicon__item"
+            >
               <div
-                data-test-id="blockie_icon"
                 className={classnames(
                   'settings-page__content-item__identicon__item__icon',
                   {
                     'settings-page__content-item__identicon__item__icon--active': useBlockie,
                   },
                 )}
-                onClick={() => setUseBlockie(true)}
               >
                 <BlockieIdenticon
                   id="blockies"
@@ -253,7 +257,7 @@ export default class SettingsTab extends PureComponent {
               >
                 {t('blockies')}
               </Typography>
-            </div>
+            </button>
           </div>
         </div>
       </div>