set focus on answer comment box during keyboard navigation

closes QO-746
flag=none

test plan:
- create a classic quiz
- create a question in the quiz
- use your keyboard to navagate to an answer comment box
- the comment box should be focused
- pressing Enter/Space while focusing on the comment box
should open the RCE

Change-Id: Ibcfa57936588a7fcdf8af4a77011e413a6d8aeca
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/261891
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Susan Sorensen <susan.sorensen@instructure.com>
Reviewed-by: James Logan <james.logan@instructure.com>
QA-Review: Mark McDermott <mmcdermott@instructure.com>

app/stylesheets/pages/quizzes/_quizzes.scss

@@ -1032,6 +1032,7 @@ form.question_form {
       margin-#{direction(left)}: 30px;
       padding: 10px 5px;
       margin-top: 5px;
+      cursor: pointer;
       .answer_comment_box {
         height: 2.5em;
       }

app/views/quizzes/quizzes/_form_answer.html.erb

@@ -104,15 +104,15 @@
     </tr>
     <tr>
       <td colspan="3">
-       <div class="answer_comments comment empty">
+       <div class="answer_comments comment empty" tabindex="0">
         <div class="comment_top"></div>
          <% edit_comment_text = t("Click to enter comments, if the student chooses this answer") %>
-         <a href="#" class="comment_focus" title="<%= edit_comment_text %>">
+         <span class="comment_focus" title="<%= edit_comment_text %>" tabindex="-1">
            <span class="ellipsis" aria-hidden="true">...</span>
            <i class="icon-edit standalone-icon"></i>
            <span class="commentAnswerId screenreader-only"></span>
            <span class="screenreader-only"><%= edit_comment_text %></span>
-         </a>
+         </span>
           <span id="comments_header" class="details"><%= before_label(:answer_comments, "Comments, if the student chooses this answer") %></span>
           <input type="hidden" name="answer_comment_html" />
           <div class="answer_comment_html comment_html"></div>
@@ -121,4 +121,3 @@
     </tr>
   </table>
 </div>
-

spec/selenium/helpers/quizzes_common.rb

@@ -452,7 +452,7 @@ module QuizzesCommon
   end
 
   def set_answer_comment(answer_num, text)
-    driver.execute_script("$('.question_form:visible .form_answers .answer:eq(#{answer_num}) .comment_focus').click()")
+    driver.execute_script("$('.question_form:visible .form_answers .answer:eq(#{answer_num}) .answer_comments').click()")
     wait_for_ajaximations
     type_in_tiny(".question_form:visible .form_answers .answer:eq(#{answer_num}) .answer_comments textarea", text)
   end

ui/features/quizzes/jquery/quizzes.js

@@ -2860,7 +2860,7 @@ $(document).ready(function() {
     quiz.updateDisplayComments()
   })
 
-  $(document).delegate('a.comment_focus', 'click', function(event) {
+  $(document).delegate('div.answer_comments, a.comment_focus', 'click', function (event) {
     event.preventDefault()
     const $link = $(this)
     const $comment = $link.closest('.question_comment, .answer_comments')
@@ -2878,7 +2878,7 @@ $(document).ready(function() {
         editorBoxLabel: $link.title
       })
 
-      toggler.editButton = $link
+      toggler.editButton = $comment // focus on the comment box after closing the RCE
       toggler.on('display', () => {
         $comment.removeClass('editing')
 
@@ -2898,6 +2898,13 @@ $(document).ready(function() {
     }
   })
 
+  // while focusing on an answer comment box, trigger its click event when the
+  // Space or Enter key is pressed
+  $(document).delegate('.answer_comments', 'keyup', function (event) {
+    const keycode = event.keyCode || event.which
+    if ([13, 32].indexOf(keycode) > -1) $(this).click()
+  })
+
   $(document)
     .delegate('.numerical_answer_type', 'change', function() {
       numericalAnswerTypeChange($(this))