A11y for supervised users import

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

 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Locally managed user creation flow screen.
  */
 
 login.createScreen('LocallyManagedUserCreationScreen',
                    'managed-user-creation', function() {
@@ skipping 238 matching lines @@
    * for importing existing users.
    * @type {Object}
    */
   ImportPod.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @override */
     decorate: function() {
       // Mousedown has to be used instead of click to be able to prevent 'focus'
       // event later.
-      this.addEventListener('mousedown',
-                            this.handleMouseDown_.bind(this));
+      this.addEventListener('mousedown', this.handleMouseDown_.bind(this));
+      var screen = $('managed-user-creation');
+      var importList = screen.importList_;
     },
 
     /**
      * Updates UI elements from user data.
      */
     update: function() {
       this.imageElement.src = this.user.avatarurl;
       this.nameElement.textContent = this.user.name;
       if (this.user.exists) {
         if (this.user.conflict == 'imported') {
@@ skipping 52 matching lines @@
    * UI element for selecting existing supervised user for import.
    * @type {Object}
    */
   ImportPodList.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     selectedPod_: null,
 
     /** @override */
     decorate: function() {
+      this.setAttribute('tabIndex', 0);
+      this.classList.add('nofocus');
+      var importList = this;
+      var screen = $('managed-user-creation');
+
+      this.addEventListener('focus', function(e) {
+        if (importList.selectedPod_ == null) {
+          if (importList.pods.length > 0)
+            importList.selectPod(importList.pods[0]);
+        }
+      });
+
+      this.addEventListener('keydown', function(e) {
+        switch (e.keyIdentifier) {
+          case 'Up':
+            importList.selectNextPod(-1);
+            e.stopPropagation();
+            break;
+          case 'Enter':
+            if (importList.selectedPod_ != null)
+              screen.importSupervisedUser_();
+            e.stopPropagation();
+            break;
+          case 'Down':
+            importList.selectNextPod(+1);
+            e.stopPropagation();
+            break;
+        }
+      });
     },
 
     /**
      * Returns all the pods in this pod list.
      * @type {NodeList}
      */
     get pods() {
       return this.children;
     },
 
@@ skipping 59 matching lines @@
       }
       this.selectedPod_ = podToSelect;
       for (var i = 0; i < this.pods.length; i++) {
         var pod = this.pods[i];
         if (pod != podToSelect)
           pod.classList.remove('focused');
       }
       if (!podToSelect)
         return;
       podToSelect.classList.add('focused');
+      podToSelect.focus();
       var screen = $('managed-user-creation');
       if (!this.selectedPod_) {
         screen.getScreenButton('import').disabled = true;
       } else {
         screen.getScreenButton('import').disabled =
             this.selectedPod_.user.exists;
         if (!this.selectedPod_.user.exists) {
           chrome.send('userSelectedForImportInManagedUserCreationFlow',
                       [podToSelect.user.id]);
         }
       }
     },
 
+    selectNextPod: function(direction) {
+      if (!this.selectedPod_)
+        return false;
+      var index = -1;
+      for (var i = 0, pod; pod = this.pods[i]; ++i) {
+        if (pod == this.selectedPod_) {
+          index = i;
+          break;
+        }
+      }
+      if (-1 == index)
+        return false;
+      index = index + direction;
+      if (index < 0 || index >= this.pods.length)
+        return false;
+      this.selectPod(this.pods[index]);
+      return true;
+    },
+
     selectUser: function(user_id) {
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (pod.user.id == user_id) {
           this.selectPod(pod);
           this.scrollIntoView(pod);
           break;
         }
       }
     },
   };
@@ skipping 1073 matching lines @@
 
       if (userList.length == 1)
         this.importList_.selectPod(this.managerList_.pods[0]);
 
       if (userList.length > 0 && this.currentPage_ == 'username')
         this.getScreenElement('import-link').hidden = false;
     },
   };
 });