[a11y] Assign aria attributes to cr-customize-themes

cr-customize-themes isn't fully accessible because the custom elements
used to display color buttons don't have any associated aria roles.

This CL improves the accessibility of cr-customize-themes by assigning
role="radio" and aria-checked attributes to the color buttons.

Bug: 1158409
Change-Id: I04f07e569bb11dbd9c04c82578ad0b07ea131037
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2591127
Commit-Queue: Alex Ilin <alexilin@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#838760}

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

@@ -10,7 +10,7 @@ import {CustomizeThemesElement} from 'chrome://resources/cr_components/customize
 import {ChromeTheme, CustomizeThemesClientCallbackRouter, CustomizeThemesHandlerInterface, ThemeType} from 'chrome://resources/cr_components/customize_themes/customize_themes.mojom-webui.js';
 import {ThemeIconElement} from 'chrome://resources/cr_components/customize_themes/theme_icon.js';
 
-import {assertEquals, assertTrue} from '../chai_assert.js';
+import {assertDeepEquals, assertEquals, assertTrue} from '../chai_assert.js';
 import {TestBrowserProxy} from '../test_browser_proxy.m.js';
 import {flushTasks} from '../test_util.m.js';
 
@@ -263,6 +263,10 @@ suite('CrComponentsCustomizeThemesTest', () => {
     assertStyle(
         selectedIcons[0], '--cr-theme-icon-active-tab-color',
         'rgba(0, 0, 255, 1)');
+    assertDeepEquals(
+        selectedIcons,
+        customizeThemesElement.shadowRoot.querySelectorAll(
+            'div[aria-checked="true"] cr-theme-icon'));
   });
 
   test('setting default theme selects and updates icon', async () => {
@@ -283,6 +287,10 @@ suite('CrComponentsCustomizeThemesTest', () => {
     assertEquals(
         selectedIcons[0],
         customizeThemesElement.shadowRoot.querySelector('#defaultTheme'));
+    assertDeepEquals(
+        selectedIcons,
+        customizeThemesElement.shadowRoot.querySelectorAll(
+            'div[aria-checked="true"] cr-theme-icon'));
   });
 
   test('setting Chrome theme selects and updates icon', async () => {
@@ -316,6 +324,10 @@ suite('CrComponentsCustomizeThemesTest', () => {
         'div.chrome-theme-wrapper');
     assertTrue(!!selectedIconWrapper.querySelector('cr-theme-icon[selected]'));
     assertEquals(selectedIconWrapper.getAttribute('aria-label'), 'foo');
+    assertDeepEquals(
+        selectedIcons,
+        customizeThemesElement.shadowRoot.querySelectorAll(
+            'div[aria-checked="true"] cr-theme-icon'));
   });
 
   test('setting third-party theme shows uninstall UI', async () => {

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

@@ -143,10 +143,11 @@
     </cr-button>
   </div>
 </div>
-<cr-grid id="themesContainer" columns="6">
+<cr-grid id="themesContainer" columns="6" role="radiogroup">
   <div id="autogeneratedThemeContainer"
       aria-label="[[i18n('colorPickerLabel')]]"
-      tabindex="0" on-click="onAutogeneratedThemeClick_">
+      tabindex="0" on-click="onAutogeneratedThemeClick_" role="radio"
+      aria-checked$="[[getThemeIconCheckedStatus_('autogenerated', selectedTheme)]]">
     <cr-theme-icon id="autogeneratedTheme"
         selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
     </cr-theme-icon>
@@ -158,7 +159,8 @@
     </paper-tooltip>
   </div>
   <div aria-label="[[i18n('defaultThemeLabel')]]"
-      tabindex="0" on-click="onDefaultThemeClick_">
+      tabindex="0" on-click="onDefaultThemeClick_" role="radio"
+      aria-checked$="[[getThemeIconCheckedStatus_('default', selectedTheme)]]">
     <cr-theme-icon id="defaultTheme"
         selected$="[[isThemeIconSelected_('default', selectedTheme)]]">
     </cr-theme-icon>
@@ -168,7 +170,8 @@
   </div>
   <template is="dom-repeat" id="themes" items="[[chromeThemes_]]">
     <div aria-label="[[item.label]]" tabindex="0"
-        on-click="onChromeThemeClick_" class="chrome-theme-wrapper">
+        on-click="onChromeThemeClick_" class="chrome-theme-wrapper" role="radio"
+        aria-checked$="[[getThemeIconCheckedStatus_(item.id, selectedTheme)]]">
       <cr-theme-icon
           style="--cr-theme-icon-frame-color:
               [[skColorToRgba_(item.colors.frame)]];

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

@@ -197,6 +197,15 @@ export class CustomizeThemesElement extends mixinBehaviors
     }
   }
 
+  /**
+   * @param {string|number} id
+   * @return {string}
+   * @private
+   */
+  getThemeIconCheckedStatus_(id) {
+    return this.isThemeIconSelected_(id) ? 'true' : 'false';
+  }
+
   /**
    * @return {boolean}
    * @private