DevTools: Make close button keyboard accessible

Close button in color picker appears when user presses button rightmost arrow button to launch palette panel.
This change updates focus from palette panel to close button. This is because earlier user had to press extra tab to reach to control.

This change handles close button on ENTER, SPACEBAR and ESC key events.
ESC key is for user to escape from the palette panel and return back to earlier state.
Earlier, pressing ENTER would close the color picker this change handles it by consuming the event.

Gif showing the change https://imgur.com/vt2saeT

This change was reviewed earlier here https://chromium-review.googlesource.com/c/chromium/src/+/1687564 has been broken down
1. Make swatches in color palette keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1817344
2. Make swatches screen reader accessible https://chromium-review.googlesource.com/c/chromium/src/+/1816875
3. Make shades of a color palette keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1816873
4. Make close button keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1816874

Bug: 963183
Change-Id: I573e74a0e6adb5130f524f34016760233e14f5ad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1816874
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: John Emau <John.Emau@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#706977}

third_party/blink/renderer/devtools/front_end/color_picker/Spectrum.js

@@ -135,7 +135,6 @@ ColorPicker.Spectrum = class extends UI.VBox {
     /** @type {!Map.<string, !ColorPicker.Spectrum.Palette>} */
     this._palettes = new Map();
     this._palettePanel = this.contentElement.createChild('div', 'palette-panel');
-    this._palettePanel.addEventListener('keydown', this._onPalettePanelKeydown.bind(this));
     this._palettePanelShowing = false;
     this._paletteSectionContainer = this.contentElement.createChild('div', 'spectrum-palette-container');
     this._paletteContainer = this._paletteSectionContainer.createChild('div', 'spectrum-palette');
@@ -241,9 +240,10 @@ ColorPicker.Spectrum = class extends UI.VBox {
     const title = this._palettePanel.createChild('div', 'palette-title');
     title.textContent = Common.UIString('Color Palettes');
     const toolbar = new UI.Toolbar('', this._palettePanel);
-    const closeButton = new UI.ToolbarButton('Return to color picker', 'largeicon-delete');
-    closeButton.addEventListener(UI.ToolbarButton.Events.Click, this._togglePalettePanel.bind(this, false));
-    toolbar.appendToolbarItem(closeButton);
+    this._closeButton = new UI.ToolbarButton(ls`Return to color picker`, 'largeicon-delete');
+    this._closeButton.addEventListener(UI.ToolbarButton.Events.Click, this._togglePalettePanel.bind(this, false));
+    this._closeButton.element.addEventListener('keydown', this._onCloseBtnKeydown.bind(this));
+    toolbar.appendToolbarItem(this._closeButton);
     for (const palette of this._palettes.values()) {
       this._palettePanel.appendChild(this._createPreviewPaletteElement(palette));
     }
@@ -267,8 +267,8 @@ ColorPicker.Spectrum = class extends UI.VBox {
   /**
    * @param {!Event} event
    */
-  _onPalettePanelKeydown(event) {
-    if (isEscKey(event)) {
+  _onCloseBtnKeydown(event) {
+    if (isEscKey(event) || isEnterOrSpaceKey(event)) {
       this._togglePalettePanel(false);
       event.consume(true);
     }
@@ -283,7 +283,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
       return;
     }
     if (this._palettePanelShowing) {
-      this._palettePanel.focus({preventScroll: true});
+      this._closeButton.element.focus({preventScroll: true});
     } else {
       this.contentElement.focus();
     }

third_party/blink/renderer/devtools/front_end/color_picker/color_picker_strings.grdp

@@ -36,6 +36,9 @@
   <message name="IDS_DEVTOOLS_bbe0cb0a04956e97e8fc70f519d10e0d" desc="Color element title in Spectrum of the Color Picker">
     <ph name="PALETTE_COLORS_I_">$1s<ex>#9c1724</ex></ph>. Long-click to show alternate shades.
   </message>
+  <message name="IDS_DEVTOOLS_c5bdbf2fd625704541f51288fd37b726" desc="Label for close button in Color Picker">
+    Return to color picker
+  </message>
   <message name="IDS_DEVTOOLS_d1e2107b34fa404fabd54bcce4fd858f" desc="Tooltip text that appears when hovering over the largeicon add button in the Spectrum of the Color Picker">
     Add to palette
   </message>