DevTools: Make copy color in color picker keyboard accessible

This change makes Copy color in colorPicker keyboard accessible. Earlier, this was working only with mouseclick.

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

Gif showing color picker with this change https://imgur.com/9YxCQpc

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

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

@@ -1125,8 +1125,10 @@ ColorPicker.Spectrum.Swatch = class {
     this._swatchInnerElement = swatchElement.createChild('span', 'swatch-inner');
 
     this._swatchOverlayElement = swatchElement.createChild('span', 'swatch-overlay');
-    this._swatchOverlayElement.addEventListener('click', this._onCopyIconClick.bind(this));
+    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._swatchOverlayElement.appendChild(this._swatchCopyIcon);
@@ -1149,9 +1151,13 @@ ColorPicker.Spectrum.Swatch = class {
     }
   }
 
-  _onCopyIconClick() {
+  /**
+   * @param {!Event} event
+   */
+  _onCopyText(event) {
     this._swatchCopyIcon.setIconType('largeicon-checkmark');
     Host.InspectorFrontendHost.copyText(this._colorString);
+    event.consume();
   }
 
   _onCopyIconMouseout() {

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

@@ -259,7 +259,8 @@
     padding: 4px;
 }
 
-.swatch-overlay:hover {
+.swatch-overlay:hover,
+.swatch-overlay[data-keyboard-focus="true"]:focus {
     background-color: rgba(0, 0, 0, .3);
     opacity: 1;
 }