DevTools: Make copy color in color picker screen-reader accessible

This change was reviewed earlier here https://chromium-review.googlesource.com/c/chromium/src/+/1686452 was broken down as below
1. Make copy color in color picker keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1817416
2. Make copy color in color picker screen-reader accessible https://chromium-review.googlesource.com/c/chromium/src/+/1818297

Gif showing UI with this change split from original change https://imgur.com/faSS7PO

Bug: 963183
Change-Id: If06b18bb640c8171343d60a743a65d062895cdde
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1818297
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@{#703879}

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

@@ -76,7 +76,11 @@ ColorPicker.Spectrum = class extends UI.VBox {
 
     const displaySwitcher = toolsContainer.createChild('div', 'spectrum-display-switcher spectrum-switcher');
     appendSwitcherIcon(displaySwitcher);
-    displaySwitcher.addEventListener('click', this._formatViewSwitch.bind(this));
+    displaySwitcher.tabIndex = 0;
+    self.onInvokeElement(displaySwitcher, event => {
+      this._formatViewSwitch();
+      event.consume(true);
+    });
 
     // RGBA/HSLA display.
     this._displayContainer = toolsContainer.createChild('div', 'spectrum-text source-code');
@@ -1125,13 +1129,16 @@ ColorPicker.Spectrum.Swatch = class {
     this._swatchInnerElement = swatchElement.createChild('span', 'swatch-inner');
 
     this._swatchOverlayElement = swatchElement.createChild('span', 'swatch-overlay');
+    UI.ARIAUtils.markAsButton(this._swatchOverlayElement);
+    UI.ARIAUtils.setPressed(this._swatchOverlayElement, false);
     this._swatchOverlayElement.tabIndex = 0;
     self.onInvokeElement(this._swatchOverlayElement, this._onCopyText.bind(this));
     this._swatchOverlayElement.addEventListener('mouseout', this._onCopyIconMouseout.bind(this));
     this._swatchOverlayElement.addEventListener('blur', this._onCopyIconMouseout.bind(this));
     this._swatchCopyIcon = UI.Icon.create('largeicon-copy', 'copy-color-icon');
-    this._swatchCopyIcon.title = Common.UIString('Copy color to clipboard');
+    this._swatchCopyIcon.title = ls`Copy color to clipboard`;
     this._swatchOverlayElement.appendChild(this._swatchCopyIcon);
+    UI.ARIAUtils.setAccessibleName(this._swatchOverlayElement, this._swatchCopyIcon.title);
   }
 
   /**
@@ -1157,10 +1164,12 @@ ColorPicker.Spectrum.Swatch = class {
   _onCopyText(event) {
     this._swatchCopyIcon.setIconType('largeicon-checkmark');
     Host.InspectorFrontendHost.copyText(this._colorString);
+    UI.ARIAUtils.setPressed(this._swatchOverlayElement, true);
     event.consume();
   }
 
   _onCopyIconMouseout() {
     this._swatchCopyIcon.setIconType('largeicon-copy');
+    UI.ARIAUtils.setPressed(this._swatchOverlayElement, false);
   }
 };