From cdda54155e72e3ea3590e4fcb9f6add70f8e6764 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 23 Oct 2020 14:19:28 -0500 Subject: [PATCH] Make the dropdown widgets for swaps keyboard accessible --- .../dropdown-search-list/dropdown-search-list.js | 14 ++++++++++---- ui/app/pages/swaps/dropdown-search-list/index.scss | 2 ++ ui/app/pages/swaps/searchable-item-list/index.scss | 3 ++- .../item-list/item-list.component.js | 2 ++ 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js b/ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js index 5628640d9..786c9bdb0 100644 --- a/ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js +++ b/ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.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 ( -
e.key === 'Escape' && close()} > {!isOpen && (
)} -
+ ) } diff --git a/ui/app/pages/swaps/dropdown-search-list/index.scss b/ui/app/pages/swaps/dropdown-search-list/index.scss index 86e1338a1..f3b4b85b5 100644 --- a/ui/app/pages/swaps/dropdown-search-list/index.scss +++ b/ui/app/pages/swaps/dropdown-search-list/index.scss @@ -1,6 +1,8 @@ .dropdown-search-list { flex-flow: column; border: none; + background: unset; + padding: 0; &__search-list-open { margin: 24px; diff --git a/ui/app/pages/swaps/searchable-item-list/index.scss b/ui/app/pages/swaps/searchable-item-list/index.scss index e5895a265..73eb5b09d 100644 --- a/ui/app/pages/swaps/searchable-item-list/index.scss +++ b/ui/app/pages/swaps/searchable-item-list/index.scss @@ -66,7 +66,8 @@ border-bottom: 1px solid $Grey-100; } - &:hover { + &:hover, + &:focus { background: $Grey-000; } diff --git a/ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js b/ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js index e7a841e66..7cdd3ffd2 100644 --- a/ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js +++ b/ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js @@ -47,11 +47,13 @@ export default function ItemList ({ } = result return (
onClickItem && onClickItem(result)} + onKeyUp={e => e.key === "Enter" && onClickItem && onClickItem(result)} key={`searchable-item-list-item-${i}`} > {(iconUrl || primaryLabel) && ()}