Improve accessibility of Calculator default app.

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

 html {
   height: 380px;
   margin: 0;
   padding: 0;
   width: 244px;
   font-family: "Open Sans", "Hevatica Neue", "Helvetica", "Arial", sans-serif;
   font-weight: 700;
   font-size: 16px;
   overflow: hidden;
 }
@@ skipping 54 matching lines @@
   z-index: 99;
 }
 
 .equation {
   width: 100%;
   position: relative;
   clear: both;
   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;
   padding-top: 3px;
   padding-bottom: 3px;
 }
 
 .equation .operand {
   color: #2c2c2c;
-  float: right;
   max-width: 80px;
   text-align: right;
   overflow: hidden;
   height: 16px;
   line-height: 16px;
   padding-top: 3px;
   padding-bottom: 3px;
 }
 
 .equation .accumulator {
@@ skipping 22 matching lines @@
   max-width: 244px;
   min-width: 244px;
   position: absolute;
   bottom: 0px;
 }
 
 .calc-button {
   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 {
   background: url('img/1x/normal/52112_calculator_ac_btn.png');
   background-size: 61px 45px;
 }
 
 .calc-button.AC:active {
   background: url('img/1x/pressed/52112_calculator_ac_btn.png');
   background-size: 61px 45px;
@@ skipping 169 matching lines @@
   margin-top: -45px;
   margin-left: 122px;
 }
 
 .calc-button.point:active {
   background: url('img/1x/pressed/52112_calculator_point_btn.png') center no-repeat;
   background-size: 61px 45px;
 }