Improve accessibility of Calculator default app.

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

 var operators = ['+', '-', '/', '*'];
 
 var values = { 'one'   : 1,
                'two'   : 2,
                'three' : 3,
                'four'  : 4,
                'five'  : 5,
                'six'   : 6,
                'seven' : 7,
                'eight' : 8,
@@ skipping 59 matching lines @@
       var result = calcModel.HandleButtonClick(clicked);
       calc.buttonClicked(clicked, result);
     }
   });
 
   $(document).keyup(function(event) {
     if (event.which == 16)
       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.

 }
 
 
 function displayNumber(number) {
   var digits = (number + '').length;
   if ((number >= 0 && digits > 8) || (number < 0 && digits > 9)) {
     if (number % 1 != 0) {
       number = parseFloat((number + '').slice(0, 8));
       if (number % 1 != 0) return number;
     }
@@ skipping 47 matching lines @@
   this.AddDisplayEquation('', 0, '');
 }
 
 View.prototype.UpdateTotal = function(accumulator) {
   $(this.lastDisplayElement).children('.accumulator').text(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);
 }
 
 View.prototype.AddButtons = function() {
   var row;
 
   row = this.AddRow();
   this.AddButton(row, 'AC', 'AC');
   this.AddButton(row, 'plus-minus', 'plus-minus');
@@ skipping 23 matching lines @@
   this.AddButton(row, 'point', 'point')
 }
 
 View.prototype.AddRow = function() {
   var row = $('<div/>');
   this.buttonsElement.append(row);
   return row;
 }
 
 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.

 }