[Files.app] Refine tabindexes

- Refine tabindex following visual and logical order
- Make the breadcrumbs focusable  (except the last one)

BUG=459693
TEST=manually

Review URL: https://codereview.chromium.org/947083002

Cr-Commit-Position: refs/heads/master@{#317749}

ui/file_manager/file_manager/foreground/js/ui/banners.js

@@ -189,7 +189,7 @@ Banners.prototype.prepareAndShowWelcomeBanner_ = function(type, messageId) {
     more.textContent = str('DRIVE_LEARN_MORE');
     more.href = str('GOOGLE_DRIVE_OVERVIEW_URL');
   }
-  more.tabIndex = '16';  // See: go/filesapp-tabindex.
+  more.tabIndex = '19';  // See: go/filesapp-tabindex.
   more.target = '_blank';
 
   var dismiss;

ui/file_manager/file_manager/foreground/js/ui/location_line.js

@@ -14,8 +14,6 @@ function LocationLine(breadcrumbs, volumeManager) {
   this.breadcrumbs_ = breadcrumbs;
   this.volumeManager_ = volumeManager;
   this.entry_ = null;
-
-  breadcrumbs.addEventListener('click', this.onClick_.bind(this));
 }
 
 /**
@@ -112,12 +110,19 @@ LocationLine.prototype.update_ = function(components) {
     var div = doc.createElement('div');
     div.classList.add('breadcrumb-path', 'entry-name');
     div.textContent = component.name;
-    div.pathComponent = component;
+    div.tabIndex = 8;
+    div.addEventListener('click', this.execute_.bind(this, div, component));
+    div.addEventListener('keydown', function(div, component, event) {
+      // If the pressed key is either Enter or Space.
+      if (event.keyCode == 13 || event.keyCode == 32)
+        this.execute_(div, component);
+    }.bind(this, div, component));
     this.breadcrumbs_.appendChild(div);
 
     // If this is the last component, break here.
     if (i === components.length - 1) {
       div.classList.add('breadcrumb-last');
+      div.tabIndex = -1;
       break;
     }
 
@@ -225,16 +230,18 @@ LocationLine.prototype.hide = function() {
 };
 
 /**
- * Handle a click event on a breadcrumb element.
- * @param {!Event} event The click event.
+ * Execute an element.
+ * @param {!Element} element Element to be executed.
+ * @param {!LocationLine.PathComponent} pathComponent Path Component object of
+ *     the element.
  * @private
  */
-LocationLine.prototype.onClick_ = function(event) {
-  if (!event.target.classList.contains('breadcrumb-path') ||
-      event.target.classList.contains('breadcrumb-last'))
+LocationLine.prototype.execute_ = function(element, pathComponent) {
+  if (!element.classList.contains('breadcrumb-path') ||
+      element.classList.contains('breadcrumb-last'))
     return;
 
-  event.target.pathComponent.resolveEntry().then(function(entry) {
+  pathComponent.resolveEntry().then(function(entry) {
     var pathClickEvent = new Event('pathclick');
     pathClickEvent.entry = entry;
     this.dispatchEvent(pathClickEvent);

ui/file_manager/file_manager/main.html

@@ -319,7 +319,7 @@
     <div class="dialog-header">
       <div id="location-breadcrumbs" class="breadcrumbs"></div>
       <div id="cancel-selection-button-wrapper">
-        <paper-button id="cancel-selection-button" tabindex="-1"
+        <paper-button id="cancel-selection-button" tabindex="7"
               i18n-values="aria-label:CANCEL_SELECTION_BUTTON_LABEL">
           <span class="icon-arrow-back"></span>
           <span i18n-content="CANCEL_SELECTION_BUTTON_LABEL"></span>
@@ -328,33 +328,34 @@
       <div id="files-selected-label"></div>
       <div class="spacer"></div>
       <button id="tasks" class="combobutton" menu="#tasks-menu"
-              tabindex="7"
+              tabindex="9"
               i18n-values="aria-label:TASKS_BUTTON_LABEL">
         <paper-ripple fit></paper-ripple>
       </button>
-      <button id="search-button" class="icon-button" tabindex="8"
+      <button id="search-button" class="icon-button" tabindex="10"
               i18n-values="aria-label:SEARCH_TEXT_LABEL">
         <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
       </button>
       <div id="search-box">
         <paper-input-decorator i18n-values="label:SEARCH_TEXT_LABEL">
-          <input is="core-input" type="search" tabindex="-1"
+          <input is="core-input" type="search" tabindex="11"
                  i18n-values="aria-label:SEARCH_TEXT_LABEL">
         </paper-input-decorator>
       </div>
-      <button id="share-button" class="icon-button" command="#share" tabindex="9"
+      <button id="share-button" class="icon-button" command="#share"
+              tabindex="12"
               i18n-values="aria-label:SHARE_BUTTON_LABEL"
               visibleif="full-page">
         <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
       </button>
-      <button id="delete-button" class="icon-button" tabindex="10"
+      <button id="delete-button" class="icon-button" tabindex="13"
               i18n-values="aria-label:DELETE_BUTTON_LABEL"
               visibleif="full-page">
         <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
       </button>
       <button id="cloud-import-button"
               class="icon-button manual-display"
-              tabindex="11"
+              tabindex="14"
               i18n-values="aria-label:CLOUD_IMPORT_COMMAND"
               hidden>
         <core-icon icon="cloud-queue"></core-icon>
@@ -362,17 +363,18 @@
       </button>
       <button id="cloud-import-details-button"
               class="icon-button manual-display"
-              tabindex="12"
+              tabindex="-1"
               i18n-values="aria-label:CLOUD_IMPORT_SHOW_DETAILS"
               hidden>
         <core-icon icon="arrow-drop-down"></core-icon>
         <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
       </button>
-      <button id="view-button" class="icon-button" tabindex="13"
+      <button id="view-button" class="icon-button" tabindex="15"
               i18n-values="aria-label:CHANGE_TO_THUMBNAILVIEW_BUTTON_LABEL">
         <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
       </button>
-      <button id="gear-button" class="icon-button" tabindex="14" menu="#gear-menu"
+      <button id="gear-button" class="icon-button" tabindex="16"
+              menu="#gear-menu"
               i18n-values="aria-label:GEAR_BUTTON_TOOLTIP"
               aria-activedescendant="gear-menu">
         <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
@@ -398,7 +400,7 @@
     <div class="dialog-container">
       <div class="dialog-navigation-list">
         <div class="dialog-navigation-list-contents">
-          <tree id="directory-tree" tabindex="15"></tree>
+          <tree id="directory-tree" tabindex="17"></tree>
         </div>
         <div class="dialog-navigation-list-footer">
           <div id="progress-center" hidden>
@@ -438,9 +440,9 @@
                 Welcome to the new epic photo importer!
               </div>
               <div id="list-container">
-                <div class="detail-table" id="detail-table" tabindex="5" autofocus>
+                <div class="detail-table" id="detail-table" tabindex="1" autofocus>
                 </div>
-                <grid class="thumbnail-grid" tabindex="6"></grid>
+                <grid class="thumbnail-grid" tabindex="2"></grid>
                 <div class="spinner-layer"></div>
                 <div class="drive-welcome page"></div>
                 <div id="no-search-results"></div>
@@ -462,11 +464,12 @@
         <button id="new-folder-button" class="primary"
                 i18n-content="NEW_FOLDER_BUTTON_LABEL"
                 visibleif="saveas-file folder" command="#new-folder"
-                tabindex="4" disabled>
+                tabindex="3" disabled>
         </button>
         <div id="filename-input-box" visibleif="saveas-file">
           <paper-input-decorator i18n-values="label:FILENAME_LABEL">
-            <input is="core-input" class="entry-name" type="text" spellcheck="false" tabindex="1">
+            <input is="core-input" class="entry-name" type="text"
+                   spellcheck="false" tabindex="4">
           </paper-input-decorator>
         </div>
         <div class="preparing-label" i18n-content="PREPARING_LABEL"></div>
@@ -475,9 +478,10 @@
         </div>
       </div>
       <div class="right buttonbar">
-        <select class="file-type" hidden></select>
-        <paper-button class="cancel secondary" i18n-content="CANCEL_LABEL" tabindex="3"></paper-button>
-        <paper-button class="ok primary" disabled tabindex="2"></paper-button>
+        <select class="file-type" hidden tabindex="-1"></select>
+        <paper-button class="cancel secondary" i18n-content="CANCEL_LABEL"
+                      tabindex="5"></paper-button>
+        <paper-button class="ok primary" disabled tabindex="6"></paper-button>
       </div>
     </div>
     <div id="drag-container"></div>