Fix cr-customize-themes keyboard navigation

This CL ensures paper-tooltips is not a hop on keyboard arrows key
navigations.

Bug: 1158411
Change-Id: I6067312772859ef62bbb98d4d368edd93e3e9a57
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2592789
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#838261}

chrome/test/data/webui/cr_components/customize_themes_test.js

@@ -169,14 +169,19 @@ suite('CrComponentsCustomizeThemesTest', () => {
     await flushTasks();
 
     // Assert.
+    const tilesWrapper = customizeThemesElement.shadowRoot.querySelectorAll(
+        'div.chrome-theme-wrapper');
+    assertEquals(tilesWrapper.length, themes.length);
+    tilesWrapper.forEach(function(tileWrapper, i) {
+      assertEquals(tileWrapper.getAttribute('aria-label'), themes[i].label);
+    });
+
     const tiles =
         customizeThemesElement.shadowRoot.querySelectorAll('cr-theme-icon');
     assertEquals(tiles.length, 4);
-    assertEquals(tiles[2].getAttribute('aria-label'), 'theme_0');
     assertStyle(tiles[2], '--cr-theme-icon-frame-color', 'rgba(0, 0, 0, 1)');
     assertStyle(
         tiles[2], '--cr-theme-icon-active-tab-color', 'rgba(0, 0, 255, 1)');
-    assertEquals(tiles[3].getAttribute('aria-label'), 'theme_1');
     assertStyle(tiles[3], '--cr-theme-icon-frame-color', 'rgba(255, 0, 0, 1)');
     assertStyle(
         tiles[3], '--cr-theme-icon-active-tab-color', 'rgba(0, 255, 0, 1)');
@@ -307,7 +312,10 @@ suite('CrComponentsCustomizeThemesTest', () => {
     const selectedIcons = customizeThemesElement.shadowRoot.querySelectorAll(
         'cr-theme-icon[selected]');
     assertEquals(selectedIcons.length, 1);
-    assertEquals(selectedIcons[0].getAttribute('aria-label'), 'foo');
+    const selectedIconWrapper = customizeThemesElement.shadowRoot.querySelector(
+        'div.chrome-theme-wrapper');
+    assertTrue(!!selectedIconWrapper.querySelector('cr-theme-icon[selected]'));
+    assertEquals(selectedIconWrapper.getAttribute('aria-label'), 'foo');
   });
 
   test('setting third-party theme shows uninstall UI', async () => {

ui/webui/resources/cr_components/customize_themes/customize_themes.html

@@ -144,7 +144,8 @@
   </div>
 </div>
 <cr-grid id="themesContainer" columns="6">
-  <div id="autogeneratedThemeContainer" aria-label="[[i18n('colorPickerLabel')]]"
+  <div id="autogeneratedThemeContainer"
+      aria-label="[[i18n('colorPickerLabel')]]"
       tabindex="0" on-click="onAutogeneratedThemeClick_">
     <cr-theme-icon id="autogeneratedTheme"
         selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
@@ -152,31 +153,31 @@
     <div id="colorPickerIcon"></div>
     <input id="colorPicker" type="color" on-change="onCustomFrameColorChange_">
     </input>
+    <paper-tooltip offset="0" fit-to-visible-bounds>
+      [[i18n('colorPickerLabel')]]
+    </paper-tooltip>
   </div>
-  <paper-tooltip for="autogeneratedThemeContainer" offset="0"
-      fit-to-visible-bounds>
-    [[i18n('colorPickerLabel')]]
-  </paper-tooltip>
-  <cr-theme-icon id="defaultTheme" aria-label="[[i18n('defaultThemeLabel')]]"
-      on-click="onDefaultThemeClick_" tabindex="0"
-      selected$="[[isThemeIconSelected_('default', selectedTheme)]]">
-  </cr-theme-icon>
-  <paper-tooltip for="defaultTheme" offset="0" fit-to-visible-bounds>
-    [[i18n('defaultThemeLabel')]]
-  </paper-tooltip>
-  <template is="dom-repeat" id="themes" items="[[chromeThemes_]]">
-    <cr-theme-icon aria-label="[[item.label]]" on-click="onChromeThemeClick_"
-        id="[[getThemeIconId_(index)]]"
-        style="--cr-theme-icon-frame-color:
-            [[skColorToRgba_(item.colors.frame)]];
-            --cr-theme-icon-active-tab-color:
-            [[skColorToRgba_(item.colors.activeTab)]];"
-        tabindex="0"
-        selected$="[[isThemeIconSelected_(item.id, selectedTheme)]]">
+  <div aria-label="[[i18n('defaultThemeLabel')]]" tabindex="0">
+    <cr-theme-icon id="defaultTheme"
+        on-click="onDefaultThemeClick_"
+        selected$="[[isThemeIconSelected_('default', selectedTheme)]]">
     </cr-theme-icon>
-    <paper-tooltip for="[[getThemeIconId_(index)]]"
-        offset="0" fit-to-visible-bounds>
-      [[item.label]]
-  </paper-tooltip>
+    <paper-tooltip offset="0" fit-to-visible-bounds>
+      [[i18n('defaultThemeLabel')]]
+    </paper-tooltip>
+  </div>
+  <template is="dom-repeat" id="themes" items="[[chromeThemes_]]">
+    <div aria-label="[[item.label]]" tabindex="0" class="chrome-theme-wrapper">
+      <cr-theme-icon on-click="onChromeThemeClick_"
+          style="--cr-theme-icon-frame-color:
+              [[skColorToRgba_(item.colors.frame)]];
+              --cr-theme-icon-active-tab-color:
+              [[skColorToRgba_(item.colors.activeTab)]];"
+          selected$="[[isThemeIconSelected_(item.id, selectedTheme)]]">
+      </cr-theme-icon>
+      <paper-tooltip offset="0" fit-to-visible-bounds>
+        [[item.label]]
+      </paper-tooltip>
+    </div>
   </template>
 </cr-grid>

ui/webui/resources/cr_components/customize_themes/customize_themes.js

@@ -213,15 +213,6 @@ export class CustomizeThemesElement extends mixinBehaviors
   skColorToRgba_(skColor) {
     return skColorToRgba(skColor);
   }
-
-  /**
-   * @param {number} index
-   * @return {string}
-   * @private
-   */
-  getThemeIconId_(index) {
-    return 'themeIconId' + index;
-  }
 }
 
 customElements.define(CustomizeThemesElement.is, CustomizeThemesElement);