mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Make the dropdown widgets for swaps keyboard accessible
This commit is contained in:
parent
400881b1b1
commit
cdda54155e
@ -26,14 +26,19 @@ export default function DropdownSearchList ({
|
||||
hideItemIf,
|
||||
listContainerClassName,
|
||||
}) {
|
||||
|
||||
function close() {
|
||||
setIsOpen(false)
|
||||
onClose && onClose()
|
||||
}
|
||||
|
||||
const t = useContext(I18nContext)
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [selectedItem, setSelectedItem] = useState(startingItem)
|
||||
const onClickItem = useCallback((item) => {
|
||||
onSelect && onSelect(item)
|
||||
setSelectedItem(item)
|
||||
setIsOpen(false)
|
||||
onClose && onClose()
|
||||
close();
|
||||
}, [onClose, onSelect])
|
||||
|
||||
const onClickSelector = useCallback(() => {
|
||||
@ -58,9 +63,10 @@ export default function DropdownSearchList ({
|
||||
}, [externallySelectedItem, selectedItem, prevExternallySelectedItem])
|
||||
|
||||
return (
|
||||
<div
|
||||
<button
|
||||
className={classnames('dropdown-search-list', className)}
|
||||
onClick={onClickSelector}
|
||||
onKeyUp={e => e.key === 'Escape' && close()}
|
||||
>
|
||||
{!isOpen && (
|
||||
<div
|
||||
@ -124,7 +130,7 @@ export default function DropdownSearchList ({
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,8 @@
|
||||
.dropdown-search-list {
|
||||
flex-flow: column;
|
||||
border: none;
|
||||
background: unset;
|
||||
padding: 0;
|
||||
|
||||
&__search-list-open {
|
||||
margin: 24px;
|
||||
|
@ -66,7 +66,8 @@
|
||||
border-bottom: 1px solid $Grey-100;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $Grey-000;
|
||||
}
|
||||
|
||||
|
@ -47,11 +47,13 @@ export default function ItemList ({
|
||||
} = result
|
||||
return (
|
||||
<div
|
||||
tabIndex="0"
|
||||
className={classnames('searchable-item-list__item', {
|
||||
'searchable-item-list__item--selected': selected,
|
||||
'searchable-item-list__item--disabled': disabled,
|
||||
})}
|
||||
onClick={() => onClickItem && onClickItem(result)}
|
||||
onKeyUp={e => e.key === "Enter" && onClickItem && onClickItem(result)}
|
||||
key={`searchable-item-list-item-${i}`}
|
||||
>
|
||||
{(iconUrl || primaryLabel) && (<UrlIcon url={iconUrl} name={primaryLabel} />)}
|
||||
|
Loading…
Reference in New Issue
Block a user