Set default control on Terms of Service screen

This CL addresses the a11y issue that the Terms of Service screen does
not have any focused control by default. The focus is now placed on the
back button by default and shifts to the accept button when the Terms of
Service have finished loading.

BUG=175730
TEST=Manual


Review URL: https://chromiumcodereview.appspot.com/12221143

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@182096 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/chromeos/login/login.js

@@ -259,9 +259,7 @@ cr.define('cr.ui', function() {
    * @param {string} termsOfService The terms of service, as plain text.
    */
   Oobe.setTermsOfService = function(termsOfService) {
-    $('terms-of-service').classList.remove('tos-loading');
-    $('tos-content-main').textContent = termsOfService;
-    $('tos-accept-button').disabled = false;
+    oobe.TermsOfServiceScreen.setTermsOfService(termsOfService);
   };
 
   // Export

chrome/browser/resources/chromeos/login/oobe.js

@@ -513,9 +513,7 @@ cr.define('cr.ui', function() {
    * @param {string} termsOfService The terms of service, as plain text.
    */
   Oobe.setTermsOfService = function(termsOfService) {
-    $('terms-of-service').classList.remove('tos-loading');
-    $('tos-content-main').textContent = termsOfService;
-    $('tos-accept-button').disabled = false;
+    oobe.TermsOfServiceScreen.setTermsOfService(termsOfService);
   };
 
   // Export

chrome/browser/resources/chromeos/login/oobe_screen_terms_of_service.js

@@ -37,6 +37,22 @@ cr.define('oobe', function() {
         localStrings.getStringF('termsOfServiceContentHeading', domain);
   };
 
+  /**
+   * Displays the given |termsOfService|, enables the accept button and moves
+   * the focus to it.
+   * @param {string} termsOfService The terms of service, as plain text.
+   */
+  TermsOfServiceScreen.setTermsOfService = function(termsOfService) {
+    $('terms-of-service').classList.remove('tos-loading');
+    $('tos-content-main').textContent = termsOfService;
+    $('tos-accept-button').disabled = false;
+    // Initially, the back button is focused and the accept button is disabled.
+    // Move the focus to the accept button now but only if the user has not
+    // moved the focus anywhere in the meantime.
+    if (!$('tos-back-button').blurred)
+      $('tos-accept-button').focus();
+  };
+
   TermsOfServiceScreen.prototype = {
     // Set up the prototype chain.
     __proto__: HTMLDivElement.prototype,
@@ -61,6 +77,9 @@ cr.define('oobe', function() {
         $('tos-accept-button').disabled = true;
         chrome.send('termsOfServiceBack');
       });
+      backButton.addEventListener('blur', function(event) {
+        this.blurred = true;
+      });
       buttons.push(backButton);
 
       var acceptButton = this.ownerDocument.createElement('button');
@@ -79,6 +98,14 @@ cr.define('oobe', function() {
       return buttons;
     },
 
+    /**
+     * Returns the control which should receive initial focus.
+     */
+    get defaultControl() {
+      return $('tos-accept-button').disabled ? $('tos-back-button') :
+                                               $('tos-accept-button');
+    },
+
     /**
      * Event handler that is invoked just before the screen is shown.
      * @param {object} data Screen init payload.