m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

UX: Multichain: Improve accessibility of accounts menu (#18309)

Browse Source 
* UX: Multichain: Improve accessibility of accounts menu

* Use button instead of a

* Pass color instead of using CSS
This commit is contained in:
David Walsh 2023-03-30 13:12:45 -05:00 committed by GitHub
parent ba307d7258
commit 6f7e382777
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = ` exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = `
<div> <div>
<button <div
class="box multichain-account-list-item box--padding-4 box--display-flex box--gap-2 box--flex-direction-row box--background-color-transparent" class="box multichain-account-list-item box--padding-4 box--display-flex box--gap-2 box--flex-direction-row box--background-color-transparent"
> >
<div <div
@ -60,7 +60,15 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
<div <div
class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default" class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
> >
Test Account <button
class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
>
<span
class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
Test Account
</span>
</button>
</div> </div>
<div <div
class="box box--display-flex box--flex-direction-row box--align-items-center" class="box box--display-flex box--flex-direction-row box--align-items-center"
@ -123,18 +131,17 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
</div> </div>
</div> </div>
<div> <div>
<div <button
aria-label="Test Account Options" aria-label="Test Account Options"
class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
data-testid="account-list-item-menu-button" data-testid="account-list-item-menu-button"
tabindex="0"
> >
<span <span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit" class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/more-vertical.svg');" style="mask-image: url('./images/icons/more-vertical.svg');"
/> />
</div> </button>
</div> </div>
</button> </div>
</div> </div>
`; `;

41
ui/components/multichain/account-list-item/account-list-item.js
View File

@ -17,6 +17,7 @@ import {
ICON_SIZES, ICON_SIZES,
AvatarFavicon, AvatarFavicon,
Tag, Tag,
ButtonLink,
} from '../../component-library'; } from '../../component-library';
import { import {
Color, Color,
@ -87,9 +88,7 @@ export const AccountListItem = ({
className={classnames('multichain-account-list-item', { className={classnames('multichain-account-list-item', {
'multichain-account-list-item--selected': selected, 'multichain-account-list-item--selected': selected,
})} })}
as="button" onClick={() => {
onClick={(e) => {
e.preventDefault();
// Without this check, the account will be selected after // Without this check, the account will be selected after
// the account options menu closes // the account options menu closes
if (!accountOptionsMenuOpen) { if (!accountOptionsMenuOpen) {
@ -121,17 +120,24 @@ export const AccountListItem = ({
gap={2} gap={2}
> >
<Text ellipsis as="div"> <Text ellipsis as="div">
{identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? ( <ButtonLink
<Tooltip onClick={onClick}
title={identity.name} className="multichain-account-list-item__account-name"
position="bottom" color={Color.textDefault}
wrapperClassName="multichain-account-list-item__tooltip" ellipsis
> >
{identity.name} {identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
</Tooltip> <Tooltip
) : ( title={identity.name}
identity.name position="bottom"
)} wrapperClassName="multichain-account-list-item__tooltip"
>
{identity.name}
</Tooltip>
) : (
identity.name
)}
</ButtonLink>
</Text> </Text>
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
@ -195,13 +201,6 @@ export const AccountListItem = ({
e.stopPropagation(); e.stopPropagation();
setAccountOptionsMenuOpen(true); setAccountOptionsMenuOpen(true);
}} }}
as="div"
tabIndex={0}
onKeyPress={(e) => {
if (e.key === 'Enter') {
setAccountOptionsMenuOpen(true);
}
}}
data-testid="account-list-item-menu-button" data-testid="account-list-item-menu-button"
/> />
{accountOptionsMenuOpen ? ( {accountOptionsMenuOpen ? (

8
ui/components/multichain/account-list-item/index.scss
View File

@ -1,6 +1,7 @@
.multichain-account-list-item { .multichain-account-list-item {
position: relative; position: relative;
width: 100%; width: 100%;
cursor: pointer;
&:not(.account-list-item--selected) { &:not(.account-list-item--selected) {
&:hover, &:hover,
@ -9,6 +10,13 @@
} }
} }
&__account-name {
&:hover,
&:focus {
opacity: 1;
}
}
&__selected-indicator { &__selected-indicator {
width: 4px; width: 4px;
height: calc(100% - 8px); height: calc(100% - 8px);