[Chrome Colors] Voiceover improvements.

 - aria-label, aria-pressed, role="button" should all be on the same element. This will avoid vocalizing 'group' and will have a correct order of strings, e.g. label, selected, toggle button
 - always have aria-pressed and default to false, so that buttons are always considered toggle buttons, otherwise it will be just a button before selection and toggle button after the selection.

Bug: 992059
Change-Id: I16de081e5f3b65b5ea13a25e54234a48dc6f602c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1745047Reviewed-by: Kyle Milka <kmilka@chromium.org>
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Cr-Commit-Position: refs/heads/master@{#685440}

chrome/browser/resources/local_ntp/customize.js

@@ -619,6 +619,7 @@ customize.createTileThumbnail = function(
 
   // Accessibility support for screen readers.
   tileBackground.setAttribute('role', 'button');
+  tileBackground.setAttribute('aria-pressed', false);
 
   tileBackground.onclick = onClickInteraction;
   tileBackground.onkeydown = onKeyInteraction;
@@ -2238,8 +2239,8 @@ customize.loadColorsMenu = function() {
         customize.tileOnKeyDownInteraction);
     const label = configData.translatedStrings.colorLabelPrefix + ' ' +
         colorArrayToHex(colorsColl[i].color);
-    tile.setAttribute('aria-label', label);
-    tile.setAttribute('title', label);
+    tile.firstElementChild.setAttribute('aria-label', label);
+    tile.firstElementChild.setAttribute('title', label);
 
     $(customize.IDS.COLORS_MENU).appendChild(tile);
   }

chrome/browser/resources/local_ntp/local_ntp.html

@@ -230,7 +230,7 @@
         <div id="backgrounds-upload-wrapper" class="bg-sel-tile-wrapper">
           <div id="backgrounds-upload" class="bg-sel-tile-bg" tabindex="-1"
               role="button" aria-label="$i18n{uploadImage}"
-              title="$i18n{uploadImage}">
+              title="$i18n{uploadImage}" aria-pressed="false">
             <div id="backgrounds-upload-icon" class="bg-sel-tile">
               <div id="backgrounds-upload-arrow"></div>
               <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
@@ -240,7 +240,7 @@
         <div id="backgrounds-default-wrapper" class="bg-sel-tile-wrapper">
           <div id="backgrounds-default" class="bg-sel-tile-bg" tabindex="-1"
               role="button" aria-label="$i18n{noBackground}"
-              title="$i18n{noBackground}">
+              title="$i18n{noBackground}" aria-pressed="false">
             <div id="backgrounds-default-icon" class="bg-sel-tile">
               <div class="mini-page">
                 <div class="mini-header-colorful"></div>
@@ -327,7 +327,8 @@
         <div id="color-picker-wrapper" class="bg-sel-tile-wrapper">
           <div id="color-picker-container" class="bg-sel-tile-bg"
               aria-label="$i18n{colorPickerLabel}"
-              title="$i18n{colorPickerLabel}"  tabindex="-1">
+              title="$i18n{colorPickerLabel}"  tabindex="-1"
+              role="button" aria-pressed="false">
             <div id="color-picker-tile" class="bg-sel-tile">
               <div id="left-semicircle"></div>
               <div id="color-picker-icon"></div>
@@ -339,7 +340,8 @@
         <div id="colors-default-wrapper" class="bg-sel-tile-wrapper">
           <div id="colors-default" class="bg-sel-tile-bg"
               aria-label="$i18n{defaultThemeLabel}"
-              title="$i18n{defaultThemeLabel}" tabindex="-1">
+              title="$i18n{defaultThemeLabel}" tabindex="-1"
+              role="button" aria-pressed="false">
             <div id="colors-default-icon" class="bg-sel-tile"></div>
           </div>
         </div>

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -220,7 +220,7 @@
           <div id="backgrounds-upload-wrapper" class="bg-sel-tile-wrapper">
             <div id="backgrounds-upload" class="bg-sel-tile-bg" tabindex="-1"
                 role="button" aria-label="$i18n{uploadImage}"
-                title="$i18n{uploadImage}">
+                title="$i18n{uploadImage}" aria-pressed="false">
               <div id="backgrounds-upload-icon" class="bg-sel-tile">
                 <div id="backgrounds-upload-arrow"></div>
                 <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
@@ -230,7 +230,7 @@
           <div id="backgrounds-default-wrapper" class="bg-sel-tile-wrapper">
             <div id="backgrounds-default" class="bg-sel-tile-bg" tabindex="-1"
                 role="button" aria-label="$i18n{noBackground}"
-                title="$i18n{noBackground}">
+                title="$i18n{noBackground}" aria-pressed="false">
               <div id="backgrounds-default-icon" class="bg-sel-tile">
                 <div class="mini-page">
                   <div class="mini-header-colorful"></div>
@@ -319,7 +319,8 @@
           <div id="color-picker-wrapper" class="bg-sel-tile-wrapper">
             <div id="color-picker-container" class="bg-sel-tile-bg"
                 aria-label="$i18n{colorPickerLabel}"
-                title="$i18n{colorPickerLabel}"  tabindex="-1">
+                title="$i18n{colorPickerLabel}"  tabindex="-1"
+                role="button" aria-pressed="false">
               <div id="color-picker-tile" class="bg-sel-tile">
                 <div id="left-semicircle"></div>
                 <div id="color-picker-icon"></div>
@@ -331,7 +332,8 @@
           <div id="colors-default-wrapper" class="bg-sel-tile-wrapper">
             <div id="colors-default" class="bg-sel-tile-bg"
                 aria-label="$i18n{defaultThemeLabel}"
-                title="$i18n{defaultThemeLabel}" tabindex="-1">
+                title="$i18n{defaultThemeLabel}" tabindex="-1"
+                role="button" aria-pressed="false">
               <div id="colors-default-icon" class="bg-sel-tile"></div>
             </div>
           </div>