Make the dropdown widgets for swaps keyboard accessible

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)
+    close();
-    onClose && onClose()
   }, [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>
   )
 }
 

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;

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;
     }
 

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} />)}