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; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: unset;
border: 1px solid transparent;
&__icon { &__icon {
&--active { &--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')} {t('jazzAndBlockies')}
</span> </span>
<div className="settings-page__content-item__identicon"> <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 <div
data-test-id="jazz_icon"
className={classnames( className={classnames(
'settings-page__content-item__identicon__item__icon', 'settings-page__content-item__identicon__item__icon',
{ {
'settings-page__content-item__identicon__item__icon--active': !useBlockie, 'settings-page__content-item__identicon__item__icon--active': !useBlockie,
}, },
)} )}
onClick={() => setUseBlockie(false)}
> >
<Jazzicon <Jazzicon
id="jazzicon" id="jazzicon"
@ -227,17 +229,19 @@ export default class SettingsTab extends PureComponent {
> >
{t('jazzicons')} {t('jazzicons')}
</Typography> </Typography>
</div> </button>
<div className="settings-page__content-item__identicon__item"> <button
data-test-id="blockie_icon"
onClick={() => setUseBlockie(true)}
className="settings-page__content-item__identicon__item"
>
<div <div
data-test-id="blockie_icon"
className={classnames( className={classnames(
'settings-page__content-item__identicon__item__icon', 'settings-page__content-item__identicon__item__icon',
{ {
'settings-page__content-item__identicon__item__icon--active': useBlockie, 'settings-page__content-item__identicon__item__icon--active': useBlockie,
}, },
)} )}
onClick={() => setUseBlockie(true)}
> >
<BlockieIdenticon <BlockieIdenticon
id="blockies" id="blockies"
@ -253,7 +257,7 @@ export default class SettingsTab extends PureComponent {
> >
{t('blockies')} {t('blockies')}
</Typography> </Typography>
</div> </button>
</div> </div>
</div> </div>
</div> </div>