Improve accessibility of Calculator default app.

chrome/common/extensions/docs/examples/apps/calculator/view.js

Index: chrome/common/extensions/docs/examples/apps/calculator/view.js
diff --git a/chrome/common/extensions/docs/examples/apps/calculator/view.js b/chrome/common/extensions/docs/examples/apps/calculator/view.js
index c810038beb5d653e4ce7093e05a50ec4a0f065c7..fe4b0332de6ee2edad95af9400ffca78a990ce6d 100644
--- a/chrome/common/extensions/docs/examples/apps/calculator/view.js
+++ b/chrome/common/extensions/docs/examples/apps/calculator/view.js
@@ -77,6 +77,8 @@ function View(calcModel) {
       shift = false;
   });
 
+  this.displayElement.attr('role', 'log');
+  this.displayElement.attr('aria-live', 'polite');

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

Most of the HTML in newer versions of the calculator has moved to the .html
file. These attributes should probably follow it there.

 }
 
 
@@ -144,17 +146,19 @@ View.prototype.UpdateTotal = function(accumulator) {
 View.prototype.AddDisplayEquation = function(operator, operand, accumulator) {
   this.displayElement.append(
       '<div class="equation">'
-      + '<div class="operand">' + operand + '</div>'
-      + '<div class="operator">' + operator + '</div>'
-      + '<div class="accumulator">' + accumulator + '</div'
+      + '<div class="operand_wrapper">'
+      + '<span class="operator">' + operator + '</span>'
+      + '<span class="operand">' + operand + '</span>'
+      + '</div>'
+      + '<div class="accumulator" aria-hidden="true">' + accumulator + '</div'
       + '</div>');
   this.lastDisplayElement = $('.equation').last();
   this.displayElement.scrollTop(this.displayElement[0].scrollHeight);
 }

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

This will need to be done just a bit differently in the new view.js
addEquation_(), but it should be pretty straightforward.

 
 View.prototype.UpdateDisplayEquation = function(operator, operand, accumulator) {
-  $(this.lastDisplayElement).children('.operator').text(operator);
-  $(this.lastDisplayElement).children('.operand').text(operand);
+  $(this.lastDisplayElement).find('.operator').text(operator);
+  $(this.lastDisplayElement).find('.operand').text(operand);

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

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.

   $(this.lastDisplayElement).children('.accumulator').text(accumulator);
   this.displayElement.scrollTop(this.displayElement[0].scrollHeight);
 }
@@ -198,5 +202,6 @@ View.prototype.AddRow = function() {
 }
 
 View.prototype.AddButton = function(row, value, button_value) {
-  row.append('<div class="calc-button ' + button_value + '">' + '</div>');
+  row.append('<button aria-label="' + button_value + '" class="calc-button ' +
+             button_value + '">' + '</button>');

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

This can now be encoded directly in the HTML.

 }