Improving identicon settings accessibility (#13760)

* Improving identicon settings accessibility

* Make settings keyboard accessible

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 {

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>