Accessibility improvements

common/lib/capa/capa/templates/clarification.html

@@ -1,4 +1,5 @@
-<span class="clarification">
-	<i data-tooltip="${clarification | h}" data-tooltip-show-on-click="true" class="fa fa-info-circle"></i>
+<span class="clarification" tabindex="0" role="note" aria-label="Clarification">
+    <i data-tooltip="${clarification | h}" data-tooltip-show-on-click="true"
+       class="fa fa-info-circle" aria-hidden="true"></i>
     <span class="sr">(${clarification})</span>
 </span>

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -34,6 +34,17 @@ class @Problem
     @$('div.action input.reset').click @reset
     @$('div.action button.show').click @show
     @$('div.action input.save').click @save
+    # Accessibility helper for sighted keyboard users to show <clarification> tooltips on focus:
+    @$('.clarification').focus (ev) =>
+      icon = $(ev.target).children "i"
+      iconPos = icon.offset()
+      fakeEvent = jQuery.Event "mouseover", {
+        pageX: iconPos.left + icon.width()/2,
+        pageY: iconPos.top + icon.height()/2
+      }
+      icon.trigger(fakeEvent).trigger "click"
+    @$('.clarification').blur (ev) =>
+      $(ev.target).children("i").trigger "mouseout"
 
     @bindResetCorrectness()