[NTP] Improve keyboard navigation for richer picker

- Move order of menu header items (e.g. back button and daily toggle) so
  that they follow the submenu nav buttons using keyboard navigation.
- Support selection on SPACE for color/background tiles.
- Like backgrounds/colors, use arrowkeys instead of TAB to navigate the
  shortcut options (i.e. TAB to focus the shortcuts menu, then use
  arrowkeys to move between the shortcut options).
- Add role=button to upload & default background tiles for screenreader
  support.

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

chrome/browser/resources/local_ntp/customize.js

@@ -704,7 +704,8 @@ customize.getNextTile = function(deltaX, deltaY, currentElem) {
  */
 customize.tileOnKeyDownInteraction = function(event) {
   const tile = event.currentTarget;
-  if (event.keyCode === customize.KEYCODES.ENTER) {
+  if (event.keyCode === customize.KEYCODES.ENTER ||
+      event.keyCode === customize.KEYCODES.SPACE) {
     event.preventDefault();
     event.stopPropagation();
     if (tile.onClickOverride) {
@@ -1995,6 +1996,14 @@ customize.initCustomBackgrounds = function(showErrorNotification) {
   };
 
   const clOption = $(customize.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS);
+  const mvOption = $(customize.IDS.SHORTCUTS_OPTION_MOST_VISITED);
+  const hideToggle = $(customize.IDS.SHORTCUTS_HIDE_TOGGLE);
+  $(customize.IDS.SHORTCUTS_MENU).onkeydown = function(event) {
+    if (customize.arrowKeys.includes(event.keyCode)) {
+      clOption.focus();
+    }
+  };
+
   clOption.onclick = function() {
     if (customize.selectedOptions.shortcutType !== clOption) {
       ntpApiHandle.logEvent(
@@ -2006,10 +2015,18 @@ customize.initCustomBackgrounds = function(showErrorNotification) {
     if (event.keyCode === customize.KEYCODES.ENTER ||
         event.keyCode === customize.KEYCODES.SPACE) {
       clOption.click();
+    } else if (customize.arrowKeys.includes(event.keyCode)) {
+      // Handle arrow key navigation.
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.keyCode === customize.KEYCODES.RIGHT) {
+        mvOption.focus();
+      } else if (event.keyCode === customize.KEYCODES.DOWN) {
+        hideToggle.focus();
+      }
     }
   };
 
-  const mvOption = $(customize.IDS.SHORTCUTS_OPTION_MOST_VISITED);
   mvOption.onclick = function() {
     if (customize.selectedOptions.shortcutType !== mvOption) {
       ntpApiHandle.logEvent(
@@ -2021,10 +2038,20 @@ customize.initCustomBackgrounds = function(showErrorNotification) {
     if (event.keyCode === customize.KEYCODES.ENTER ||
         event.keyCode === customize.KEYCODES.SPACE) {
       mvOption.click();
+    } else if (customize.arrowKeys.includes(event.keyCode)) {
+      // Handle arrow key navigation.
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.keyCode === customize.KEYCODES.LEFT) {
+        clOption.focus();
+      } else if (
+          event.keyCode === customize.KEYCODES.RIGHT ||
+          event.keyCode === customize.KEYCODES.DOWN) {
+        hideToggle.focus();
+      }
     }
   };
 
-  const hideToggle = $(customize.IDS.SHORTCUTS_HIDE_TOGGLE);
   hideToggle.onchange = function(event) {
     customize.richerPicker_toggleShortcutHide(hideToggle.checked);
     ntpApiHandle.logEvent(
@@ -2034,6 +2061,14 @@ customize.initCustomBackgrounds = function(showErrorNotification) {
     if (event.keyCode === customize.KEYCODES.ENTER ||
         event.keyCode === customize.KEYCODES.SPACE) {
       hideToggle.onchange(event);
+    } else if (customize.arrowKeys.includes(event.keyCode)) {
+      // Handle arrow key navigation.
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.keyCode === customize.KEYCODES.LEFT ||
+          event.keyCode === customize.KEYCODES.UP) {
+        mvOption.focus();
+      }
     }
   };
   hideToggle.onclick = function(event) {

chrome/browser/resources/local_ntp/local_ntp.css

@@ -723,6 +723,7 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
   display: inline-block;
   height: 384px;
   left: 0;
+  margin-top: 80px;
   vertical-align: top;
   width: 192px;
 }
@@ -843,7 +844,6 @@ html[dir=rtl] .menu-option {
   height: 80px;
   line-height: 80px;
   padding-inline-end: 24px;
-  padding-inline-start: 232px;
 }
 
 #menu-title {
@@ -889,14 +889,14 @@ html[dir=rtl] .menu-option {
 
 #menu-contents {
   display: inline-block;
-  height: 384px;
+  height: 464px;
   margin-inline-start: 40px;
   position: relative;
   width: 568px;
 }
 
 .menu-panel {
-  height: 100%;
+  height: 384px;
   left: 0;
   /* Pad the content by 5px top/left. This will prevent the focus outline on
    * tiles from being cut off by overflow-y. */
@@ -906,7 +906,7 @@ html[dir=rtl] .menu-option {
   padding-inline-start: 5px;
   padding-top: 5px;
   position: absolute;
-  top: 0;
+  top: 80px;
   visibility: hidden;
   width: 100%;
 }

chrome/browser/resources/local_ntp/local_ntp.html

@@ -170,26 +170,6 @@
   </dialog>
 
   <dialog id="customization-menu" class="customize-dialog">
-    <div id="menu-header">
-      <div id="menu-back-circle" tabindex="0" role="button"
-          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" title="$i18n{refreshDaily}">
-          <label class="switch">
-            <input id="refresh-daily-toggle" type="checkbox"
-                aria-labelledby="refresh-text"></input>
-            <span class="toggle">
-              <div class="knob"></div>
-              <div class="highlight"></div>
-            </span>
-          </label>
-        </div>
-        <div id="refresh-text">$i18n{refreshDaily}</div>
-      </div>
-    </div>
     <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"
@@ -225,18 +205,40 @@
       </button>
     </div>
     <div id="menu-contents">
+      <div id="menu-header">
+        <div id="menu-back-circle" tabindex="0" role="button"
+            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" title="$i18n{refreshDaily}">
+            <label class="switch">
+              <input id="refresh-daily-toggle" type="checkbox"
+                  aria-labelledby="refresh-text"></input>
+              <span class="toggle">
+                <div class="knob"></div>
+                <div class="highlight"></div>
+              </span>
+            </label>
+          </div>
+          <div id="refresh-text">$i18n{refreshDaily}</div>
+        </div>
+      </div>
       <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"
-              aria-label="$i18n{uploadImage}" title="$i18n{uploadImage}">
+              role="button" 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"
-              aria-label="$i18n{noBackground}" title="$i18n{noBackground}">
+              role="button" aria-label="$i18n{noBackground}"
+              title="$i18n{noBackground}">
             <div class="mini-page">
               <div class="mini-header-colorful"></div>
               <div class="mini-shortcuts"></div>
@@ -251,7 +253,7 @@
           aria-label="$i18n{shortcutsOption}">
         <div id="sh-options">
           <div class="sh-option">
-            <div id="sh-option-cl" class="sh-option-image" tabindex="0"
+            <div id="sh-option-cl" class="sh-option-image" tabindex="-1"
                 role="button" aria-pressed="false"
                 aria-labelledby="sh-option-cl-title" title="$i18n{myShortcuts}">
               <div class="sh-option-icon"></div>
@@ -268,7 +270,7 @@
             $i18n{shortcutsCurated}
           </div>
           <div class="sh-option">
-            <div id="sh-option-mv" class="sh-option-image" tabindex="0"
+            <div id="sh-option-mv" class="sh-option-image" tabindex="-1"
                 role="button" aria-pressed="false"
                 aria-labelledby="sh-option-mv-title" title="$i18n{mostVisited}">
               <div class="sh-option-icon"></div>
@@ -293,7 +295,7 @@
           </div>
           <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
             <label class="switch">
-              <input id="sh-hide-toggle" type="checkbox"
+              <input id="sh-hide-toggle" type="checkbox" tabindex="-1"
                   aria-labelledby="sh-hide-title"></input>
               <span class="toggle">
                 <div class="knob"></div>
@@ -319,7 +321,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>
@@ -328,8 +331,8 @@
           </div>
         </div>
         <div id="colors-default" class="bg-sel-tile-bg"
-          aria-label="$i18n{defaultThemeLabel}"
-          title="$i18n{defaultThemeLabel}">
+            aria-label="$i18n{defaultThemeLabel}"
+            title="$i18n{defaultThemeLabel}">
           <div id="colors-default-icon" class="bg-sel-tile" tabindex="-1"></div>
         </div>
       </div>

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -160,26 +160,6 @@
     </dialog>
 
     <dialog id="customization-menu" class="customize-dialog">
-      <div id="menu-header">
-        <div id="menu-back-circle" tabindex="0" role="button"
-            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" title="$i18n{refreshDaily}">
-            <label class="switch">
-              <input id="refresh-daily-toggle" type="checkbox"
-                  aria-labelledby="refresh-text"></input>
-              <span class="toggle">
-                <div class="knob"></div>
-                <div class="highlight"></div>
-              </span>
-            </label>
-          </div>
-          <div id="refresh-text">$i18n{refreshDaily}</div>
-        </div>
-      </div>
       <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"
@@ -215,18 +195,40 @@
         </button>
       </div>
       <div id="menu-contents">
+        <div id="menu-header">
+          <div id="menu-back-circle" tabindex="0" role="button"
+              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" title="$i18n{refreshDaily}">
+              <label class="switch">
+                <input id="refresh-daily-toggle" type="checkbox"
+                    aria-labelledby="refresh-text"></input>
+                <span class="toggle">
+                  <div class="knob"></div>
+                  <div class="highlight"></div>
+                </span>
+              </label>
+            </div>
+            <div id="refresh-text">$i18n{refreshDaily}</div>
+          </div>
+        </div>
         <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"
-                aria-label="$i18n{uploadImage}" title="$i18n{uploadImage}">
+                role="button" 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"
-                aria-label="$i18n{noBackground}" title="$i18n{noBackground}">
+                role="button" aria-label="$i18n{noBackground}"
+                title="$i18n{noBackground}">
               <div class="mini-page">
                 <div class="mini-header-colorful"></div>
                 <div class="mini-shortcuts"></div>
@@ -241,7 +243,7 @@
             aria-label="$i18n{shortcutsOption}">
           <div id="sh-options">
             <div class="sh-option">
-              <div id="sh-option-cl" class="sh-option-image" tabindex="0"
+              <div id="sh-option-cl" class="sh-option-image" tabindex="-1"
                   role="button" aria-pressed="false"
                   aria-labelledby="sh-option-cl-title"
                   title="$i18n{myShortcuts}">
@@ -259,7 +261,7 @@
               $i18n{shortcutsCurated}
             </div>
             <div class="sh-option">
-              <div id="sh-option-mv" class="sh-option-image" tabindex="0"
+              <div id="sh-option-mv" class="sh-option-image" tabindex="-1"
                   role="button" aria-pressed="false"
                   aria-labelledby="sh-option-mv-title"
                   title="$i18n{mostVisited}">
@@ -285,7 +287,7 @@
             </div>
             <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
               <label class="switch">
-                <input id="sh-hide-toggle" type="checkbox"
+                <input id="sh-hide-toggle" type="checkbox" tabindex="-1"
                     aria-labelledby="sh-hide-title"></input>
                 <span class="toggle">
                   <div class="knob"></div>
@@ -323,7 +325,8 @@
           <div id="colors-default" class="bg-sel-tile-bg"
               aria-label="$i18n{defaultThemeLabel}"
               title="$i18n{defaultThemeLabel}">
-            <div id="colors-default-icon" class="bg-sel-tile" tabindex="-1"></div>
+            <div id="colors-default-icon" class="bg-sel-tile" tabindex="-1">
+            </div>
           </div>
         </div>
       </div>