Merge pull request #1630 from mozilla/issue_1582_keyboard_nav

Make the "is this your computer" screen keyboard navigable.

resources/static/dialog/controllers/is_this_your_computer.js

@@ -7,6 +7,7 @@ BrowserID.Modules.IsThisYourComputer = (function() {
   "use strict";
 
   var bid = BrowserID,
+      dom = bid.DOM,
       user = bid.User,
       errors = bid.Errors,
       email;
@@ -20,9 +21,12 @@ BrowserID.Modules.IsThisYourComputer = (function() {
 
       self.renderWait("is_this_your_computer", options);
 
-      // TODO - Make the selectors use ids instead of classes.
-      self.click("button.this_is_my_computer", self.yes);
-      self.click("button.this_is_not_my_computer", self.no);
+      // renderWait does not automatically focus the first input element or
+      // button, so it must be done manually.
+      dom.focus("#this_is_my_computer");
+
+      self.click("#this_is_my_computer", self.yes);
+      self.click("#this_is_not_my_computer", self.no);
 
       Module.sc.start.call(self, options);
     },

resources/static/dialog/views/is_this_your_computer.ejs

@@ -6,12 +6,12 @@
     <h2><%= gettext('If you don\'t mind me asking, is this your computer?') %></h2>
 
     <p>
-      <button class="this_is_my_computer" tabindex="3"><%= gettext('yes') %></button>
+      <button id="this_is_my_computer"><%= gettext('yes') %></button>
       <%= gettext('If so, we\'ll keep you logged in for a couple weeks.') %>
     </p>
 
     <p>
-      <button class="this_is_not_my_computer negative" tabindex="3"><%= gettext('no') %></button>
+      <button id="this_is_not_my_computer" class="negative"><%= gettext('no') %></button>
       <%= gettext('If you\'re at a public computer such as a library or internet cafe, we\'ll ask you for your password again in an hour.') %>
     </p>
   </div>