Change aria-label attribute to title.

lms/static/coffee/src/calculator.coffee

@@ -18,19 +18,18 @@ class @Calculator
     event.preventDefault()
     $calc = $('.calc')
     $calcWrapper = $('#calculator_wrapper')
+    text = gettext('Open Calculator')
+    isExpanded = false
 
     $('div.calc-main').toggleClass 'open'
     if $calc.hasClass('closed')
-      $calc.attr
-        'aria-label': 'Open Calculator'
-        'aria-expanded': false
       $calcWrapper
         .find('input, a, dt, dd')
         .attr 'tabindex', -1
     else
-      $calc.attr
-        'aria-label': 'Close Calculator'
-        'aria-expanded': true
+      text = gettext('Close Calculator')
+      isExpanded = true
+
       $calcWrapper
         .find('input, a')
         .attr 'tabindex', 0
@@ -39,6 +38,12 @@ class @Calculator
       # focus on the text field before it transitions onto the page.
       setTimeout (-> $calcWrapper.find('#calculator_input').focus()), 100
 
+    $calc
+      .attr
+        'title': text
+        'aria-expanded': isExpanded
+      .text text
+
     $calc.toggleClass 'closed'
 
   helpOnFocus: (e) ->

lms/templates/courseware/courseware.html

@@ -208,7 +208,7 @@ ${fragment.foot_html()}
 
 % if course.show_calculator:
     <div class="calc-main">
-        <a aria-label="${_('Open Calculator')}" href="#" role="button" aria-controls="calculator_wrapper" aria-expanded="false" class="calc">${_("Calculator")}</a>
+        <a title="${_('Open Calculator')}" href="#" role="button" aria-controls="calculator_wrapper" aria-expanded="false" class="calc">${_("Open Calculator")}</a>
         <div id="calculator_wrapper">
             <form id="calculator">
                 <div class="input-wrapper">