[NTP] Add titles to shortcut & background elements in richer picker

Bug: 953822
Change-Id: Iee2efb5cad4fc37d11c97d56ec03eeb286969b20
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1737349
Auto-Submit: Kristi Park <kristipark@chromium.org>
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: Gayane Petrosyan <gayane@chromium.org>
Cr-Commit-Position: refs/heads/master@{#684374}

chrome/browser/resources/local_ntp/customize.js

@@ -550,6 +550,8 @@ customize.createTileWithTitle = function(
     id, imageUrl, name, dataset, onClickInteraction, onKeyInteraction) {
   const tile = customize.createTileThumbnail(
       id, imageUrl, dataset, onClickInteraction, onKeyInteraction);
+  tile.setAttribute('aria-label', name);
+  tile.title = name;
   customize.fadeInImageTile(tile, imageUrl, null);
 
   const title = document.createElement('div');
@@ -1203,6 +1205,7 @@ customize.showImageSelectionDialog = function(dialogTitle, collIndex) {
         customize.tileOnKeyDownInteraction);
 
     tile.setAttribute('aria-label', collImg[i].attributions[0]);
+    tile.title = collImg[i].attributions[0];
 
     // Load the first |ROWS_TO_PRELOAD| rows of tiles.
     if (i < firstNTile) {

chrome/browser/resources/local_ntp/local_ntp.css

@@ -1581,6 +1581,7 @@ input:checked + .toggle .highlight {
   background-color: unset;
   border-radius: 50%;
   box-sizing: border-box;
+  cursor: pointer;
   height: var(--tile-size);
   margin-bottom: var(--tile-margin);
   margin-inline-end: var(--tile-margin);

chrome/browser/resources/local_ntp/local_ntp.html

@@ -172,12 +172,12 @@
   <dialog id="customization-menu" class="customize-dialog">
     <div id="menu-header">
       <div id="menu-back-circle" tabindex="0" role="button"
-          aria-label="$i18n{backLabel}">
+          aria-label="$i18n{backLabel}" title="$i18n{backLabel}">
         <div id="menu-back"></div>
       </div>
       <div id="menu-title">$i18n{customizeMenu}</div>
       <div id="refresh-daily-wrapper">
-        <div id="refresh-toggle-wrapper">
+        <div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
           <label class="switch">
             <input id="refresh-daily-toggle" type="checkbox"
                 aria-labelledby="refresh-text"></input>
@@ -193,7 +193,8 @@
     <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
       <button id="backgrounds-button" class="menu-option" tabindex="0"
           role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
-          aria-selected="true" aria-labelledby="backgrounds-menu-option">
+          aria-selected="true" aria-labelledby="backgrounds-menu-option"
+          title="$i18n{backgroundsOption}">
         <div class="menu-option-icon-wrapper">
           <div id="backgrounds-icon" class="menu-option-icon"></div>
         </div>
@@ -203,7 +204,8 @@
       </button>
       <button id="shortcuts-button" class="menu-option" tabindex="0" role="tab"
           aria-controls="shortcuts-menu" aria-selected="false"
-          aria-labelledby="shortcuts-menu-option">
+          aria-labelledby="shortcuts-menu-option"
+          title="$i18n{shortcutsOption}">
         <div class="menu-option-icon-wrapper">
           <div id="shortcuts-icon" class="menu-option-icon"></div>
         </div>
@@ -213,7 +215,7 @@
       </button>
       <button id="colors-button" class="menu-option" tabindex="0" role="tab"
           aria-controls="colors-menu" aria-selected="false"
-          aria-labelledby="colors-menu-option">
+          aria-labelledby="colors-menu-option" title="$i18n{colorsOption}">
         <div class="menu-option-icon-wrapper">
           <div id="colors-icon" class="menu-option-icon"></div>
         </div>
@@ -226,13 +228,15 @@
       <div id="backgrounds-menu" class="menu-panel" tabindex="0"
           role="tabpanel" aria-label="$i18n{backgroundsOption}">
         <div id="backgrounds-upload" class="bg-sel-tile-bg">
-          <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1">
+          <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
+              aria-label="$i18n{uploadImage}" title="$i18n{uploadImage}">
             <div id="backgrounds-upload-arrow"></div>
             <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
           </div>
         </div>
         <div id="backgrounds-default" class="bg-sel-tile-bg">
-          <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1">
+          <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
+              aria-label="$i18n{noBackground}" title="$i18n{noBackground}">
             <div class="mini-page">
               <div class="mini-header-colorful"></div>
               <div class="mini-shortcuts"></div>
@@ -249,7 +253,7 @@
           <div class="sh-option">
             <div id="sh-option-cl" class="sh-option-image" tabindex="0"
                 role="button" aria-pressed="false"
-                aria-labelledby="sh-option-cl-title">
+                aria-labelledby="sh-option-cl-title" title="$i18n{myShortcuts}">
               <div class="sh-option-icon"></div>
               <div class="sh-option-mini">
                 <div class="mini-page">
@@ -266,7 +270,7 @@
           <div class="sh-option">
             <div id="sh-option-mv" class="sh-option-image" tabindex="0"
                 role="button" aria-pressed="false"
-                aria-labelledby="sh-option-mv-title">
+                aria-labelledby="sh-option-mv-title" title="$i18n{mostVisited}">
               <div class="sh-option-icon"></div>
               <div class="sh-option-mini">
                 <div class="mini-page">
@@ -287,7 +291,7 @@
             <div id="sh-hide-title">$i18n{hideShortcuts}</div>
             $i18n{hideShortcutsDesc}
           </div>
-          <div id="sh-hide-toggle-wrapper">
+          <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
             <label class="switch">
               <input id="sh-hide-toggle" type="checkbox"
                   aria-labelledby="sh-hide-title"></input>
@@ -331,10 +335,11 @@
       </div>
     </div>
     <div id="menu-footer">
-      <button id="menu-cancel" class="bg-sel-footer-button paper secondary
-                               ripple">$i18n{cancelButton}</button>
+      <button id="menu-cancel"
+          class="bg-sel-footer-button paper secondary ripple"
+          title="$i18n{cancelButton}">$i18n{cancelButton}</button>
       <button id="menu-done" class="bg-sel-footer-button paper primary ripple"
-                             disabled>$i18n{doneButton}</button>
+          title="$i18n{doneButton}" disabled>$i18n{doneButton}</button>
     </div>
   </dialog>
 

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -162,12 +162,12 @@
     <dialog id="customization-menu" class="customize-dialog">
       <div id="menu-header">
         <div id="menu-back-circle" tabindex="0" role="button"
-            aria-label="$i18n{backLabel}">
+            aria-label="$i18n{backLabel}" title="$i18n{backLabel}">
           <div id="menu-back"></div>
         </div>
         <div id="menu-title">$i18n{customizeMenu}</div>
         <div id="refresh-daily-wrapper">
-          <div id="refresh-toggle-wrapper">
+          <div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
             <label class="switch">
               <input id="refresh-daily-toggle" type="checkbox"
                   aria-labelledby="refresh-text"></input>
@@ -183,7 +183,8 @@
       <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
         <button id="backgrounds-button" class="menu-option" tabindex="0"
             role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
-            aria-selected="true" aria-labelledby="backgrounds-menu-option">
+            aria-selected="true" aria-labelledby="backgrounds-menu-option"
+            title="$i18n{backgroundsOption}">
           <div class="menu-option-icon-wrapper">
             <div id="backgrounds-icon" class="menu-option-icon"></div>
           </div>
@@ -193,7 +194,8 @@
         </button>
         <button id="shortcuts-button" class="menu-option" tabindex="0"
             role="tab" aria-controls="shortcuts-menu" aria-selected="false"
-            aria-labelledby="shortcuts-menu-option">
+            aria-labelledby="shortcuts-menu-option"
+            title="$i18n{shortcutsOption}">
           <div class="menu-option-icon-wrapper">
             <div id="shortcuts-icon" class="menu-option-icon"></div>
           </div>
@@ -203,7 +205,7 @@
         </button>
         <button id="colors-button" class="menu-option" tabindex="0" role="tab"
             aria-controls="colors-menu" aria-selected="false"
-            aria-labelledby="colors-menu-option">
+            aria-labelledby="colors-menu-option" title="$i18n{colorsOption}">
           <div class="menu-option-icon-wrapper">
             <div id="colors-icon" class="menu-option-icon"></div>
           </div>
@@ -216,14 +218,15 @@
         <div id="backgrounds-menu" class="menu-panel" tabindex="0"
             role="tabpanel" aria-label="$i18n{backgroundsOption}">
           <div id="backgrounds-upload" class="bg-sel-tile-bg">
-            <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1">
+            <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
+                aria-label="$i18n{uploadImage}" title="$i18n{uploadImage}">
               <div id="backgrounds-upload-arrow"></div>
               <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
             </div>
           </div>
           <div id="backgrounds-default" class="bg-sel-tile-bg">
-            <div id="backgrounds-default-icon" class="bg-sel-tile"
-                tabindex="-1">
+            <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
+                aria-label="$i18n{noBackground}" title="$i18n{noBackground}">
               <div class="mini-page">
                 <div class="mini-header-colorful"></div>
                 <div class="mini-shortcuts"></div>
@@ -240,7 +243,8 @@
             <div class="sh-option">
               <div id="sh-option-cl" class="sh-option-image" tabindex="0"
                   role="button" aria-pressed="false"
-                  aria-labelledby="sh-option-cl-title">
+                  aria-labelledby="sh-option-cl-title"
+                  title="$i18n{myShortcuts}">
                 <div class="sh-option-icon"></div>
                 <div class="sh-option-mini">
                   <div class="mini-page">
@@ -257,7 +261,8 @@
             <div class="sh-option">
               <div id="sh-option-mv" class="sh-option-image" tabindex="0"
                   role="button" aria-pressed="false"
-                  aria-labelledby="sh-option-mv-title">
+                  aria-labelledby="sh-option-mv-title"
+                  title="$i18n{mostVisited}">
                 <div class="sh-option-icon"></div>
                 <div class="sh-option-mini">
                   <div class="mini-page">
@@ -278,7 +283,7 @@
               <div id="sh-hide-title">$i18n{hideShortcuts}</div>
               $i18n{hideShortcutsDesc}
             </div>
-            <div id="sh-hide-toggle-wrapper">
+            <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
               <label class="switch">
                 <input id="sh-hide-toggle" type="checkbox"
                     aria-labelledby="sh-hide-title"></input>
@@ -306,7 +311,8 @@
               </button>
           </div>
           <div id="color-picker-container" class="bg-sel-tile-bg"
-              aria-label="$i18n{colorPickerLabel}" title="$i18n{colorPickerLabel}">
+              aria-label="$i18n{colorPickerLabel}"
+              title="$i18n{colorPickerLabel}">
             <div id="color-picker-tile" class="bg-sel-tile" tabindex="-1">
               <div id="left-semicircle"></div>
               <div id="color-picker-icon"></div>
@@ -322,10 +328,11 @@
         </div>
       </div>
       <div id="menu-footer">
-        <button id="menu-cancel" class="bg-sel-footer-button paper secondary
-                                 ripple">$i18n{cancelButton}</button>
+        <button id="menu-cancel"
+            class="bg-sel-footer-button paper secondary ripple"
+            title="$i18n{cancelButton}">$i18n{cancelButton}</button>
         <button id="menu-done" class="bg-sel-footer-button paper primary ripple"
-                               disabled>$i18n{doneButton}</button>
+            title="$i18n{doneButton}" disabled>$i18n{doneButton}</button>
       </div>
     </dialog>