Improve accessibility of Calculator default app.

Improve accessibility of Calculator default app.

Make the calculator buttons focusable and clickable,
and give them labels based on their class names.
(Maybe we can localize these next?)

Change order of operand and operator so that DOM order
matches the natural reading order. Visual display is
unchanged. Hid the accumulator from screen readers.

Make the main display area into a 'live region' so that
screen readers are encouraged to speaks text as it's
added to this region.

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

[dharcourt, 2012-10-17 04:22:44]

The code has changed significantly since the version on which this change list
is based, most notably with the 160666 revision last Monday. The latest version
is 162249 which was committed earlier today. You'll now find the relevant code
in chrome/common/extensions/docs/examples/apps/calculator/app.

Could you apply the accessibility fixes to the newer version? This change list
won't merge otherwise. I've made some comments in the diffs that might help, and
I'd be happy to help in any other way I can.

I'm excited to see the calculator made accessible!

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
File chrome/common/extensions/docs/examples/apps/calculator/style.css (right):

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/style.css:78: 
Nice! The switched order of the operator and operand in the DOM had bothered me,
but I hadn't thought of the impact on accessibility. This is a nice fix.

Nit: The Google CSS style guide advocates dashes instead of hyphens between
words (http://goo.gl/gWh88). You could avoid the issue entirely by calling the
operator-operand pair "operation".

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/style.css:133: border:
none;
I thought border: none; was the default... I have border: none removed in newer
version of style.css. What am I missing?

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
File chrome/common/extensions/docs/examples/apps/calculator/view.js (right):

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/view.js:81:
this.displayElement.attr('aria-live', 'polite');
Most of the HTML in newer versions of the calculator has moved to the .html
file. These attributes should probably follow it there.

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/view.js:157: }
This will need to be done just a bit differently in the new view.js
addEquation_(), but it should be pretty straightforward.

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/view.js:161:
$(this.lastDisplayElement).find('.operand').text(operand);
JQuery has been removed from the newer Calculator and the querySelector() calls
that replaced it should work without changes for your new operation element
hierarchy.

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/view.js:206: button_value
+ '">' + '</button>');
This can now be encoded directly in the HTML.

[dmazzoni, 2012-10-17 06:04:48]

Thanks for the fast response! Sorry the patch was stale, I made these changes a
week ago but it uncovered an accessibility bug in WebKit I had to fix first
before it would work. :) I'm rebasing it now.

[dmazzoni, 2012-10-17 16:12:32]

Rebased! Please take a look.

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
File chrome/common/extensions/docs/examples/apps/calculator/style.css (right):

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/style.css:78: 
On 2012/10/17 04:22:44, dharcourt wrote:
> Nice! The switched order of the operator and operand in the DOM had bothered
me,
> but I hadn't thought of the impact on accessibility. This is a nice fix.
> 
> Nit: The Google CSS style guide advocates dashes instead of hyphens between
> words (http://goo.gl/gWh88). You could avoid the issue entirely by calling the
> operator-operand pair "operation".

"operation" it is.

https://codereview.chromium.org/11189028/diff/1/chrome/common/extensions/docs...
chrome/common/extensions/docs/examples/apps/calculator/style.css:133: border:
none;
On 2012/10/17 04:22:44, dharcourt wrote:
> I thought border: none; was the default... I have border: none removed in
newer
> version of style.css. What am I missing?

I changed the element type from "div" to "button" - that's the easiest way to
make them keyboard-accessible, i.e. you can now tab to the buttons and activate
them with the spacebar. This is needed to override the default style for a
webkit button.

[miket_OOO, 2012-10-17 16:40:20]

Hooray for semantic HTML. Thank you very much, and LGTM.

[dmazzoni, 2012-10-17 16:51:29]

On 2012/10/17 16:40:20, miket wrote:
> Hooray for semantic HTML. Thank you very much, and LGTM.

Thanks! Should I wait for dharcourt or cq now?

[miket_OOO, 2012-10-17 16:52:36]

On 2012/10/17 16:51:29, Dominic Mazzoni wrote:
> On 2012/10/17 16:40:20, miket wrote:
> > Hooray for semantic HTML. Thank you very much, and LGTM.
> 
> Thanks! Should I wait for dharcourt or cq now?

You're good to go; Charles isn't yet a committer.

[commit-bot: I haz the power, 2012-10-17 16:53:32]

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

[commit-bot: I haz the power, 2012-10-17 19:07:03]

Change committed as 162476

[miket_OOO, 2012-10-18 16:40:46]

lgtm

[miket_OOO, 2012-10-18 16:41:40]

On 2012/10/18 16:40:46, miket wrote:
> lgtm

Sorry, wrong CL. *groan*