m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Improving identicon settings accessibility (#13760)

Browse Source 
* Improving identicon settings accessibility

* Make settings keyboard accessible
This commit is contained in:
ryanml 2022-04-04 10:36:56 -07:00 committed by GitHub
parent 78828f1b6e
commit 7e7b97d7c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/pages/settings/index.scss
View File

@ -298,6 +298,8 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
background: unset;
border: 1px solid transparent;
&__icon {
&--active {

20
ui/pages/settings/settings-tab/settings-tab.component.js
View File

@ -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">
<div
<button
data-test-id="jazz_icon"
onClick={() => setUseBlockie(false)}
className="settings-page__content-item__identicon__item"
>
<div
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">
<div
</button>
<button
data-test-id="blockie_icon"
onClick={() => setUseBlockie(true)}
className="settings-page__content-item__identicon__item"
>
<div
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>