Improve extension settings accessibility.

Improve extension settings accessibility.

Changes:
1. The disclosure triangle next to each extension is now accessible.
   Test it out by tabbing to it.
2. When you click, the focus outline on the disclosure triangle is hidden,
   but if you tab to it with the keyboard, it's shown. This minimizes
   ugliness for most users while enhancing accessibility for users who need it.
3. When the details are hidden, the links and controls within it are no
   longer part of the tab order so you can't tab to invisible controls.
   When the details are shown, they're focusable again.

New strings are deliberately commented out so that the rest of this change
can be merged to M16. A follow-up change will uncomment the new strings for
the trunk.

BUG=101066
TEST=Open chrome://extensions and tab through the controls, test the disclosure triangle that reveals the details.

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=106752

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

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
File chrome/browser/resources/options/extension_list.js (right):

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:54: }, true);
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?

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:174: container.href = '#';
container is a div...

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:180:
container.setAttribute('aria-controls', extension.id + '_details');
aria-controls? what's that?

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:583: if (e.keyCode == 13 ||
e.keyCode == 32)  // Enter or Space
nit: End all comments with punctuation marks (period in this case).

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/ui/webui/opti...
File chrome/browser/ui/webui/options/extension_settings_handler.cc (right):

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/ui/webui/opti...
chrome/browser/ui/webui/options/extension_settings_handler.cc:572: //
TODO(dmazzoni) Uncomment these strings once this change is merged.
nit: Semicolon after close parenthesis.

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

Comments addressed. I fixed one more case, I had forgotten to set tabIndex=-1
initially, so I added a couple of lines to the bottom of
decorateDetailsSection_.

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
File chrome/browser/resources/options/extension_list.js (right):

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:54: }, true);
On 2011/10/21 09:35:46, Finnur wrote:
> 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?
> 

Done.

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:174: container.href = '#';
On 2011/10/21 09:35:46, Finnur wrote:
> container is a div...

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

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:180:
container.setAttribute('aria-controls', extension.id + '_details');
On 2011/10/21 09:35:46, Finnur wrote:
> aria-controls? what's that?

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.

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/resources/opt...
chrome/browser/resources/options/extension_list.js:583: if (e.keyCode == 13 ||
e.keyCode == 32)  // Enter or Space
On 2011/10/21 09:35:46, Finnur wrote:
> nit: End all comments with punctuation marks (period in this case).

Done.

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/ui/webui/opti...
File chrome/browser/ui/webui/options/extension_settings_handler.cc (right):

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/ui/webui/opti...
chrome/browser/ui/webui/options/extension_settings_handler.cc:572: //
TODO(dmazzoni) Uncomment these strings once this change is merged.
On 2011/10/21 09:35:46, Finnur wrote:
> nit: Semicolon after close parenthesis.

Done - I think you mean colon?

[Finnur, 2011-10-21 16:46:21]

lgtm

LGTM

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/ui/webui/opti...
File chrome/browser/ui/webui/options/extension_settings_handler.cc (right):

http://codereview.chromium.org/8359008/diff/2002/chrome/browser/ui/webui/opti...
chrome/browser/ui/webui/options/extension_settings_handler.cc:572: //
TODO(dmazzoni) Uncomment these strings once this change is merged.
Correct. I meant open braces. :)

Just kidding. :)

On 2011/10/21 16:29:38, Dominic Mazzoni wrote:
> On 2011/10/21 09:35:46, Finnur wrote:
> > nit: Semicolon after close parenthesis.
> 
> Done - I think you mean colon?

[commit-bot: I haz the power, 2011-10-21 16:56:09]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/dmazzoni@chromium.org/8359008/6001

[commit-bot: I haz the power, 2011-10-21 19:16:24]

Change committed as 106752