Make the dropdown widgets for swaps keyboard accessible

feature/default_network_editable
David Walsh 4 years ago
parent 400881b1b1
commit cdda54155e
  1. 14
      ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js
  2. 2
      ui/app/pages/swaps/dropdown-search-list/index.scss
  3. 3
      ui/app/pages/swaps/searchable-item-list/index.scss
  4. 2
      ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js

@ -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…
Cancel
Save