commit 09fcacb879503fa3ec54a43b4014e4c610d073db
author Chandani Shrestha <chshrest@microsoft.com> Tue Nov 26 20:25:07 2019
committer Commit Bot <commit-bot@chromium.org> Tue Nov 26 21:56:46 2019
tree 684f76f48ebd0a20fbebdae38daba4ca79a0e92e
parent 1a596b35f973bcc084c9a81064ffefc3867bf173

DevTools [Element]: Fix tab order of color format switcher in color-picker

Earlier, tab order of color format switcher button in color-picker wasn't in sync with the visual representation of where that button was located.
On pressing tab with focus on slider, focus landed on format switcher even though text elements appears before it. This change fixes that issue. Now, tabbing moves from slider to text elements then, to format switcher
as it visually appears.

Gif before change: https://imgur.com/6ynXbyn
Gif after change: https://imgur.com/zh1EwN6

Bug: 963183
Change-Id: Idcb1f909cbc8cf5d442546b40da3294d1191b2c1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1931304
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Reviewed-by: Mike Jackson <mjackson@microsoft.com>

front_end/color_picker/Spectrum.js

diff --git a/front_end/color_picker/Spectrum.js b/front_end/color_picker/Spectrum.js
index d297545..4fcc676 100644
--- a/front_end/color_picker/Spectrum.js
+++ b/front_end/color_picker/Spectrum.js
@@ -78,16 +78,6 @@
     this._alphaElementBackground = this._alphaElement.createChild('div', 'spectrum-alpha-background');
     this._alphaSlider = this._alphaElement.createChild('div', 'spectrum-slider');
 
-    const displaySwitcher = toolsContainer.createChild('div', 'spectrum-display-switcher spectrum-switcher');
-    appendSwitcherIcon(displaySwitcher);
-    displaySwitcher.tabIndex = 0;
-    self.onInvokeElement(displaySwitcher, event => {
-      this._formatViewSwitch();
-      event.consume(true);
-    });
-    UI.ARIAUtils.setAccessibleName(displaySwitcher, ls`Change color format`);
-    UI.ARIAUtils.markAsButton(displaySwitcher);
-
     // RGBA/HSLA display.
     this._displayContainer = toolsContainer.createChild('div', 'spectrum-text source-code');
     this._textValues = [];
@@ -116,6 +106,16 @@
     label.textContent = ls`HEX`;
     UI.ARIAUtils.setAccessibleName(this._hexValue, label.textContent);
 
+    const displaySwitcher = toolsContainer.createChild('div', 'spectrum-display-switcher spectrum-switcher');
+    appendSwitcherIcon(displaySwitcher);
+    displaySwitcher.tabIndex = 0;
+    self.onInvokeElement(displaySwitcher, event => {
+      this._formatViewSwitch();
+      event.consume(true);
+    });
+    UI.ARIAUtils.setAccessibleName(displaySwitcher, ls`Change color format`);
+    UI.ARIAUtils.markAsButton(displaySwitcher);
+
     UI.installDragHandle(
         this._hueElement, dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'pointer',
         'default');