[footer] Add support for left/right arrow keys

CL:2201336 swaps a native <select> control for a <div> that emulates
select behavior and allows it to be styled with CSS.

Add support for using the left and right arrow keys which behave the
same as up and down in a real <select> control.

Bug: 1097454, 1002410
Change-Id: I854b794e8bb34200a83cf3a3f11ff4ed007808bb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2282831
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#786177}

ui/file_manager/file_manager/foreground/js/ui/dialog_footer.js

@@ -198,7 +198,7 @@ class DialogFooter {
           evt.stopPropagation();
           evt.preventDefault();
         }
-        // Drop through.
+        // fall through
       case 'Tab':
         this.selectHideDropDown(options);
         break;
@@ -213,27 +213,43 @@ class DialogFooter {
         }
         break;
       case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
       case 'ArrowUp':
         const selectedItem = options.querySelector('.selected');
+        const isCollapsed = options.getAttribute('expanded') !== 'expanded';
         let selectionChanged = false;
         if (selectedItem) {
-          if (evt.key === 'ArrowDown') {
-            if (selectedItem.nextSibling) {
-              this.setOptionSelected(
-                  /** @type {HTMLOptionElement} */ (selectedItem.nextSibling));
-              selectionChanged = true;
-            }
-          } else {  // ArrowUp.
-            if (selectedItem.previousSibling) {
-              this.setOptionSelected(
-                  /** @type {HTMLOptionElement} */ (
-                      selectedItem.previousSibling));
-              selectionChanged = true;
-            }
+          switch (evt.key) {
+            case 'ArrowRight':
+              if (!isCollapsed) {
+                break;
+              }
+              // fall through
+            case 'ArrowDown':
+              if (selectedItem.nextSibling) {
+                this.setOptionSelected(
+                    /** @type {HTMLOptionElement} */ (
+                        selectedItem.nextSibling));
+                selectionChanged = true;
+              }
+              break;
+            case 'ArrowLeft':
+              if (!isCollapsed) {
+                break;
+              }
+              // fall through
+            case 'ArrowUp':
+              if (selectedItem.previousSibling) {
+                this.setOptionSelected(
+                    /** @type {HTMLOptionElement} */ (
+                        selectedItem.previousSibling));
+                selectionChanged = true;
+              }
+              break;
           }
         }
-        if (selectionChanged &&
-            options.getAttribute('expanded') !== 'expanded') {
+        if (selectionChanged && isCollapsed) {
           const changeEvent = new Event('change');
           this.fileTypeSelector.dispatchEvent(changeEvent);
         }