DevTools: Make swatches screen reader accessible

Screen-reader accessibility: Each palette is assigned a role button so, when user navigates to each palette it reads e.g. 'Color #3F51B5 button'

This change was reviewed earlier here https://chromium-review.googlesource.com/c/chromium/src/+/1687564 which 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

Gif showing keyboard navigation which has been split out from this change https://imgur.com/m3iVkOj

Bug: 963183
Change-Id: I244edc0cabf5aa5d6df51d3cf31efa00f64a666c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1816875
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: John Emau <John.Emau@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#706983}

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

@@ -317,6 +317,8 @@ ColorPicker.Spectrum = class extends UI.VBox {
       const animationDelay = animate ? i * 100 / palette.colors.length : 0;
       const colorElement = this._createPaletteColor(palette.colors[i], palette.colorNames[i], animationDelay);
       colorElement.tabIndex = -1;
+      UI.ARIAUtils.markAsButton(colorElement);
+      UI.ARIAUtils.setAccessibleName(colorElement, ls`Color ${palette.colors[i]}`);
       colorElement.addEventListener(
           'mousedown',
           this._paletteColorSelected.bind(this, palette.colors[i], palette.colorNames[i], palette.matchUserFormat));
@@ -334,6 +336,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
         shadow = colorElement.createChild('div', 'spectrum-palette-color spectrum-palette-color-shadow');
         shadow.style.background = palette.colors[i];
         colorElement.title = ls`${palette.colors[i]}. Long-click to show alternate shades.`;
+        UI.ARIAUtils.setAccessibleName(colorElement, colorElement.title);
         new UI.LongClickController(colorElement, this._showLightnessShades.bind(this, colorElement, palette.colors[i]));
       }
       this._paletteContainer.appendChild(colorElement);
@@ -393,6 +396,8 @@ ColorPicker.Spectrum = class extends UI.VBox {
     for (let i = shades.length - 1; i >= 0; i--) {
       const shadeElement =
           this._createPaletteColor(shades[i], undefined /* colorName */, i * 200 / shades.length + 100);
+      UI.ARIAUtils.markAsButton(shadeElement);
+      UI.ARIAUtils.setAccessibleName(shadeElement, ls`Color ${shades[i]}`);
       shadeElement.addEventListener('mousedown', this._paletteColorSelected.bind(this, shades[i], shades[i], false));
       this._shadesContainer.appendChild(shadeElement);
     }

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

@@ -27,6 +27,9 @@
   <message name="IDS_DEVTOOLS_a03d142f9d52eae6793de3951b4b58f9" desc="Screen reader reads this text when palette switcher button receives focus">
     Preview palettes
   </message>
+  <message name="IDS_DEVTOOLS_aba9beb2d259a7cff58a65229dcbbaf4" desc="Aria label which declares hex value of a swatch in the Color Picker">
+    Color <ph name="PALETTE_COLORS_I_">$1s<ex>#969696</ex></ph>
+  </message>
   <message name="IDS_DEVTOOLS_b201b2e7e7a20df48b625f20c2f0933e" desc="Title text content in Spectrum of the Color Picker">
     Color Palettes
   </message>