Improve accessibility of Calculator default app.

chrome/common/extensions/docs/examples/apps/calculator/style.css

Index: chrome/common/extensions/docs/examples/apps/calculator/style.css
diff --git a/chrome/common/extensions/docs/examples/apps/calculator/style.css b/chrome/common/extensions/docs/examples/apps/calculator/style.css
index 40ce70f67bac94892f844f81c348043457ee87ec..27c5e9545e9813a7966fd228cc91a45726dffcca 100644
--- a/chrome/common/extensions/docs/examples/apps/calculator/style.css
+++ b/chrome/common/extensions/docs/examples/apps/calculator/style.css
@@ -72,10 +72,13 @@ body {
   height: 22px;
 }
 
+.equation .operand_wrapper {
+  float: right;
+}
+

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

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".

[dmazzoni, 2012/10/17 16:12:33]

"operation" it is.

 .equation .operator {
   color: #2c2c2c;
   width: 15px;
-  float: right;
   padding-right: 5px;
   height: 22px;
   line-height: 16px;
@@ -85,7 +88,6 @@ body {
 
 .equation .operand {
   color: #2c2c2c;
-  float: right;
   max-width: 80px;
   text-align: right;
   overflow: hidden;
@@ -128,6 +130,7 @@ body {
   height: 45px;
   width: 61px;
   float: left;
+  border: none;

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

I thought border: none; was the default... I have border: none removed in newer
version of style.css. What am I missing?

[dmazzoni, 2012/10/17 16:12:33]

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.

 }
 
 .calc-button.AC {