Improve extension settings accessibility.

chrome/browser/resources/options/extension_list.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   'use strict';
 
   /**
    * A lookup helper function to find the first node that has an id (starting
    * at |node| and going up the parent chain).
    * @param {Element} node The node to start looking at.
    */
   function findIdNode(node) {
     while (node && !node.id) {
       node = node.parentNode;
     }
     return node;
   }
 
   /**
    * Creates a new list of extensions.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
    * @extends {cr.ui.div}
    */
   var ExtensionsList = cr.ui.define('div');
 
-  var handleInstalled = false;
+  var handlersInstalled = false;
 
   ExtensionsList.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       this.initControlsAndHandlers_();
 
       var showingDetails = [];
       var showingWarning = [];
@@ skipping 13 matching lines @@
       var toggleSection = $('dev');
       if (this.data_.developerMode) {
         toggleSection.classList.add('dev-open');
         toggleSection.classList.remove('dev-closed');
         toggleButton.checked = true;
       } else {
         toggleSection.classList.remove('dev-open');
         toggleSection.classList.add('dev-closed');
       }
 
-      // Install handler for key presses.
-      if (!handleInstalled) {
+      // Instal global event handlers.
+      if (!handlersInstalled) {
         this.ownerDocument.addEventListener('keyup',
                                             this.upEventHandler_.bind(this));
         this.ownerDocument.addEventListener('mouseup',
                                             this.upEventHandler_.bind(this));
-        handleInstalled = true;
+
+        // Support full keyboard accessibility without making things ugly
+        // for users who click, by hiding some focus outlines when the user
+        // clicks anywhere, but showing them when the user presses any key.
+        this.ownerDocument.body.classList.add('hide-some-focus-outlines');
+        this.ownerDocument.addEventListener('click', (function(e) {
+          this.ownerDocument.body.classList.add('hide-some-focus-outlines');
+          return true;
+        }).bind(this), true);
+        this.ownerDocument.addEventListener('keydown', (function(e) {
+          this.ownerDocument.body.classList.remove('hide-some-focus-outlines');
+          return true;
+        }).bind(this), true);
+
+        handlersInstalled = true;
       }
     },
 
     /**
      * Deletes the existing Extension nodes from the page to make room for new
      * ones. It also keeps track of who was showing details so when the
      * extension list gets recreated we can recreate that state.
      *     @param {Array} showingDetails An array that will contain the list of
      *                    id's of extension that had the details section
      *                    expanded.
@@ skipping 72 matching lines @@
         wrapper.appendChild(vboxOuter);
 
         var hbox = this.ownerDocument.createElement('div');
         hbox.classList.add('hbox');
         vboxOuter.appendChild(hbox);
 
         // Add a container div for the zippy, so we can extend the hit area.
         var container = this.ownerDocument.createElement('div');
         // Clicking anywhere on the div expands/collapses the details.
         container.classList.add('extension-zippy-container');
+        container.title = expanded ?
+            localStrings.getString('extensionSettingsHideDetails') :
+            localStrings.getString('extensionSettingsShowDetails');
+        container.tabIndex = 0;
+        container.setAttribute('role', 'button');
+        container.setAttribute('aria-controls', extension.id + '_details');
+        container.setAttribute('aria-expanded', expanded);
         container.addEventListener('click', this.handleZippyClick_.bind(this));
+        container.addEventListener('keydown',
+                                   this.handleZippyKeyDown_.bind(this));
         hbox.appendChild(container);
 
         // On the far left we have the zippy icon.
         var div = this.ownerDocument.createElement('div');
         div.id = id + '_zippy';
         div.classList.add('extension-zippy-default');
         div.classList.add(expanded ? 'extension-zippy-expanded' :
                                      'extension-zippy-collapsed');
         container.appendChild(div);
 
@@ skipping 343 matching lines @@
 
         var span = this.ownerDocument.createElement('span');
         span.innerHTML =
             localStrings.getString('extensionSettingsIncognitoWarning');
         content.appendChild(span);
         itemsShown++;
       }
 
       var zippy = extension.id + '_zippy';
       $(zippy).hidden = !itemsShown;
+
+      // If this isn't expanded now, make sure the newly-added controls
+      // are not part of the tab order.
+      if (!expanded) {
+        var detailsControls = details.querySelectorAll('a, input');
+        for (var i = 0; i < detailsControls.length; i++)
+          detailsControls[i].tabIndex = -1;
+      }
     },
 
     /**
      * A helper function to add contextual actions for extensions (action links)
      * to the page.
      */
     addLinkTo_: function(parent, linkText, id, handler) {
       var link = this.ownerDocument.createElement('a');
       link.className = 'extension-links-trailing';
       link.textContent = linkText;
@@ skipping 10 matching lines @@
      */
     getExtensionWithId_: function(id) {
       for (var i = 0; i < this.data_.extensions.length; ++i) {
         if (this.data_.extensions[i].id == id)
           return this.data_.extensions[i];
       }
       return null;
     },
 
     /**
+     * Handles a key down on the zippy icon.
+     * @param {Event} e Key event.
+     * @private
+     */
+    handleZippyKeyDown_: function(e) {
+      if (e.keyCode == 13 || e.keyCode == 32)  // Enter or Space.
+        this.handleZippyClick_(e);
+    },
+
+    /**
      * Handles the mouseclick on the zippy icon (that expands and collapses the
      * details section).
-     * @param {Event} e Change event.
+     * @param {Event} e Mouse event.
      * @private
      */
     handleZippyClick_: function(e) {
       var node = findIdNode(e.target.parentNode);
       var iter = this.firstChild;
       while (iter) {
         var zippy = $(iter.id + '_zippy');
         var details = $(iter.id + '_details');
+        var container = zippy.parentElement;
         if (iter.id == node.id) {
           // Toggle visibility.
           if (iter.classList.contains('extension-list-item-expanded')) {
             // Hide yo kids! Hide yo wife!
             zippy.classList.remove('extension-zippy-expanded');
             zippy.classList.add('extension-zippy-collapsed');
             details.classList.remove('extension-details-visible');
             details.classList.add('extension-details-hidden');
             iter.classList.remove('extension-list-item-expanded');
             iter.classList.add('extension-list-item-collaped');
+            container.setAttribute('aria-expanded', 'false');
+            container.title =
+                localStrings.getString('extensionSettingsShowDetails');
+            var detailsControls = details.querySelectorAll('a, input');
+            for (var i = 0; i < detailsControls.length; i++)
+              detailsControls[i].tabIndex = -1;
 
             // Hide yo incognito warning.
             var butterBar =
                 this.querySelector('#' + iter.id + '_incognitoWarning');
             if (!(butterBar === null))
               butterBar.hidden = true;
           } else {
             // Show the contents.
             zippy.classList.remove('extension-zippy-collapsed');
             zippy.classList.add('extension-zippy-expanded');
             details.classList.remove('extension-details-hidden');
             details.classList.add('extension-details-visible');
             iter.classList.remove('extension-list-item-collaped');
             iter.classList.add('extension-list-item-expanded');
+            container.setAttribute('aria-expanded', 'true');
+            container.title =
+                localStrings.getString('extensionSettingsHideDetails');
+            var detailsControls = details.querySelectorAll('a, input');
+            for (var i = 0; i < detailsControls.length; i++)
+              detailsControls[i].tabIndex = 0;
           }
         }
         iter = iter.nextSibling;
       }
     },
 
     /**
      * Handles the mouse-up and keyboard-up events. This is used to limit the
      * number of items to show in the list, when the user is searching for items
      * with the search box. Otherwise, if one match is found, the whole list of
@@ skipping 126 matching lines @@
           ]);
         }
       }
     },
   };
 
   return {
     ExtensionsList: ExtensionsList
   };
 });