css hack to draw pretty outline on focused mejs-audio comment element

fixes CNVS-22375

test plan:
- add an audio comment on a discussion
- open the audio comment
- verify that the outline around the focused element is the width/height of
  the audio controls
- rejoice!

Change-Id: I41c792a4cd7b4bd49c9fc402ab3e14e40085f25b
Reviewed-on: https://gerrit.instructure.com/119923
Tested-by: Jenkins
Product-Review: brian kirkby <bkirkby@instructure.com>
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
QA-Review: Tucker McKnight <tmcknight@instructure.com>

app/coffeescripts/behaviors/instructure_inline_media_comment.js

@@ -28,7 +28,7 @@ const inlineMediaComment = {
     </a>`
   ),
 
-  buildCommentHolder: ($link) => $('<div><div tabindex="0" style="margin-bottom: 15px;"></div></div>'),
+  buildCommentHolder: ($link) => $('<div><div class="innerholder" tabindex="-1" style="margin-bottom: 15px;"></div></div>'),
 
   getMediaCommentId ($link) {
     let idAttr
@@ -45,6 +45,10 @@ const inlineMediaComment = {
   },
 }
 
+const initialFocusInnerhold = (e) => {
+  $(e.target).find('div.mejs-audio').focus()
+}
+
 $(document).on('click', 'a.instructure_inline_media_comment', preventDefault(function () {
   if (!INST.kalturaSettings) {
     alert(I18n.t('alerts.kaltura_disabled', 'Kaltura has been disabled for this Canvas site'))
@@ -73,6 +77,8 @@ $(document).on('click', 'a.instructure_inline_media_comment', preventDefault(fun
   }))
 
   $.trackEvent('show_embedded_content', 'show_media')
+  $holder.find('.innerholder').css('outline', 'none')
+  $holder.find('.innerholder').on('focus', initialFocusInnerhold)
 }))
 
 export default inlineMediaComment

app/stylesheets/base/_custom_mediaelementplayer.scss

@@ -138,3 +138,21 @@ div.mejs-speed-button {
   background-color: rgba(255,255,255,.4) !important;
 }
 /* End: Speed */
+
+/* style for taking care of the weird outline of focus on audio comments.
+ * see CNVS-22375 for reference.
+ * this should ultimate be fixed in the mediaelement repo, but simon is
+ * currently making big changes to that. once he's done, we should fix this
+ * issue there with 'outline' style instead of this clever hack
+ */
+
+.mejs-audio:focus .mejs-inner:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  outline: 5px auto rgb(59,153,252);
+  outline-offset: 1px;
+  content: ' ';
+}

spec/coffeescripts/behaviors/instructureInlineMediaCommentSpec.coffee

@@ -45,9 +45,9 @@ define [
     ok(link.is("a"))
     equal(link.attr('href'), "#")
 
-  test "buildHolder contains a tabindex for better tab navigation", ->
+  test "buildHolder does not contain a tabindex for better tab navigation", ->
     holder = inlineMediaComment.buildCommentHolder()
-    ok(holder.html().match(/tabindex="0"/))
+    ok(holder.html().match(/tabindex="-1"/))
 
   test "getMediaCommentId pulls straight from data element", ->
     $link = $("<a data-media_comment_id='42'></a>")