DevTools: Make preview palette accessibile

This change makes palette switcher keyboard and sreen-reader accessible.
The palette-swicher arrow icon is assigned a role button and is set aria-label "Preview palettes".
Now, when user presses Enter or Space it opens up list of preview-palettes which is identical with click handler.

Each preview-palette like Material, Custom CSS Variables, Page colors are assigned a role button because clicking
anywhere in the preview-palette row or a particular swatch in the palette just opens up the palette.
So, in this change palette is keyboard navigable through tabbing.

Screen-reader accessibility:
When user tabs through each of preview-palette or palette-switcher, it reads name and a role button.

Gif showing preview palette changes https://imgur.com/tFknmcF
Note: Gif updated to show keypresses

Bug: 963183

Change-Id: I560b94d76e7e9a17755cc6cdac1e39643cc7811e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1688277
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#682818}

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

@@ -129,6 +129,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
     this._palettes = new Map();
     this._palettePanel = this.contentElement.createChild('div', 'palette-panel');
     this._palettePanel.tabIndex = -1;
+    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');
@@ -140,7 +141,11 @@ ColorPicker.Spectrum = class extends UI.VBox {
     const paletteSwitcher =
         this._paletteSectionContainer.createChild('div', 'spectrum-palette-switcher spectrum-switcher');
     appendSwitcherIcon(paletteSwitcher);
+    UI.ARIAUtils.markAsButton(paletteSwitcher);
+    UI.ARIAUtils.setAccessibleName(paletteSwitcher, ls`Preview palettes`);
+    paletteSwitcher.tabIndex = 0;
     paletteSwitcher.addEventListener('click', this._togglePalettePanel.bind(this, true));
+    paletteSwitcher.addEventListener('keydown', this._onTogglePaletteKeydown.bind(this));
 
     this._deleteIconToolbar = new UI.Toolbar('delete-color-toolbar');
     this._deleteButton = new UI.ToolbarButton('', 'largeicon-trash-bin');
@@ -241,6 +246,26 @@ ColorPicker.Spectrum = class extends UI.VBox {
     this._focus();
   }
 
+  /**
+   * @param {!Event} event
+   */
+  _onTogglePaletteKeydown(event) {
+    if (isEnterKey(event) || event.key === ' ') {
+      this._togglePalettePanel(true);
+      event.consume(true);
+    }
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _onPalettePanelKeydown(event) {
+    if (isEscKey(event)) {
+      this._togglePalettePanel(false);
+      event.consume(true);
+    }
+  }
+
   /**
    * (Suppress warning about preventScroll)
    * @suppress {checkTypes}
@@ -499,6 +524,8 @@ ColorPicker.Spectrum = class extends UI.VBox {
   _createPreviewPaletteElement(palette) {
     const colorsPerPreviewRow = 5;
     const previewElement = createElementWithClass('div', 'palette-preview');
+    UI.ARIAUtils.markAsButton(previewElement);
+    previewElement.tabIndex = 0;
     const titleElement = previewElement.createChild('div', 'palette-preview-title');
     titleElement.textContent = palette.title;
     let i;
@@ -507,6 +534,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
     for (; i < colorsPerPreviewRow; i++)
       previewElement.createChild('div', 'spectrum-palette-color empty-color');
     previewElement.addEventListener('click', this._paletteSelected.bind(this, palette));
+    previewElement.addEventListener('keydown', this._onSelectedPaletteKeydown.bind(this, palette));
     return previewElement;
   }
 
@@ -518,6 +546,17 @@ ColorPicker.Spectrum = class extends UI.VBox {
     this._showPalette(palette, true);
   }
 
+  /**
+   * @param {!ColorPicker.Spectrum.Palette} palette
+   * @param {!Event} event
+   */
+  _onSelectedPaletteKeydown(palette, event) {
+    if (isEnterKey(event) || event.key === ' ') {
+      this._paletteSelected(palette);
+      event.consume(true);
+    }
+  }
+
   /**
    * @param {boolean=} force
    */

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

@@ -27,6 +27,9 @@
   <message name="IDS_DEVTOOLS_74421a69b1bc40c166be4de5caf0b036" desc="Text of a DOM element in Contrast Details of the Color Picker">
     Contrast ratio
   </message>
+  <message name="IDS_DEVTOOLS_a03d142f9d52eae6793de3951b4b58f9" desc="Screen reader reads this text when palette switcher button receives focus">
+    Preview palettes
+  </message>
   <message name="IDS_DEVTOOLS_b201b2e7e7a20df48b625f20c2f0933e" desc="Title text content in Spectrum of the Color Picker">
     Color Palettes
   </message>

third_party/blink/renderer/devtools/front_end/color_picker/spectrum.css

@@ -331,6 +331,10 @@
     background-color: #EEEEEE;
 }
 
+.spectrum-switcher[data-keyboard-focus="true"]:focus {
+  background-color: var(--focus-bg-color);
+}
+
 .spectrum-eye-dropper {
     width: 32px;
     height: 24px;
@@ -490,6 +494,7 @@ div.palette-preview {
     margin-top: 1px;
 }
 
+.palette-preview[data-keyboard-focus="true"]:focus,
 .palette-preview:hover {
     background-color: #eee;
 }