[a11y]: Add tooltip on keyboard focus as on hover on themes.

This CL adds a tooltip that is visible on keyboard focus and hover over
the theme colors in the 'cr-customize-themes' component.

Bug: 1156184
Change-Id: I61739db8af17e58aa7f37f773d6a5488c5bad60d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2584009Reviewed-by: Alex Ilin <alexilin@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835742}

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

@@ -172,11 +172,11 @@ suite('CrComponentsCustomizeThemesTest', () => {
     const tiles =
         customizeThemesElement.shadowRoot.querySelectorAll('cr-theme-icon');
     assertEquals(tiles.length, 4);
-    assertEquals(tiles[2].getAttribute('title'), 'theme_0');
+    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('title'), 'theme_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 +307,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
     const selectedIcons = customizeThemesElement.shadowRoot.querySelectorAll(
         'cr-theme-icon[selected]');
     assertEquals(selectedIcons.length, 1);
-    assertEquals(selectedIcons[0].getAttribute('title'), 'foo');
+    assertEquals(selectedIcons[0].getAttribute('aria-label'), 'foo');
   });
 
   test('setting third-party theme shows uninstall UI', async () => {

ui/webui/resources/cr_components/customize_themes/BUILD.gn

@@ -47,6 +47,7 @@ js_library("customize_themes") {
     ":mojom_webui_js",
     ":theme_icon",
     "//skia/public/mojom:mojom_webui_js",
+    "//third_party/polymer/v3_0/components-chromium/paper-tooltip:paper-tooltip",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_grid",
     "//ui/webui/resources/js:i18n_behavior.m",

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

-<style include="cr-hidden-style cr-icons">
+<style include="cr-hidden-style cr-icons cr-shared-style">
   :host {
     --cr-customize-themes-grid-gap: 20px;
     --cr-customize-themes-icon-size: 72px;
@@ -116,6 +116,14 @@
     }
   }
 
+  paper-tooltip {
+    --paper-tooltip-delay-in: 100ms;
+    --paper-tooltip-duration-in: 100ms;
+    --paper-tooltip-duration-out: 100ms;
+    --paper-tooltip-min-width: none;
+    --paper-tooltip-padding: 5px 4px;
+  }
+
 </style>
 <div id="thirdPartyThemeContainer" hidden="[[!isThirdPartyTheme_(selectedTheme)]]">
   <div id="thirdPartyTheme">
@@ -136,7 +144,7 @@
   </div>
 </div>
 <cr-grid id="themesContainer" columns="6">
-  <div id="autogeneratedThemeContainer" title="[[i18n('colorPickerLabel')]]"
+  <div id="autogeneratedThemeContainer" aria-label="[[i18n('colorPickerLabel')]]"
       tabindex="0" on-click="onAutogeneratedThemeClick_">
     <cr-theme-icon id="autogeneratedTheme"
         selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
@@ -145,12 +153,20 @@
     <input id="colorPicker" type="color" on-change="onCustomFrameColorChange_">
     </input>
   </div>
-  <cr-theme-icon id="defaultTheme" title="[[i18n('defaultThemeLabel')]]"
+  <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 title="[[item.label]]" on-click="onChromeThemeClick_"
+    <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:
@@ -158,5 +174,9 @@
         tabindex="0"
         selected$="[[isThemeIconSelected_(item.id, selectedTheme)]]">
     </cr-theme-icon>
+    <paper-tooltip for="[[getThemeIconId_(index)]]"
+        offset="0" fit-to-visible-bounds>
+      [[item.label]]
+  </paper-tooltip>
   </template>
 </cr-grid>

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

@@ -7,7 +7,9 @@ import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
 import '../../cr_elements/cr_icons_css.m.js';
 import '../../cr_elements/cr_grid/cr_grid.js';
 import '../../cr_elements/shared_vars_css.m.js';
+import '../../cr_elements/shared_style_css.m.js';
 import './theme_icon.js';
+import '//resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 
 import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -211,6 +213,15 @@ 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);