Merge pull request #249 from mozilla/issue-166-keyboard-nav-buttons

Ensure keyboard accessibility

app/scripts/templates/age.mustache

@@ -30,8 +30,4 @@
       <button id="fxa-age-submit" type="submit" disabled>{{#t}}Next{{/t}}</button>
     </div>
   </form>
-
-  <!--div class="links">
-    <a id="fxa-age-back">{{#t}}Back{{/t}}</a>
-  </div-->
 </section>

app/scripts/views/age.js

@@ -20,7 +20,7 @@ function (BaseView, AgeTemplate) {
 
     events: {
       'submit form': 'age',
-      'click #fxa-age-back': 'back',
+      'keyup select': 'enableButtonWhenValid',
       'change select': 'enableButtonWhenValid'
     },
 
@@ -38,13 +38,7 @@ function (BaseView, AgeTemplate) {
       router.navigate(nextStep, { trigger: true });
     },
 
-    back: function (event) {
-      event.preventDefault();
-
-      window.history.back();
-    },
-
-    isValid: function() {
+    isValid: function () {
       return this._validateYear();
     },
 

app/scripts/views/base.js

@@ -9,6 +9,8 @@ define([
   'backbone'
 ],
 function(_, Backbone) {
+  var ENTER_BUTTON_CODE = 13;
+
   var BaseView = Backbone.View.extend({
     constructor: function(options) {
       this.subviews = [];
@@ -103,6 +105,20 @@ function(_, Backbone) {
     displayError: function(msg) {
       // TODO - run the error message through the translator
       this.$('.error').html(msg);
+    },
+
+    back: function (event) {
+      if (event) {
+        event.preventDefault();
+      }
+
+      window.history.back();
+    },
+
+    backOnEnter: function (event) {
+      if (event.which === ENTER_BUTTON_CODE) {
+        window.history.back();
+      }
     }
   });
 

app/scripts/views/pp.js

@@ -14,13 +14,9 @@ function (BaseView, PpTemplate) {
     className: 'pp',
 
     events: {
-      'click #fxa-pp-back': 'back'
-    },
-
-    back: function () {
-      window.history.back();
+      'click #fxa-pp-back': 'back',
+      'keyup #fxa-pp-back': 'backOnEnter'
     }
-
   });
 
   return PpView;

app/scripts/views/tos.js

@@ -14,13 +14,9 @@ function (BaseView, TosTemplate) {
     className: 'tos',
 
     events: {
-      'click #fxa-tos-back': 'back'
-    },
-
-    back: function () {
-      window.history.back();
+      'click #fxa-tos-back': 'back',
+      'keyup #fxa-tos-back': 'backOnEnter'
     }
-
   });
 
   return TosView;

app/styles/main.css

@@ -168,7 +168,9 @@ section p {
   text-decoration: none;
 }
 
-.button-row button:active {
+.button-row button:active,
+.button-row button:hover,
+.button-row button:focus {
   background: #FF9500;
 }