[chrome://omnibox omnibox] 'space'/'enter' to activate focused buttons.

The copy, paste, download, upload, and batch buttons can be focused with
the tab key or mouse clicks. However, pressing 'space' or 'enter' does
not activate the focused button.

The download, upload, and batch buttons are labels wrapping invisible
file inputs. This is required in order to style file inputs. The copy
and paste buttons are spans for consistency with the other 3 buttons.

Since neither spans nor labels are typically intractable, they don't
inherently process 'space' and 'enter' key presses when focused as
standard buttons do. This CL explicitly adds a keypress listener to do
so.

Bug: 1040024
Change-Id: I182a238b8daf3bd25d874b090752173ae1738c41
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1992309
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#729853}

chrome/browser/resources/omnibox/omnibox_element.js

@@ -21,15 +21,24 @@ export class OmniboxElement extends HTMLElement {
   }
 
   /**
-   * Get an element that's known to exist within this OmniboxElement.
-   * Searches local shadow root for element by query.
+   * Finds the 1st element matching the query within the local shadow root. At
+   * least 1 matching element should exist.
    * @param {string} query
    * @return {!Element}
    */
-  $$(query) {
+  $(query) {
     return OmniboxElement.getByQuery_(query, this.shadowRoot);
   }
 
+  /**
+   * Finds all elements matching the query within the local shadow root.
+   * @param {string} query
+   * @return {!NodeList<!Element>}
+   */
+  $$(query) {
+    return (this.shadowRoot || document).querySelectorAll(query);
+  }
+
   /**
    * Get a template that's known to exist within the DOM document.
    * @param {string} templateId

chrome/browser/resources/omnibox/omnibox_output.js

@@ -94,7 +94,7 @@ export class OmniboxOutput extends OmniboxElement {
    */
   clearResultsGroups_() {
     this.resultsGroups_ = [];
-    clearChildren(this.$$('#contents'));
+    clearChildren(this.$('#contents'));
   }
 
   /**
@@ -104,7 +104,7 @@ export class OmniboxOutput extends OmniboxElement {
   createResultsGroup_(response) {
     const resultsGroup = OutputResultsGroup.create(response);
     this.resultsGroups_.push(resultsGroup);
-    this.$$('#contents').appendChild(resultsGroup);
+    this.$('#contents').appendChild(resultsGroup);
 
     this.updateDisplay_();
     this.updateFilterHighlights_();
@@ -238,17 +238,16 @@ class OutputResultsGroup extends OmniboxElement {
     /** @private {!Array<!Element>} */
     this.innerHeaders_ = [];
 
-    customElements.whenDefined(this.$$('output-results-details').localName)
-        .then(
-            () => this.$$('output-results-details').setDetails(this.details_));
+    customElements.whenDefined(this.$('output-results-details').localName)
+        .then(() => this.$('output-results-details').setDetails(this.details_));
 
-    this.$$('#table').appendChild(this.renderHeader_());
-    this.$$('#table').appendChild(this.combinedResults);
+    this.$('#table').appendChild(this.renderHeader_());
+    this.$('#table').appendChild(this.combinedResults);
     this.individualResultsList.forEach(results => {
       const innerHeader = this.renderInnerHeader_(results);
       this.innerHeaders_.push(innerHeader);
-      this.$$('#table').appendChild(innerHeader);
-      this.$$('#table').appendChild(results);
+      this.$('#table').appendChild(innerHeader);
+      this.$('#table').appendChild(results);
     });
   }
 
@@ -288,7 +287,7 @@ class OutputResultsGroup extends OmniboxElement {
   updateVisibility(showIncompleteResults, showDetails, showAllProviders) {
     // Show the details section above each table if showDetails or
     // showIncompleteResults are true.
-    this.$$('output-results-details').hidden =
+    this.$('output-results-details').hidden =
         !showDetails && !showIncompleteResults;
 
     // Show individual results when showAllProviders is true.
@@ -343,12 +342,12 @@ class OutputResultsDetails extends OmniboxElement {
 
   /** @param {ResultsDetails} details */
   setDetails(details) {
-    this.$$('#cursor-position').textContent = details.cursorPosition;
-    this.$$('#time').textContent = details.time;
-    this.$$('#done').textContent = details.done;
-    this.$$('#type').textContent = details.type;
-    this.$$('#host').textContent = details.host;
-    this.$$('#is-typed-host').textContent = details.isTypedHost;
+    this.$('#cursor-position').textContent = details.cursorPosition;
+    this.$('#time').textContent = details.time;
+    this.$('#done').textContent = details.done;
+    this.$('#type').textContent = details.type;
+    this.$('#host').textContent = details.host;
+    this.$('#is-typed-host').textContent = details.isTypedHost;
   }
 }