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

Make the dropdown widgets for swaps keyboard accessible

Browse Source
This commit is contained in:
David Walsh 2020-10-23 14:19:28 -05:00
parent 400881b1b1
commit cdda54155e
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js
View File

@ -26,14 +26,19 @@ export default function DropdownSearchList ({
hideItemIf, hideItemIf,
listContainerClassName, listContainerClassName,
}) { }) {
function close() {
setIsOpen(false)
onClose && onClose()
}
const t = useContext(I18nContext) const t = useContext(I18nContext)
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [selectedItem, setSelectedItem] = useState(startingItem) const [selectedItem, setSelectedItem] = useState(startingItem)
const onClickItem = useCallback((item) => { const onClickItem = useCallback((item) => {
onSelect && onSelect(item) onSelect && onSelect(item)
setSelectedItem(item) setSelectedItem(item)
setIsOpen(false) close();
onClose && onClose()
}, [onClose, onSelect]) }, [onClose, onSelect])
const onClickSelector = useCallback(() => { const onClickSelector = useCallback(() => {
@ -58,9 +63,10 @@ export default function DropdownSearchList ({
}, [externallySelectedItem, selectedItem, prevExternallySelectedItem]) }, [externallySelectedItem, selectedItem, prevExternallySelectedItem])
return ( return (
<div <button
className={classnames('dropdown-search-list', className)} className={classnames('dropdown-search-list', className)}
onClick={onClickSelector} onClick={onClickSelector}
onKeyUp={e => e.key === 'Escape' && close()}
> >
{!isOpen && ( {!isOpen && (
<div <div
@ -124,7 +130,7 @@ export default function DropdownSearchList ({
/> />
</> </>
)} )}
</div> </button>
) )
} }

2
ui/app/pages/swaps/dropdown-search-list/index.scss
View File

@ -1,6 +1,8 @@
.dropdown-search-list { .dropdown-search-list {
flex-flow: column; flex-flow: column;
border: none; border: none;
background: unset;
padding: 0;
&__search-list-open { &__search-list-open {
margin: 24px; margin: 24px;

3
ui/app/pages/swaps/searchable-item-list/index.scss
View File

@ -66,7 +66,8 @@
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid $Grey-100;
} }
&:hover { &:hover,
&:focus {
background: $Grey-000; background: $Grey-000;
} }

2
ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js
View File

@ -47,11 +47,13 @@ export default function ItemList ({
} = result } = result
return ( return (
<div <div
tabIndex="0"
className={classnames('searchable-item-list__item', { className={classnames('searchable-item-list__item', {
'searchable-item-list__item--selected': selected, 'searchable-item-list__item--selected': selected,
'searchable-item-list__item--disabled': disabled, 'searchable-item-list__item--disabled': disabled,
})} })}
onClick={() => onClickItem && onClickItem(result)} onClick={() => onClickItem && onClickItem(result)}
onKeyUp={e => e.key === "Enter" && onClickItem && onClickItem(result)}
key={`searchable-item-list-item-${i}`} key={`searchable-item-list-item-${i}`}
> >
{(iconUrl || primaryLabel) && (<UrlIcon url={iconUrl} name={primaryLabel} />)} {(iconUrl || primaryLabel) && (<UrlIcon url={iconUrl} name={primaryLabel} />)}