file manager: set explicit tabindex ordering

BUG=chromium-os:16379
TEST=manual testing on chromeos-chrome on linux

Review URL: http://codereview.chromium.org/7189015

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@89691 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 17 insertions, 10 deletions

diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 13c272c..6abedfc 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -87,7 +87,7 @@ function FileManager(dialogDom, rootEntries, params) {
   chrome.fileBrowserPrivate.onDiskChanged.addListener(
       this.onDiskChanged_.bind(this));
 
-  this.table_.list_.focus();
+  this.document_.querySelector('[tabindex="0"]').focus();
 
   if (ENABLE_METADATA) {
     // Pass all URLs to the metadata reader until we have a correct filter.
@@ -958,6 +958,7 @@ FileManager.prototype = {
   FileManager.prototype.renderCheckbox_ = function(entry) {
     var input = this.document_.createElement('input');
     input.setAttribute('type', 'checkbox');
+    input.setAttribute('tabindex', -1);
     input.className = 'file-checkbox';
     input.addEventListener('mousedown',
                            this.onCheckboxMouseDownUp_.bind(this));
diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html
index 8fdcae5..cc68d5d 100644
--- a/chrome/browser/resources/file_manager/main.html
+++ b/chrome/browser/resources/file_manager/main.html
@@ -99,19 +99,20 @@
     <div class=dialog-header>
       <div class=breadcrumbs></div>
       <!-- TODO(rginda): Add icons instead of unicode glyphs -->
-      <button class=detail-view
+      <button class=detail-view tabindex=4
               ><img src='images/icon-detail-view.png'></button
-      ><button class=thumbnail-view
+      ><button class=thumbnail-view tabindex=5
               ><img src='images/icon-thumb-view.png'></button>
       <button i18n-content=NEW_FOLDER_BUTTON_LABEL class='new-folder'
+              tabindex=6
               visibleif='this.dialogType_ == "saveas-file" ||
                          this.dialogType_ == "full-page"'
               ></button>
     </div>
     <div class=dialog-body>
       <div class=list-container>
-        <grid class=thumbnail-grid></grid>
-        <div class=detail-table></div>
+        <div class=detail-table tabindex=0></div>
+        <grid class=thumbnail-grid tabindex=0></grid>
       </div>
       <div class=preview-container>
         <div class=table-header style='width:100%'>
@@ -132,10 +133,12 @@
            visibleif='this.dialogType_ == "saveas-file"'
            >[FILENAME]</div>
       <input type=text class=filename-input spellcheck=false
+             tabindex=1
              visibleif='this.dialogType_ == "saveas-file"'>
       <div class=horizontal-spacer></div>
-      <button class=ok disabled>[OK]</button>
-      <button class=cancel i18n-content=CANCEL_LABEL>[CANCEL]</button>
+      <button class=ok disabled tabindex=2>[OK]</button>
+      <button class=cancel tabindex=3 i18n-content=CANCEL_LABEL
+              >[CANCEL]</button>
     </div>
 
     <script>init();</script>
diff --git a/chrome/browser/resources/shared/js/cr/ui/table.js b/chrome/browser/resources/shared/js/cr/ui/table.js
index bd67378..ac99500 100644
--- a/chrome/browser/resources/shared/js/cr/ui/table.js
+++ b/chrome/browser/resources/shared/js/cr/ui/table.js
@@ -120,9 +120,12 @@ cr.define('cr.ui', function() {
       this.boundResize_ = this.resize.bind(this);
       this.boundHandleSorted_ = this.handleSorted_.bind(this);
 
-      // Make table focusable
-      if (!this.hasAttribute('tabindex'))
-        this.tabIndex = 0;
+      // The contained list should be focusable, not the table itself.
+      if (this.hasAttribute('tabindex')) {
+        this.list_.setAttribute('tabindex', this.getAttribute('tabindex'));
+        this.removeAttribute('tabindex');
+      }
+
       this.addEventListener('focus', this.handleElementFocus_, true);
       this.addEventListener('blur', this.handleElementBlur_, true);
     },