From cdda54155e72e3ea3590e4fcb9f6add70f8e6764 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
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 (
-    <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>
   )
 }
 
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 (
                   <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} />)}