m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01: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

17
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`] = `
<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"
>
<div
@ -59,8 +59,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
>
<div
class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
<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
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
<button
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"
data-testid="account-list-item-menu-button"
tabindex="0"
>
<span
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');"
/>
</div>
</div>
</button>
</div>
</div>
</div>
`;

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

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

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

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