- Add aria-labels to calculator buttons.

 - Add status message on update of calculator display.

Author: git4aniket

src/javascripts/calculator.coffee

@@ -69,7 +69,6 @@ class Calculator
     @updateCurrentExpressionWithCommand @math.commands.build_negate_last()
 
   additionClick: ->
-    console.log "okay"
     if @typeLastPressed == "exponent" || @typeLastPressed == "lparen"
       return
     @typeLastPressed = "addition"
@@ -196,6 +195,7 @@ class CalculatorView
     disp = @element.find("figure.jc--display")
     disp.html(content)
     disp.scrollLeft(9999999)
+    $('#statusMessageContent').html(content)
 
   render: ->
     @element.append "<div class='#{calculator_wrapper_class}'></div>"

src/javascripts/math_buttons.coffee

@@ -11,73 +11,84 @@ class ButtonBuilder
         @button({
           value: "#{num}"
           class: "jc--button jc--button-number"
+          ariaLabel: "#{num}"
         }, opts)
 
   decimal: (opts)->
     @button({
       value: "."
-      class: "jc--button jc--button-decimal decimalButton"
+      class: "jc--button jc--button-decimal"
+      ariaLabel: "Decimal Separator"
     }, opts)
 
   negative: (opts)->
     @button({
       value: "negative"
       label: "(–)"
       class: "jc--button jc--button-negative"
+      ariaLabel: "Negative"
     }, opts)
 
   # Operations
   addition: (opts)->
     @button({
       value: "+"
-      class: "jc--button jc--button-operation jc--button-add addButton"
+      class: "jc--button jc--button-operation jc--button-add"
+      ariaLabel: "Plus"
     }, opts)
 
   subtraction: (opts)->
     @button({
       value: "-"
       label: "−"
       class: "jc--button jc--button-operation jc--button-subtract"
+      ariaLabel: "Minus"
     }, opts)
 
   multiplication: (opts)->
     @button({
       value: "*"
       label: "×"
       class: "jc--button jc--button-operation jc--button-multiply"
+      ariaLabel: "Multiply by"
     }, opts)
 
   division: (opts)->
     @button({
       value: "/"
       label: "÷"
       class: "jc--button jc--button-operation jc--button-divide"
+      ariaLabel: "Divide by"
     }, opts)
 
   equals: (opts)->
     @button({
       value: "="
-      class: "jc--button jc--button-operation jc--button-equal equalButton"
+      class: "jc--button jc--button-operation jc--button-equal"
+      ariaLabel: "Equals"
     }, opts)
 
   # Other functions
   lparen: (opts)->
     @button({
       value: "("
       class: "jc--button jc--button-other jc--button-rParen"
+      ariaLabel: "Left parenthesis"
     }, opts)
 
   rparen: (opts)->
     @button({
       value: ")"
       class: "jc--button jc--button-other jc--button-lParen"
+      ariaLabel: "Right parenthesis"
     }, opts)
 
   pi: (opts)->
     @button({
       value: "pi"
       label: "π"
       class: "jc--button jc--button-other jc--button-pi"
+      ariaLabel: "Pi"
     }, opts)
 
   fraction: (opts)->
@@ -91,6 +102,7 @@ class ButtonBuilder
     @button({
       value: "^"
       class: "jc--button jc--button-other jc--button-caret"
+      ariaLabel: "Caret"
     }, opts)
 
   exponent: (opts)->
@@ -100,6 +112,7 @@ class ButtonBuilder
       value: "exponent"
       label: "#{base}<sup>#{power}</sup>"
       class: "jc--button jc--button-other jc--button-exponent jc--button-exponent-#{base}to#{power}"
+      ariaLabel: "Square"
     }, opts)
 
   root: (opts)->
@@ -109,6 +122,7 @@ class ButtonBuilder
       value: "root"
       label: if degree then "<sup>#{degree}</sup>&#x221a;#{radicand}" else "&#x221a;#{radicand}"
       class: "jc--button jc--button-other jc--button-root jc--button-root-#{degree}of#{radicand}"
+      ariaLabel: "Square root"
     }, opts)
 
   # EQ builder vars
@@ -136,6 +150,7 @@ class ButtonBuilder
       value: "clear"
       label: "Clear"
       class: "jc--button jc--button-clear"
+      ariaLabel: "Clear"
     }, opts)
 
   button: (type_opts, opts)->

src/javascripts/ui_elements.coffee

@@ -5,7 +5,7 @@ class Button
   render: (opts={})->
     opts = _.extend({}, @opts, opts)
     button = $("""
-      <button type='button' class='#{opts.class}' value='#{opts.value}'>
+      <button type='button' class='#{opts.class}' value='#{opts.value}' aria-label='#{opts.ariaLabel}'>
         <span class="jc--buttonLabel">
           #{opts.label || opts.value}
         </span>