Improve extension settings accessibility.

chrome/browser/resources/options/extension_list.js

Index: chrome/browser/resources/options/extension_list.js
===================================================================
--- chrome/browser/resources/options/extension_list.js	(revision 106237)
+++ chrome/browser/resources/options/extension_list.js	(working copy)
@@ -39,6 +39,19 @@
       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.

     },
 
     /**
@@ -158,7 +171,17 @@
         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.
@@ -552,9 +575,19 @@
     },
 
     /**
+     * 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) {
@@ -563,6 +596,7 @@
       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')) {
@@ -573,6 +607,12 @@
             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 =
@@ -587,6 +627,12 @@
             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;