Merge pull request #8064 from edx/aamir-khan/ECOM-1472-take-photo-keyboard-issue

ECOM-1472: fixed the tab issue for taking photo

lms/static/js/verify_student/views/webcam_photo_view.js

@@ -2,7 +2,10 @@
  * Interface for retrieving webcam photos.
  * Supports HTML5 and Flash.
  */
- var edx = edx || {};
+ var edx = edx || {},
+    key = {
+        enter: 13
+    };
 
  (function( $, _, Backbone, gettext ) {
     'use strict';
@@ -12,6 +15,7 @@
     edx.verify_student.WebcamPhotoView = Backbone.View.extend({
 
         template: "#webcam_photo-tpl",
+        el: "#webcam",
 
         backends: {
             "html5": {
@@ -229,7 +233,9 @@
         },
 
         render: function() {
-            var renderedHtml;
+            var renderedHtml,
+                $resetBtn,
+                $captureBtn;
 
             // Set the submit button to disabled by default
             this.setSubmitButtonEnabled( false );
@@ -241,12 +247,18 @@
             );
             $( this.el ).html( renderedHtml );
 
+            $resetBtn = this.$el.find('#webcam_reset_button');
+            $captureBtn = this.$el.find('#webcam_capture_button');
+
             // Install event handlers
-            $( "#webcam_reset_button", this.el ).on( 'click', _.bind( this.reset, this ) );
-            $( "#webcam_capture_button", this.el ).on( 'click', _.bind( this.capture, this ) );
+            $resetBtn.on( 'click', _.bind( this.reset, this ) );
+            $captureBtn.on( 'click', _.bind( this.capture, this ) );
+
+            $resetBtn.on( 'keyup', _.bind( this.reset_by_enter, this ) );
+            $captureBtn.on( 'keyup', _.bind( this.capture_by_enter, this ) );
 
             // Show the capture button
-            $( "#webcam_capture_button", this.el ).removeClass('is-hidden');
+            $captureBtn.removeClass('is-hidden');
 
             return this;
         },
@@ -266,6 +278,16 @@
             $( "#webcam_capture_button", this.el ).removeClass('is-hidden');
         },
 
+        capture_by_enter: function(event){
+            if(event.keyCode == key.enter){
+                this.capture();
+            }
+        },
+        reset_by_enter: function(event){
+            if(event.keyCode == key.enter){
+                this.reset();
+            }
+        },
         capture: function() {
             // Take a snapshot of the video
             var success = this.backend.snapshot();

lms/templates/verify_student/webcam_photo.underscore

@@ -21,10 +21,10 @@
 
 <div class="controls photo-controls">
   <div class="control control-retake is-hidden" id="webcam_reset_button">
-    <a class="action action-redo"><%- gettext( "Retake Photo" ) %></a>
+    <a class="action action-redo" tabindex=1><%- gettext( "Retake Photo" ) %></a>
   </div>
   <div class="control control-do is-hidden" id="webcam_capture_button">
-    <a class="action action-do">
+    <a class="action action-do" tabindex=1>
       <i class="icon fa fa-camera" aria-hidden="true"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
     </a>
   </div>