fix module sequence footer tooltips to not have html

test plan:
 - using a screen reader (e.g. VoiceOver)
 - with draft state enabled
 - navigate to a wiki page in a module
 * confirm that the help text of Next and Previous buttons
   is plain text only (no html)

fixes CNVS-8155

Change-Id: Ia874af1350aea1a5a70b24aba2c38bdaeb4c9941
Reviewed-on: https://gerrit.instructure.com/24387
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Hannah Bottalla <hannah@instructure.com>
Reviewed-by: Sterling Cobb <sterling@instructure.com>
Product-Review: Bracken Mosbacker <bracken@instructure.com>

app/coffeescripts/behaviors/tooltip.coffee

@@ -83,6 +83,10 @@ define [
 
     opts.position.using ||= using
 
+    if $this.data('tooltip-title')
+      opts.content = -> $(this).data('tooltip-title')
+      opts.items = '[data-tooltip-title]'
+
     $this
       .removeAttr('data-tooltip')
       .tooltip(opts)

app/coffeescripts/jquery/ModuleSequenceFooter.coffee

@@ -30,6 +30,8 @@ define [
   #   }
   ((($, window, document, template) ->
 
+    msfInstanceCounter = 0
+
     $.fn.moduleSequenceFooter = (options={}) ->
 
       # You must pass in a assetType and assetId or we throw an error.
@@ -51,6 +53,7 @@ define [
           return 
 
         @html template(
+          instanceNumber: @msfInstance.instanceNumber
           previous: @msfInstance.previous
           next: @msfInstance.next
         )
@@ -61,7 +64,7 @@ define [
 
     $.fn.moduleSequenceFooter.MSFClass = class ModuleSequenceFooter
 
-      # Icon class map used to determin which icon class should be placed
+      # Icon class map used to determine which icon class should be placed
       # on a tooltip
       # @api private
 
@@ -78,6 +81,7 @@ define [
       # called somewhere else to set up the data.
        
       constructor: (options) ->
+        @instanceNumber = msfInstanceCounter++
         @courseID = options?.courseID || ENV?.course_id
         @assetID = options?.assetID
         @assetType = options?.assetType
@@ -130,7 +134,8 @@ define [
       #  @previous = previous: {
       #     show: true
       #     url: http://foobar.baz
-      #     tooltip: <strong>Next Module:</strong> <br> Going to the fair
+      #     tooltip: <strong>Previous Module:</strong> <br> Going to the fair
+      #     tooltipText: Previous Module: Going to the fair
       #   }
       #
       # If the previous item is in another module, then the module ids won't be the same and we need
@@ -142,9 +147,11 @@ define [
 
         if @item.current.module_id == @item.prev.module_id
           @previous.tooltip = "<i class='#{@iconClasses[@item.prev.type]}'></i> #{@item.prev.title}"
+          @previous.tooltipText = I18n.t('prev_module_item_desc', 'Previous: *item*', wrapper: @item.prev.title)
         else # module id is different
           module = _.find @modules, (m) => m.id == @item.prev.module_id
-          @previous.tooltip = "<strong style='float:left'>#{I18n.t('prev_module', 'Previous Module')}#{I18n.t('prev_colon', ':')}</strong> <br> #{module.name}"
+          @previous.tooltip = "<strong style='float:left'>#{I18n.t('prev_module', 'Previous Module:')}</strong> <br> #{module.name}"
+          @previous.tooltipText = I18n.t('prev_module_desc', 'Previous Module: *module*', wrapper: module.name)
 
       # Each button needs to build a data that the handlebars template can use. For example, data for
       # each button could look like this: 
@@ -152,6 +159,7 @@ define [
       #     show: true
       #     url: http://foobar.baz
       #     tooltip: <strong>Next Module:</strong> <br> Going to the fair
+      #     tooltipText: Next Module: Going to the fair
       #   }
       #
       # If the next item is in another module, then the module ids won't be the same and we need
@@ -163,9 +171,10 @@ define [
 
         if @item.current.module_id == @item.next.module_id
           @next.tooltip = "<i class='#{@iconClasses[@item.next.type]}'></i> #{@item.next.title}"
+          @next.tooltipText = I18n.t('next_module_item_desc', 'Next: *item*', wrapper: @item.next.title)
         else # module id is different
           module = _.find @modules, (m) => m.id == @item.next.module_id
-          @next.tooltip = "<strong style='float:left'>#{I18n.t('next_module', 'Next Module')}#{I18n.t('next_colon', ':')}</strong> <br> #{module.name}"
-
+          @next.tooltip = "<strong style='float:left'>#{I18n.t('next_module', 'Next Module:')}</strong> <br> #{module.name}"
+          @next.tooltipText = I18n.t('next_module_desc', 'Next Module: *module*', wrapper: module.name)
 
   ))( jQuery, window, document, template)

app/stylesheets/base/module_sequence_footer.scss

@@ -35,6 +35,10 @@ $button-hover: #dee5ea;
       border-left: 1px solid $button-border-line;
     }
   }
+
+  .hidden-aria-title {
+    display: none;
+  }
 }
 
 .module-sequence-footer .module-sequence-footer-content {

app/views/jst/jquery/ModuleSequenceFooter.handlebars

@@ -2,11 +2,17 @@
 <div class='module-sequence-footer clearfix'>
   <div class="module-sequence-footer-content">
     {{#if previous.show}}
-      <a href="{{previous.url}}" class="pull-left" data-tooltip title="{{previous.tooltip}}"><i class="icon-mini-arrow-left"></i>&nbsp;{{#t 'previous'}}Previous{{/t}}</a>
+      <a href="{{previous.url}}" role="button" class="pull-left" data-tooltip data-tooltip-title="{{previous.tooltip}}" aria-describedby="msf{{instanceNumber}}-previous-desc">
+        <i class="icon-mini-arrow-left"></i>{{#t 'previous'}}Previous{{/t}}
+        <span id="msf{{instanceNumber}}-previous-desc" class="hidden" hidden>{{previous.tooltipText}}</span>
+      </a>
     {{/if}}
 
     {{#if next.show}}
-      <a href="{{next.url}}" class="pull-right bordered" data-tooltip title="{{next.tooltip}}">{{#t 'next'}}Next{{/t}}&nbsp;<i class="icon-mini-arrow-right"></i></a>
+      <a href="{{next.url}}" role="button" class="pull-right bordered" data-tooltip data-tooltip-title="{{next.tooltip}}" aria-describedby="msf{{instanceNumber}}-next-desc">
+        {{#t 'next'}}Next{{/t}}<i class="icon-mini-arrow-right"></i>
+        <span id="msf{{instanceNumber}}-next-desc" class="hidden" hidden>{{next.tooltipText}}</span>
+      </a>
     {{/if}}
   </div>
 </div>

spec/coffeescripts/jquery/ModuleSequenceFooterSpec.coffee

@@ -159,8 +159,8 @@ define [
     @$testEl.moduleSequenceFooter({courseID: 42, assetType: 'Assignment', assetID: 123})
     @server.respond()
 
-    ok this.$testEl.find('a').first().attr('title').match('Module C'), "displays previous module tooltip"
-    ok this.$testEl.find('a').last().attr('title').match('Module B'), "displays next module tooltip"
+    ok this.$testEl.find('a').first().data('tooltip-title').match('Module C'), "displays previous module tooltip"
+    ok this.$testEl.find('a').last().data('tooltip-title').match('Module B'), "displays next module tooltip"
 
   itemTooltipData = 
      {
@@ -209,8 +209,8 @@ define [
     @$testEl.moduleSequenceFooter({courseID: 42, assetType: 'Assignment', assetID: 123})
     @server.respond()
 
-    ok this.$testEl.find('a').first().attr('title').match('Project 1'), "displays previous item tooltip"
-    ok this.$testEl.find('a').last().attr('title').match('Project 33'), "displays next item tooltip"
+    ok this.$testEl.find('a').first().data('tooltip-title').match('Project 1'), "displays previous item tooltip"
+    ok this.$testEl.find('a').last().data('tooltip-title').match('Project 33'), "displays next item tooltip"
 
   test 'if url has a module_item_id use that as the assetID and ModuleItem as the type instead', ->
     @server.respondWith "GET",