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).
@@ skipping 21 matching lines @@
 
     /** @inheritDoc */
     decorate: function() {
       this.initControlsAndHandlers_();
 
       var showingDetails = [];
       var showingWarning = [];
       this.deleteExistingExtensionNodes_(showingDetails, showingWarning);
 
       this.showExtensionNodes_(showingDetails, showingWarning);
+
+      // 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.
+      document.body.classList.add('hide-some-focus-outlines');
+      document.addEventListener('click', function(e) {
+        document.body.classList.add('hide-some-focus-outlines');
+        return true;
+      }, true);
+      document.addEventListener('keydown', function(e) {
+        document.body.classList.remove('hide-some-focus-outlines');
+        return true;
+      }, true);

[Finnur, 2011/10/21 09:35:46]

I think decorate is called more than once, so why not do this in
initControlsAndHandler_ instead (inside the !handleInstalled clause)?

Actually (while you are at it) can you rename that variable handlersInstalled?

[dmazzoni, 2011/10/21 16:29:38]

Done.

     },
 
     /**
      * Initializes the controls (toggle section and button) and installs
      * handlers.
      * @private
      */
     initControlsAndHandlers_: function() {
       // Make sure developer mode section is set correctly as per saved setting.
       var toggleButton = $('toggle-dev-on');
@@ skipping 99 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.href = '#';

[Finnur, 2011/10/21 09:35:46]

container is a div...

[dmazzoni, 2011/10/21 16:29:38]

Oops! As you can see, I initially experimented with making it a link, but that
unfortunately broke the CSS animation.

+        container.title = expanded ?
+            localStrings.getString('extensionSettingsHideDetails') :
+            localStrings.getString('extensionSettingsShowDetails');
+        container.tabIndex = 0;
+        container.setAttribute('role', 'button');
+        container.setAttribute('aria-controls', extension.id + '_details');

[Finnur, 2011/10/21 09:35:46]

aria-controls? what's that?

[dmazzoni, 2011/10/21 16:29:38]

http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

It's an accessibility hint that this element is used to control some aspect of
another element (in this case, the details). For someone with low vision who
uses magnification software, this tells the magnifier to try to keep both the
button and the details on the screen together if possible - otherwise you could
click on the button and not realize what's happening.

+        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 373 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

[Finnur, 2011/10/21 09:35:46]

nit: End all comments with punctuation marks (period in this case).

[dmazzoni, 2011/10/21 16:29:38]

Done.

+        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
   };
 });