Merge pull request #9702 from darkwing/swaps-keyboard-dropdown

Swaps keyboard dropdown

ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js

@@ -29,12 +29,16 @@ export default function DropdownSearchList ({
   const t = useContext(I18nContext)
   const [isOpen, setIsOpen] = useState(false)
   const [selectedItem, setSelectedItem] = useState(startingItem)
+  const close = useCallback(() => {
+    setIsOpen(false)
+    onClose && onClose()
+  }, [onClose])
+
   const onClickItem = useCallback((item) => {
     onSelect && onSelect(item)
     setSelectedItem(item)
-    setIsOpen(false)
-    onClose && onClose()
-  }, [onClose, onSelect])
+    close()
+  }, [onSelect, close])
 
   const onClickSelector = useCallback(() => {
     if (!isOpen) {
@@ -58,9 +62,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 +129,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

@@ -34,6 +34,7 @@ export default function ItemList ({
                   return null
                 }
 
+                const onClick = () => onClickItem && onClickItem(result)
                 const {
                   iconUrl,
                   identiconAddress,
@@ -47,11 +48,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)}
+                    onClick={onClick}
+                    onKeyUp={(e) => e.key === 'Enter' && onClick()}
                     key={`searchable-item-list-item-${i}`}
                   >
                     {(iconUrl || primaryLabel) && (<UrlIcon url={iconUrl} name={primaryLabel} />)}