Improves keyboard-only navigation of the Uber Settings page.

1) Allows for tabbing to the navigation elements on the left.
2) Improves the ability to use the Profile Management section with only the keyboard.

Further fixes for the Settings page coming in next CL.

BUG=113337
TEST=none


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

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

5 files changed, 42 insertions, 12 deletions

diff --git a/chrome/browser/resources/options2/browser_options.css b/chrome/browser/resources/options2/browser_options.css
index 7682b8c..31b3345 100644
--- a/chrome/browser/resources/options2/browser_options.css
+++ b/chrome/browser/resources/options2/browser_options.css
@@ -76,6 +76,10 @@ html[dir=rtl] #account-picture-wrapper {
   height: 40px;
 }
 
+#profiles-list:focus {
+  border-color: rgb(77, 144, 254);
+}
+
 .profile-img {
   height: 31px;
   padding: 3px;
diff --git a/chrome/browser/resources/options2/browser_options_profile_list.js b/chrome/browser/resources/options2/browser_options_profile_list.js
index 36b8cdd..9c47492 100644
--- a/chrome/browser/resources/options2/browser_options_profile_list.js
+++ b/chrome/browser/resources/options2/browser_options_profile_list.js
@@ -63,6 +63,9 @@ cr.define('options.browser_options', function() {
             'profilesListItemCurrent',
             profileInfo.name);
       nameEl.textContent = displayName;
+
+      // Ensure that the button cannot be tabbed to for accessibility reasons.
+      this.closeButtonElement.tabIndex = -1;
     },
   };
 
diff --git a/chrome/browser/resources/options2/deletable_item_list.js b/chrome/browser/resources/options2/deletable_item_list.js
index c0d26e77..8d79902 100644
--- a/chrome/browser/resources/options2/deletable_item_list.js
+++ b/chrome/browser/resources/options2/deletable_item_list.js
@@ -65,6 +65,14 @@ cr.define('options', function() {
       return this.contentElement_;
     },
 
+    /**
+     * Returns the close button element.
+     * @return {HTMLElement} The close |<button>| element.
+     */
+    get closeButtonElement() {
+      return this.closeButtonElement_;
+    },
+
     /* Gets/sets the deletable property. An item that is not deletable doesn't
      * show the delete button (although space is still reserved for it).
      */
diff --git a/chrome/browser/resources/uber/uber_frame.css b/chrome/browser/resources/uber/uber_frame.css
index 2252a7b..4a0dc92 100644
--- a/chrome/browser/resources/uber/uber_frame.css
+++ b/chrome/browser/resources/uber/uber_frame.css
@@ -28,9 +28,6 @@ li {
   -webkit-border-start: 6px solid transparent;
   -webkit-padding-start: 18px;
   -webkit-user-select: none;
-  color: #999;
-  cursor: pointer;
-  line-height: 17px;
   margin: 5px 0;
 }
 
@@ -40,7 +37,6 @@ li:hover {
 
 li.selected {
   -webkit-border-start-color: rgb(78, 87, 100);
-  color: rgb(70, 78, 90);
   cursor: default;
   pointer-events: none;
 }
@@ -48,3 +44,18 @@ li.selected {
 #helpNavItem {
   margin-top: 27px;
 }
+
+button {
+  background-color: white;
+  border: 0;
+  color: #999;
+  cursor: pointer;
+  font: 12px 'DejaVu Sans', Arial, sans-serif;
+  line-height: 17px;
+  margin: 0;
+  padding: 0;
+}
+
+.selected > button {
+  color: rgb(70, 78, 90);
+}
diff --git a/chrome/browser/resources/uber/uber_frame.html b/chrome/browser/resources/uber/uber_frame.html
index ddeda8a..7fddd0c 100644
--- a/chrome/browser/resources/uber/uber_frame.html
+++ b/chrome/browser/resources/uber/uber_frame.html
@@ -14,17 +14,21 @@
 
 <h1 i18n-content="shortProductName"></h1>
 <ul>
-  <li i18n-content="historyDisplayName"
-      i18n-values="controls:historyHost;override:overridesHistory">
+  <li i18n-values="controls:historyHost;override:overridesHistory">
+    <button class="custom-appearance"
+        i18n-content="historyDisplayName"></button>
   </li>
-  <li i18n-content="extensionsDisplayName"
-      i18n-values="controls:extensionsHost">
+  <li i18n-values="controls:extensionsHost">
+    <button class="custom-appearance"
+        i18n-content="extensionsDisplayName"></button>
   </li>
-  <li i18n-content="settingsDisplayName"
-      i18n-values="controls:settingsHost">
+  <li i18n-values="controls:settingsHost">
+    <button class="custom-appearance"
+        i18n-content="settingsDisplayName"></button>
   </li>
-  <li id="helpNavItem" i18n-content="helpDisplayName"
-      i18n-values="controls:helpHost">
+  <li id="helpNavItem" i18n-values="controls:helpHost">
+    <button class="custom-appearance"
+        i18n-content="helpDisplayName"></button>
   </li>
 </ul>