Merge pull request #12611 from edx/ssemenova/icon2

Changing icon tags from i to span 

TNL-4692

cms/static/js/spec/views/group_configuration_spec.js

@@ -34,10 +34,10 @@ define([
         usageUnit: '.group-configuration-usage-unit',
         usageUnitAnchor: '.group-configuration-usage-unit a',
         usageUnitMessage: '.group-configuration-validation-message',
-        usageUnitWarningIcon: '.group-configuration-usage-unit i.fa-warning',
-        usageUnitErrorIcon: '.group-configuration-usage-unit i.fa-exclamation-circle',
+        usageUnitWarningIcon: '.group-configuration-usage-unit .fa-warning',
+        usageUnitErrorIcon: '.group-configuration-usage-unit .fa-exclamation-circle',
         warningMessage: '.group-configuration-validation-text',
-        warningIcon: '.wrapper-group-configuration-validation > i',
+        warningIcon: '.wrapper-group-configuration-validation > .fa-warning',
         note: '.wrapper-delete-button'
     };
 

cms/static/js/spec/views/pages/container_spec.js

@@ -519,7 +519,7 @@ define(["jquery", "underscore", "underscore.string", "common/js/spec_helpers/aja
                         var getButtonIcon, getButtonText;
 
                         getButtonIcon = function (containerPage) {
-                            return containerPage.$('.action-toggle-preview i');
+                            return containerPage.$('.action-toggle-preview .fa');
                         };
 
                         getButtonText = function (containerPage) {

cms/static/js/spec/views/pages/container_subviews_spec.js

@@ -443,9 +443,9 @@ define(["jquery", "underscore", "underscore.string", "common/js/spec_helpers/aja
 
                     verifyExplicitStaffOnly = function(isStaffOnly) {
                         if (isStaffOnly) {
-                            expect(containerPage.$('.action-staff-lock i')).toHaveClass('fa-check-square-o');
+                            expect(containerPage.$('.action-staff-lock .fa')).toHaveClass('fa-check-square-o');
                         } else {
-                            expect(containerPage.$('.action-staff-lock i')).toHaveClass('fa-square-o');
+                            expect(containerPage.$('.action-staff-lock .fa')).toHaveClass('fa-square-o');
                         }
                     };
 

cms/static/js/views/course_rerun.js

@@ -50,7 +50,7 @@ define(["domReady", "jquery", "underscore", "js/views/utils/create_course_utils"
 
             // Go into creating re-run state
             $('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true).addClass('is-processing').html(
-               '<i class="icon fa fa-refresh fa-spin"></i>' + gettext('Processing Re-run Request')
+               '<span class="icon fa fa-refresh fa-spin" aria-hidden="true"></span>' + gettext('Processing Re-run Request') //jshint ignore:line
             );
             $('.action-cancel').addClass('is-hidden');
         };

cms/static/js/views/metadata.js

@@ -287,8 +287,8 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
             _.each(value, function(ele, index) {
                 var template = _.template(
                     '<li class="list-settings-item">' +
-                        '<input type="text" class="input" value="<%= ele %>">' +
-                        '<a href="#" class="remove-action remove-setting" data-index="<%= index %>"><i class="icon fa fa-times-circle" aria-hidden="true"></i><span class="sr">Remove</span></a>' +
+                        '<input type="text" class="input" value="<%- ele %>">' +
+                        '<a href="#" class="remove-action remove-setting" data-index="<%- index %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr">' + gettext('Remove') + '</span></a>' + //jshint ignore:line
                     '</li>'
                 );
                 list.append($(template({'ele': ele, 'index': index})));
@@ -455,7 +455,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
                     '<li class="list-settings-item">' +
                         '<input type="text" class="input input-key" value="<%= key %>">' +
                         '<input type="text" class="input input-value" value="<%= value %>">' +
-                        '<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><i class="icon fa fa-times-circle" aria-hidden="true"></i><span class="sr">Remove</span></a>' +
+                        '<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr">Remove</span></a>' + //jshint ignore:line
                     '</li>'
                 );
 

cms/static/js/views/overview_assignment_grader.js

-define(["js/views/baseview", "underscore", "gettext", "js/models/assignment_grade", "common/js/components/views/feedback_notification"],
-        function(BaseView, _, gettext, AssignmentGrade, NotificationView) {
-    var l10nNotGraded = gettext('Not Graded');
-    var OverviewAssignmentGrader = BaseView.extend({
-        // instantiate w/ { graders : CourseGraderCollection, el : <the gradable-status div> }
-        events : {
-            "click .menu-toggle" : "showGradeMenu",
-            "click .menu li" : "selectGradeType"
-        },
-        initialize : function() {
-            // call template w/ {assignmentType : formatname, graders : CourseGraderCollection instance }
-            this.template = _.template(
-                    // TODO move to a template file
-                    '<h4 class="status-label"><%= assignmentType %></h4>' +
-                    '<a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">' +
-                        '<% if (!hideSymbol) {%><i class="icon fa fa-check"></i><%};%>' +
-                    '</a>' +
-                    '<ul class="menu">' +
-                        '<% graders.each(function(option) { %>' +
-                            '<li><a <% if (option.get("type") == assignmentType) {%>class="is-selected" <%}%> href="#"><%= option.get("type") %></a></li>' +
-                        '<% }) %>' +
-                        '<li><a class="gradable-status-notgraded" href="#">' +
-                        l10nNotGraded +
-                        '</a></li>' +
-                    '</ul>');
-            this.assignmentGrade = new AssignmentGrade({
-                locator : this.$el.closest('.id-holder').data('locator'),
-                graderType : this.$el.data('initial-status')});
-            // TODO throw exception if graders is null
-            this.graders = this.options['graders'];
-            var cachethis = this;
-            // defining here to get closure around this
-            this.removeMenu = function(e) {
-                e.preventDefault();
-                cachethis.$el.removeClass('is-active');
-                $(document).off('click', cachethis.removeMenu);
-            };
-            this.hideSymbol = this.options['hideSymbol'];
-            this.render();
-        },
-        render : function() {
-            var graderType = this.assignmentGrade.get('graderType');
-            this.$el.html(this.template(
-                {
-                    assignmentType : (graderType == 'notgraded') ? l10nNotGraded : graderType,
-                    graders : this.graders,
-                    hideSymbol : this.hideSymbol
-                }
-            ));
-            if (this.assignmentGrade.has('graderType') && this.assignmentGrade.get('graderType') != "notgraded") {
-                this.$el.addClass('is-set');
-            }
-            else {
-                this.$el.removeClass('is-set');
-            }
-        },
-        showGradeMenu : function(e) {
-            e.preventDefault();
-            // I sure hope this doesn't break anything but it's needed to keep the removeMenu from activating
-            e.stopPropagation();
-            // nasty global event trap :-(
-            $(document).on('click', this.removeMenu);
-            this.$el.addClass('is-active');
-        },
-        selectGradeType : function(e) {
-              e.preventDefault();
-
-              this.removeMenu(e);
-
-                  var saving = new NotificationView.Mini({
-                      title: gettext('Saving')
-                  });
-                  saving.show();
-
-              // TODO I'm not happy with this string fetch via the html for what should be an id. I'd rather use the id attr
-              // of the CourseGradingPolicy model or null for notgraded (NOTE, change template's if check for is-selected accordingly)
-              this.assignmentGrade.save(
-                      'graderType',
-                      ($(e.target).hasClass('gradable-status-notgraded')) ? 'notgraded' : $(e.target).text(),
-                      {success: function () { saving.hide(); }}
-                  );
-
-              this.render();
-        }
-    });
-    return OverviewAssignmentGrader;
-});

cms/templates/asset_index.html

@@ -44,7 +44,7 @@
             <h3 class="sr">${_("Page Actions")}</h3>
             <ul>
                 <li class="nav-item">
-                    <a href="#" class="button upload-button new-button"><i class="icon fa fa-plus"></i> ${_("Upload New File")}</a>
+                    <a href="#" class="button upload-button new-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("Upload New File")}</a>
                 </li>
             </ul>
         </nav>
@@ -56,7 +56,7 @@
         <article class="content-primary" role="main">
             <div class="wrapper-assets" />
             <div class="ui-loading">
-                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
             </div>
         </article>
 
@@ -88,7 +88,7 @@
 </div>
 
 <div class="upload-modal modal">
-    <a href="#" class="close-button"><i class="icon fa fa-times-circle"></i> <span class="sr">${_('close')}</span></a>
+    <a href="#" class="close-button"><span class="icon fa fa-times-circle" aria-hidden="true"></span> <span class="sr">${_('close')}</span></a>
     <div class="modal-body">
         <h1 class="title">${_("Upload New File")}</h1>
         <h2>${_("Max per-file size: {max_filesize}MB").format(max_filesize=max_file_size_in_mbs)}</h2>
@@ -115,14 +115,14 @@
 <!-- alert: save confirmed with close -->
 <div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
     <div class="alert confirmation">
-        <i class="icon fa fa-check"></i>
+        <span class="icon fa fa-check" aria-hidden="true"></span>
 
         <div class="copy">
             <h2 class="title title-3">${_('Your file has been deleted.')}</h2>
         </div>
 
         <a href="" rel="view" class="action action-alert-close">
-            <i class="icon fa fa-times-circle"></i>
+            <span class="icon fa fa-times-circle" aria-hidden="true"></span>
             <span class="label">${_('close alert')}</span>
         </a>
     </div>

cms/templates/certificates.html

@@ -76,7 +76,7 @@ CMS.User.isGlobalStaff = '${is_global_staff}'=='True' ? true : false;
             </div>
           % else:
             <div class="ui-loading">
-                <p><span class="spin"><i class="icon fa fa-refresh" aria-hidden="true"></i></span> <span class="copy">${_("Loading")}</span></p>
+                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
             </div>
           % endif
         </div>

cms/templates/component.html

@@ -9,19 +9,19 @@
     <ul class="component-actions">
       <li class="action-item action-edit">
         <a href="#" class="edit-button action-button">
-            <i class="icon fa fa-pencil"></i>
+            <span class="icon fa fa-pencil" aria-hidden="true"></span>
             <span class="action-button-text">${_("Edit")}</span>
         </a>
       </li>
       <li class="action-item action-duplicate">
         <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
-            <i class="icon fa fa-copy"></i>
+            <span class="icon fa fa-copy" aria-hidden="true"></span>
             <span class="sr">${_("Duplicate this component")}</span>
         </a>
       </li>
       <li class="action-item action-delete">
         <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
-            <i class="icon fa fa-trash-o"></i>
+            <span class="icon fa fa-trash-o" aria-hidden="true"></span>
             <span class="sr">${_("Delete this component")}</span>
         </a>
       </li>

cms/templates/container.html

@@ -90,7 +90,7 @@ from openedx.core.djangolib.markup import HTML, Text
                 % else:
                     <li class="action-item action-edit nav-item">
                         <a href="#" class="button button-edit action-button edit-button">
-                            <i class="icon fa fa-pencil"></i>
+                            <span class="icon fa fa-pencil" aria-hidden="true"></span>
                             <span class="action-button-text">${_("Edit")}</span>
                         </a>
                     </li>
@@ -109,7 +109,7 @@ from openedx.core.djangolib.markup import HTML, Text
                 <section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${xblock_locator}" data-course-key="${xblock_locator.course_key}">
                 </section>
                 <div class="ui-loading">
-                    <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+                    <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
                 </div>
             </article>
             <aside class="content-supplementary" role="complementary">

cms/templates/course_info.html

@@ -45,7 +45,7 @@ from openedx.core.djangolib.js_utils import (
         <h3 class="sr">${_('Page Actions')}</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class=" button new-button new-update-button"><i class="icon fa fa-plus"></i> ${_('New Update')}</a>
+            <a href="#" class=" button new-button new-update-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_('New Update')}</a>
           </li>
         </ul>
       </nav>

cms/templates/course_outline.html

@@ -37,7 +37,7 @@ from openedx.core.djangolib.markup import HTML, Text
   %if notification_dismiss_url is not None:
   <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
     <div class="alert announcement has-actions">
-      <i class="feedback-symbol fa fa-bullhorn"></i>
+      <span class="feedback-symbol fa fa-bullhorn" aria-hidden="true"></span>
 
       <div class="copy">
         <h2 class="title title-3">${_("This course was created as a re-run. Some manual configuration is needed.")}</h2>
@@ -48,7 +48,7 @@ from openedx.core.djangolib.markup import HTML, Text
       <ul class="nav-actions">
         <li class="action action-dismiss">
           <a href="#" class="button dismiss-button" data-dismiss-link='${notification_dismiss_url}'>
-            <i class="icon fa fa-times-circle"></i>
+            <span class="icon fa fa-times-circle" aria-hidden="true"></span>
             <span class="button-copy">${_("Dismiss")}</span>
           </a>
         </li>
@@ -60,7 +60,7 @@ from openedx.core.djangolib.markup import HTML, Text
     %if deprecated_blocks_info.get('blocks') or deprecated_blocks_info.get('block_types_enabled'):
       <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
         <div class="alert announcement">
-          <i class="feedback-symbol fa fa-warning" aria-hidden="true"></i><span class="sr">${_("Warning")}</span>
+          <span class="feedback-symbol fa fa-warning" aria-hidden="true"></span><span class="sr">${_("Warning")}</span>
 
           <div class="copy">
             <h2 class="title title-3 warning-heading-text">${_("This course uses features that are no longer supported.")}</h2>
@@ -122,20 +122,20 @@ from openedx.core.djangolib.markup import HTML, Text
             <ul>
                 <li class="nav-item">
                     <a href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location}" data-default-name="${_('Section')}" title="${_('Click to add a new section')}">
-                        <i class="icon fa fa-plus"></i>${_('New Section')}
+                        <span class="icon fa fa-plus" aria-hidden="true"></span>${_('New Section')}
                     </a>
                 </li>
                 %if reindex_link:
                     <li class="nav-item">
                         <a href="${reindex_link}" class="button button-reindex" data-category="reindex" title="${_('Reindex current course')}">
-                            <i class="icon-arrow-right"></i>${_('Reindex')}
+                            <span class="icon-arrow-right" aria-hidden="true"></span>${_('Reindex')}
                         </a>
                     </li>
                 %endif
                 <li class="nav-item">
                     <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
-                        <span class="collapse-all"><i class="icon fa fa-arrow-up"></i> <span class="label">${_("Collapse All Sections")}</span></span>
-                        <span class="expand-all"><i class="icon fa fa-arrow-down"></i> <span class="label">${_("Expand All Sections")}</span></span>
+                        <span class="collapse-all"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">${_("Collapse All Sections")}</span></span>
+                        <span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <span class="label">${_("Expand All Sections")}</span></span>
                     </a>
                 </li>
                 <li class="nav-item">
@@ -158,7 +158,7 @@ from openedx.core.djangolib.markup import HTML, Text
                     <ul class="status-actions">
                       <li class="action-item action-edit">
                         <a href="${settings_url}" class="edit-button action-button" data-tooltip="${_("Edit Start Date")}">
-                            <i class="icon fa fa-pencil"></i>
+                            <span class="icon fa fa-pencil" aria-hidden="true"></span>
                             <span class="action-button-text sr">${_("Edit Start Date")}</span>
                         </a>
                       </li>
@@ -185,7 +185,7 @@ from openedx.core.djangolib.markup import HTML, Text
                 </article>
             </div>
             <div class="ui-loading">
-                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
             </div>
         </article>
         <aside class="content-supplementary" role="complementary">

cms/templates/edit-tabs.html

@@ -38,7 +38,7 @@
       <h3 class="sr">${_("Page Actions")}</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="button new-button new-tab"><i class="icon fa fa-plus"></i> ${_("New Page")}</a>
+          <a href="#" class="button new-button new-tab"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("New Page")}</a>
         </li>
         <li class="nav-item">
           <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
@@ -106,7 +106,7 @@
                             % else:
                               <input type="checkbox" class="toggle-checkbox" data-tooltip="${_('Show/hide page')}" />
                             % endif
-                            <div class="action-button"><i class="icon fa fa-eye"></i><i class="icon fa fa-eye-slash"></i></div>
+                            <div class="action-button"><span class="icon fa fa-eye" aria-hidden="true"></span><span class="icon fa fa-eye-slash"></span></div>
                           </li>
                         % endif
 
@@ -132,7 +132,7 @@
           </div>
 
           <div class="add-pages">
-              <p>${_("You can add additional custom pages to your course.")} <a href="#" class="button new-button new-tab"><i class="icon fa fa-plus"></i>${_("Add a New Page")}</a></p>
+              <p>${_("You can add additional custom pages to your course.")} <a href="#" class="button new-button new-tab"><span class="icon fa fa-plus" aria-hidden="true"></span>${_("Add a New Page")}</a></p>
           </div>
         </article>
       </div>
@@ -164,7 +164,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="icon fa fa-times-circle"></i>
+    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
     <span class="label">${_("close modal")}</span>
   </a>
 </div>

cms/templates/export.html

@@ -94,7 +94,7 @@ else:
         <ul class="list-actions">
           <li class="item-action">
             <a class="action action-export action-primary" href="${export_url}">
-              <i class="icon fa fa-arrow-circle-o-down"></i>
+              <span class="icon fa fa-arrow-circle-o-down" aria-hidden="true"></span>
               <span class="copy">
                   %if library:
                       ${_("Export Library Content")}

cms/templates/export_git.html

@@ -40,7 +40,7 @@
         <ul class="list-actions">
           <li class="item-action">
             <a class="action action-export-git action-primary" href="${reverse('export_git', kwargs=dict(course_key_string=unicode(context_course.id)))}?action=push">
-              <i class="icon fa fa-arrow-circle-o-down"></i>
+              <span class="icon fa fa-arrow-circle-o-down" aria-hidden="true"></span>
               <span class="copy">${_("Export to Git")}</span>
             </a>
           </li>

cms/templates/group_configurations.html

@@ -51,7 +51,7 @@ from openedx.core.djangolib.markup import HTML, Text
         <div class="wrapper-groups content-groups">
           <h3 class="title">${_("Content Groups")}</h3>
             <div class="ui-loading">
-                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
             </div>
         </div>
 
@@ -66,7 +66,7 @@ from openedx.core.djangolib.markup import HTML, Text
             </div>
           % else:
             <div class="ui-loading">
-                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
             </div>
           % endif
         </div>

cms/templates/howitworks.html

@@ -39,7 +39,7 @@
             <img src="${static.url("images/thumb-hiw-feature1.png")}" alt="${_('{studio_name} Helps You Keep Your Courses Organized').format(studio_name=settings.STUDIO_SHORT_NAME)}" />
             <figcaption class="sr">${_("{studio_name} Helps You Keep Your Courses Organized").format(studio_name=settings.STUDIO_NAME)}</figcaption>
             <span class="action-zoom">
-              <i class="icon fa fa-search-plus"></i>
+              <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
             </span>
           </a>
         </figure>
@@ -84,7 +84,7 @@
           <img src="${static.url("images/thumb-hiw-feature2.png")}" alt="${_('Learning is More than Just Lectures')}" />
           <figcaption class="sr">${_("Learning is More than Just Lectures")}</figcaption>
           <span class="action-zoom">
-            <i class="icon fa fa-search-plus"></i>
+            <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
           </span>
         </a>
         </figure>
@@ -118,7 +118,7 @@
             <img src="${static.url("images/thumb-hiw-feature3.png")}" alt="${_('{studio_name} Gives You Simple, Fast, and Incremental Publishing. With Friends.').format(studio_name=settings.STUDIO_SHORT_NAME)}" />
             <figcaption class="sr">${_("{studio_name} Gives You Simple, Fast, and Incremental Publishing. With Friends.").format(studio_name=settings.STUDIO_SHORT_NAME)}</figcaption>
             <span class="action-zoom">
-              <i class="icon fa fa-search-plus"></i>
+              <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
             </span>
           </a>
         </figure>
@@ -178,7 +178,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="icon fa fa-times-circle"></i>
+    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
     <span class="label">${_("close modal")}</span>
   </a>
 </div>
@@ -191,7 +191,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="icon fa fa-times-circle"></i>
+    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
     <span class="label">${_("close modal")}</span>
   </a>
 </div>
@@ -204,7 +204,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="icon fa fa-times-circle"></i>
+    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
     <span class="label">${_("close modal")}</span>
   </a>
 </div>

cms/templates/html_error.html

@@ -7,7 +7,7 @@
 
       <div class="copy">
         <h2 class="title">
-          <i class="icon fa fa-warning"></i>
+          <span class="icon fa fa-warning" aria-hidden="true"></span>
           ${_("We're having trouble rendering your component")}
         </h2>
 

cms/templates/import.html

@@ -69,7 +69,7 @@ else:
         <p class="error-block"></p>
 
         <a href="#" class="action action-choose-file choose-file-button">
-          <i class="icon fa fa-upload"></i>
+          <span class="icon fa fa-upload" aria-hidden="true"></span>
           <span class="copy">${_("Choose a File to Import")}</span>
         </a>
 
@@ -102,8 +102,8 @@ else:
           <ol class="status-progress list-progress">
             <li class="item-progresspoint item-progresspoint-upload is-complete">
               <span class="deco status-visual">
-                <i class="icon fa fa-cog"></i>
-                <i class="icon fa fa-warning"></i>
+                <span class="icon fa fa-cog" aria-hidden="true"></span>
+                <span class="icon fa fa-warning" aria-hidden="true"></span>
               </span>
 
               <div class="status-detail">
@@ -117,8 +117,8 @@ else:
 
             <li class="item-progresspoint item-progresspoint-unpack is-started">
               <span class="deco status-visual">
-                <i class="icon fa fa-cog"></i>
-                <i class="icon fa fa-warning"></i>
+                <span class="icon fa fa-cog" aria-hidden="true"></span>
+                <span class="icon fa fa-warning" aria-hidden="true"v></span>
               </span>
 
               <div class="status-detail">
@@ -130,8 +130,8 @@ else:
 
             <li class="item-progresspoint item-progresspoint-verify is-not-started">
               <span class="deco status-visual">
-                <i class="icon fa fa-cog"></i>
-                <i class="icon fa fa-warning"></i>
+                <span class="icon fa fa-cog" aria-hidden="true"></span>
+                <span class="icon fa fa-warning" aria-hidden="true"></span>
               </span>
 
               <div class="status-detail">
@@ -142,8 +142,8 @@ else:
 
             <li class="item-progresspoint item-progresspoint-import is-not-started">
               <span class="deco status-visual">
-                <i class="icon fa fa-cog"></i>
-                <i class="icon fa fa-warning"></i>
+                <span class="icon fa fa-cog" aria-hidden="true"></span>
+                <span class="icon fa fa-warning" aria-hidden="true"></span>
               </span>
 
               <div class="status-detail">
@@ -165,7 +165,7 @@ else:
             </li>
             <li class="item-progresspoint item-progresspoint-success has-actions is-not-started">
               <span class="deco status-visual">
-                <i class="icon fa fa-square-o"></i>
+                <span class="icon fa fa-square-o" aria-hidden="true"></span>
               </span>
 
               <div class="status-detail">

cms/templates/index.html

@@ -28,19 +28,19 @@ from openedx.core.djangolib.markup import HTML, Text
       <ul>
         <li class="nav-item">
           % if course_creator_status=='granted':
-          <a href="#" class="button new-button new-course-button"><i class="icon fa fa-plus icon-inline"></i>
+          <a href="#" class="button new-button new-course-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>
               ${_("New Course")}</a>
           % elif course_creator_status=='disallowed_for_this_site' and settings.FEATURES.get('STUDIO_REQUEST_EMAIL',''):
           <a href="mailto:${settings.FEATURES.get('STUDIO_REQUEST_EMAIL','')}">${_("Email staff to create course")}</a>
           % endif
 
           % if show_new_library_button:
-            <a href="#" class="button new-button new-library-button"><i class="icon fa fa-plus icon-inline"></i>
+            <a href="#" class="button new-button new-library-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>
             ${_("New Library")}</a>
           % endif
 
           % if is_programs_enabled:
-            <a href=${program_authoring_url + 'new'} class="button new-button new-program-button"><i class="icon fa fa-plus icon-inline"></i>
+            <a href=${program_authoring_url + 'new'} class="button new-button new-program-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>
             ${_("New Program")}</a>
           % endif
         </li>
@@ -220,7 +220,7 @@ from openedx.core.djangolib.markup import HTML, Text
                 <dl class="course-status">
                   <dt class="label sr">${_("This course run is currently being created.")}</dt>
                   <dd class="value">
-                    <i class="icon fa fa-refresh fa-spin"></i>
+                    <span class="icon fa fa-refresh fa-spin" aria-hidden="true"></span>
                     ## Translators: This is a status message, used to inform the user of
                     ## what the system is doing. This status means that the user has
                     ## requested to re-run an existing course, and the system is currently
@@ -270,7 +270,7 @@ from openedx.core.djangolib.markup import HTML, Text
                   ## the process will follow this text.
                   <dt class="label sr">${_("This re-run processing status:")}</dt>
                   <dd class="value">
-                    <i class="icon fa fa-warning"></i>
+                    <span class="icon fa fa-warning" aria-hidden="true"></span>
                     <span class="copy">${_("Configuration Error")}</span>
                   </dd>
                 </dl>
@@ -282,7 +282,7 @@ from openedx.core.djangolib.markup import HTML, Text
                 <ul  class="status-actions">
                   <li class="action action-dismiss">
                     <a href="#" class="button dismiss-button" data-dismiss-link="${course_info['dismiss_link']}">
-                      <i class="icon fa fa-times-circle"></i>
+                      <span class="icon fa fa-times-circle" aria-hidden="true"></span>
                       <span class="button-copy">${_("Dismiss")}</span>
                     </a>
                   </li>
@@ -368,7 +368,7 @@ from openedx.core.djangolib.markup import HTML, Text
 
           <ul class="list-actions">
             <li class="action-item">
-              <a href="#" class="action-primary action-create action-create-course new-course-button"><i class="icon fa fa-plus icon-inline"></i> ${_('Create Your First Course')}</a>
+              <a href="#" class="action-primary action-create action-create-course new-course-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> ${_('Create Your First Course')}</a>
             </li>
           </ul>
         </div>
@@ -381,7 +381,7 @@ from openedx.core.djangolib.markup import HTML, Text
       %if course_creator_status == "unrequested":
       <div class="wrapper wrapper-creationrights">
         <h3 class="title">
-          <a href="#instruction-creationrights" class="ui-toggle-control show-creationrights"><span class="label">${_('Becoming a Course Creator in {studio_name}').format(studio_name=settings.STUDIO_SHORT_NAME)}</span> <i class="icon fa fa-times-circle"></i></a>
+          <a href="#instruction-creationrights" class="ui-toggle-control show-creationrights"><span class="label">${_('Becoming a Course Creator in {studio_name}').format(studio_name=settings.STUDIO_SHORT_NAME)}</span> <span class="icon fa fa-times-circle" aria-hidden="true"></span></a>
         </h3>
 
         <div class="notice notice-incontext notice-instruction notice-instruction-creationrights ui-toggle-target" id="instruction-creationrights">
@@ -395,7 +395,7 @@ from openedx.core.djangolib.markup import HTML, Text
 
             <form id="request-coursecreator" action="${request_course_creator_url}" method="post" enctype="multipart/form-data">
               <div class="form-actions">
-                <button type="submit" id="request-coursecreator-submit" name="request-coursecreator-submit" class="action-primary action-request"><i class="icon fa fa-cog icon-inline fa fa-spin"></i> <span class="label">${_('Request the Ability to Create Courses')}</span></button>
+                <button type="submit" id="request-coursecreator-submit" name="request-coursecreator-submit" class="action-primary action-request"><span class="icon fa fa-cog icon-inline fa fa-spin" aria-hidden="true"></span> <span class="label">${_('Request the Ability to Create Courses')}</span></button>
               </div>
             </form>
           </div>
@@ -405,7 +405,7 @@ from openedx.core.djangolib.markup import HTML, Text
       %elif course_creator_status == "denied":
       <div class="wrapper wrapper-creationrights is-shown">
         <h3 class="title">
-          <a href="#instruction-creationrights" class="ui-toggle-control current show-creationrights"><span class="label">${_('Your Course Creator Request Status')}</span> <i class="icon fa fa-times-circle"></i></a>
+          <a href="#instruction-creationrights" class="ui-toggle-control current show-creationrights"><span class="label">${_('Your Course Creator Request Status')}</span> <span class="icon fa fa-times-circle" aria-hidden="true"></span></a>
         </h3>
 
         <div class="notice notice-incontext notice-instruction notice-instruction-creationrights ui-toggle-target" id="instruction-creationrights">
@@ -433,7 +433,7 @@ from openedx.core.djangolib.markup import HTML, Text
       %elif course_creator_status == "pending":
       <div class="wrapper wrapper-creationrights is-shown">
         <h3 class="title">
-          <a href="#instruction-creationrights" class="ui-toggle-control current show-creationrights"><span class="label">${_('Your Course Creator Request Status')}</span> <i class="icon fa fa-times-circle"></i></a>
+          <a href="#instruction-creationrights" class="ui-toggle-control current show-creationrights"><span class="label">${_('Your Course Creator Request Status')}</span> <span class="icon fa fa-times-circle" aria-hidden="true"></span></a>
         </h3>
 
         <div class="notice notice-incontext notice-instruction notice-instruction-creationrights ui-toggle-target" id="instruction-creationrights">
@@ -508,7 +508,7 @@ from openedx.core.djangolib.markup import HTML, Text
 
         <ul class="list-actions">
           <li class="action-item">
-              <a href="#" class="action-primary action-create new-button action-create-library new-library-button"><i class="icon fa fa-plus icon-inline"></i> ${_('Create Your First Library')}</a>
+              <a href="#" class="action-primary action-create new-button action-create-library new-library-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> ${_('Create Your First Library')}</a>
           </li>
         </ul>
         </div>
@@ -553,7 +553,7 @@ from openedx.core.djangolib.markup import HTML, Text
 
               <ul class="list-actions">
                 <li class="action-item">
-                  <a href=${program_authoring_url + 'new'} class="action-primary action-create new-button action-create-program new-program-button"><i class="icon fa fa-plus icon-inline"></i> ${_('Create Your First Program')}</a>
+                  <a href=${program_authoring_url + 'new'} class="action-primary action-create new-button action-create-program new-program-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> ${_('Create Your First Program')}</a>
                 </li>
               </ul>
 

cms/templates/js/access-editor.underscore

@@ -35,8 +35,8 @@
             <li class="field field-checkbox checkbox-cosmetic">
                 <input type="checkbox" id="is_prereq" name="is_prereq" class="input input-checkbox" />
                 <label for="is_prereq" class="label">
-                    <i class="icon fa fa-check-square-o input-checkbox-checked"></i>
-                    <i class="icon fa fa-square-o input-checkbox-unchecked"></i>
+                    <span class="icon fa fa-check-square-o input-checkbox-checked" aria-hidden="true"></span>
+                    <span class="icon fa fa-square-o input-checkbox-unchecked" aria-hidden="true"></span>
                     <%- gettext('Make this subsection available as a prerequisite to other content') %>
                 </label>
             </li>

cms/templates/js/asset-library.underscore

@@ -26,7 +26,7 @@
                         <span class="type-filter" data-alllabel='<%- gettext("Type") %>'><%- gettext("Type") %></span>
                         <span class="label-prefix sr">Filter</span>
                         <span class="filter-link"></span>
-                        <i class="fa fa-caret-down ui-toggle-dd" aria-hidden="true"></i>
+                        <span class="fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span>
                     </span>
                     <div class="wrapper-nav-sub">
                         <div class="nav-sub">
@@ -64,5 +64,5 @@
 </div>
 
 <div class="no-asset-content">
-    <p><%- gettext("You haven't added any assets to this course yet.") %> <a href="#" class="button new-button upload-button"><i class="icon fa fa-plus" aria-hidden="true"></i><%- gettext("Upload your first asset") %></a></p>
+    <p><%- gettext("You haven't added any assets to this course yet.") %> <a href="#" class="button new-button upload-button"><span class="icon fa fa-plus" aria-hidden="true"></span><%- gettext("Upload your first asset") %></a></p>
 </div>

cms/templates/js/asset-upload-modal.underscore

 <div class="upload-modal modal" style="display: none;">
-    <a href="#" class="close-button"><i class="icon fa fa-times-circle" aria-hidden="true"></i> <span class="sr"><%= gettext('close') %></span></a>
+    <a href="#" class="close-button"><span class="icon fa fa-times-circle" aria-hidden="true"></span> <span class="sr"><%= gettext('close') %></span></a>
     <div class="modal-body">
         <h1 class="title"><%= gettext("Upload New File") %></h1>
         <p class="file-name">

cms/templates/js/asset.underscore

@@ -36,12 +36,12 @@
 <td class="actions-col">
     <ul class="actions-list">
         <li class="action-item action-delete">
-            <a href="#" data-tooltip="<%- gettext('Delete this asset') %>" class="remove-asset-button action-button"><i class="icon fa fa-times-circle" aria-hidden="true"></i> <span class="sr"><%- gettext('Delete this asset') %></span></a>
+            <a href="#" data-tooltip="<%- gettext('Delete this asset') %>" class="remove-asset-button action-button"><span class="icon fa fa-times-circle" aria-hidden="true"></span> <span class="sr"><%- gettext('Delete this asset') %></span></a>
         </li>
         <li class="action-item action-lock">
             <label for="<%- uniqueId %>"><span class="sr"><%- gettext('Lock this asset') %></span></label>
             <input type="checkbox" id="<%- uniqueId %>" class="lock-checkbox" data-tooltip="<%- gettext('Lock/unlock file') %>" />
-            <div class="action-button"><i class="icon fa fa-lock"></i><i class="icon fa fa-unlock-alt" aria-hidden="true"></i></div>
+            <div class="action-button"><span class="icon fa fa-lock" aria-hidden="true"></span><span class="icon fa fa-unlock-alt" aria-hidden="true"></span></div>
         </li>
     </ul>
 </td>

cms/templates/js/certificate-details.underscore

@@ -61,10 +61,10 @@
     <ul class="actions certificate-actions">
         <% if (CMS.User.isGlobalStaff || !is_active) { %>
         <li class="action action-edit">
-            <button class="edit"><i class="icon fa fa-pencil" aria-hidden="true"></i> <%- gettext("Edit") %></button>
+            <button class="edit"><span class="icon fa fa-pencil" aria-hidden="true"></span> <%- gettext("Edit") %></button>
         </li>
         <li class="action action-delete wrapper-delete-button" data-tooltip="<%- gettext('Delete') %>">
-            <button class="delete action-icon"><i class="icon fa fa-trash-o" aria-hidden="true"></i><span><%- gettext("Delete") %></span></button>
+            <button class="delete action-icon"><span class="icon fa fa-trash-o" aria-hidden="true"></span><span><%- gettext("Delete") %></span></button>
         </li>
         <% } %>
     </ul>

cms/templates/js/container-message.underscore

 <% if (currentlyVisibleToStudents) { %>
     <div class="message has-warnings">
         <p class="warning">
-            <i class="icon fa fa-warning"></i>
-            <%= gettext("Caution: The last published version of this unit is live. By publishing changes you will change the student experience.") %>
+            <span class="icon fa fa-warning" aria-hidden="true"></span>
+            <%- gettext("Caution: The last published version of this unit is live. By publishing changes you will change the student experience.") %>
         </p>
     </div>
 <% } %>

cms/templates/js/content-group-details.underscore

@@ -2,7 +2,7 @@
     <header class="collection-header">
         <h3 class="title">
             <a href="#" class="toggle group-toggle <% if (showContentGroupUsages){ print('hide'); } else { print('show'); } %>-groups">
-                <i class="ui-toggle-expansion icon fa fa-caret-<% if (showContentGroupUsages){ print('down'); } else { print('right'); } %>"></i>
+                <span class="ui-toggle-expansion icon fa fa-caret-<% if (showContentGroupUsages){ print('down'); } else { print('right'); } %>" aria-hidden="true"></span>
                 <%- name %>
             </a>
         </h3>
@@ -24,15 +24,15 @@
 
     <ul class="actions group-configuration-actions">
         <li class="action action-edit">
-            <button class="edit"><i class="icon fa fa-pencil"></i> <%- gettext("Edit") %></button>
+            <button class="edit"><span class="icon fa fa-pencil" aria-hidden="true"></span> <%- gettext("Edit") %></button>
         </li>
         <% if (_.isEmpty(usage)) { %>
             <li class="action action-delete wrapper-delete-button" data-tooltip="<%- gettext('Delete') %>">
-                <button class="delete action-icon"><i class="icon fa fa-trash-o"></i><span><%- gettext("Delete") %></span></button>
+                <button class="delete action-icon"><span class="icon fa fa-trash-o" aria-hidden="true"></span><span><%- gettext("Delete") %></span></button>
             </li>
         <% } else { %>
             <li class="action action-delete wrapper-delete-button" data-tooltip="<%- gettext('Cannot delete when in use by a unit') %>">
-                <button class="delete action-icon is-disabled" aria-disabled="true" disabled="disabled"><i class="icon fa fa-trash-o"></i><span><%- gettext("Delete") %></span></button>
+                <button class="delete action-icon is-disabled" aria-disabled="true" disabled="disabled"><span class="icon fa fa-trash-o" aria-hidden="true"></span><span><%- gettext("Delete") %></span></button>
             </li>
         <% } %>
     </ul>

cms/templates/js/content-group-editor.underscore

@@ -20,7 +20,7 @@
         </fieldset>
         <% if (!_.isEmpty(usage)) { %>
             <div class="wrapper-group-configuration-validation usage-validation">
-                <i class="icon fa fa-warning"></i>
+                <span class="icon fa fa-warning" aria-hidden="true"></span>
                 <p class="group-configuration-validation-text">
                     <%- gettext('This content group is used in one or more units.') %>
                 </p>

cms/templates/js/course-outline.underscore

@@ -70,7 +70,7 @@ if (is_proctored_exam) {
 <li class="outline-item outline-<%- xblockType %> <%- visibilityClass %> is-draggable <%- includesChildren ? 'is-collapsible' : '' %> <%- isCollapsed ? 'is-collapsed' : '' %>"
     data-parent="<%- parentInfo.get('id') %>" data-locator="<%- xblockInfo.get('id') %>">
 
-    <span class="draggable-drop-indicator draggable-drop-indicator-before"><i class="icon fa fa-caret-right"></i></span>
+    <span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
     <% if (xblockInfo.isHeaderVisible()) { %>
     <div class="<%- xblockType %>-header">
         <% if (includesChildren) { %>
@@ -79,7 +79,7 @@ if (is_proctored_exam) {
                       gettext('Collapse/Expand this %(xblock_type)s'), { xblock_type: xblockTypeDisplayName }, true
                 ) %>"
             >
-                <i class="icon fa fa-caret-down"></i>
+                <span class="icon fa fa-caret-down" aria-hidden="true"></span>
         <% } else { %>
             <h3 class="<%- xblockType %>-header-details">
         <% } %>
@@ -99,7 +99,7 @@ if (is_proctored_exam) {
                 <% if (xblockInfo.isPublishable()) { %>
                     <li class="action-item action-publish">
                         <a href="#" data-tooltip="<%- gettext('Publish') %>" class="publish-button action-button">
-                            <i class="icon fa fa-upload"></i>
+                            <span class="icon fa fa-upload" aria-hidden="true"></span>
                             <span class="sr action-button-text"><%- gettext('Publish') %></span>
                         </a>
                     </li>
@@ -107,7 +107,7 @@ if (is_proctored_exam) {
                 <% if (xblockInfo.isEditableOnCourseOutline()) { %>
                     <li class="action-item action-configure">
                         <a href="#" data-tooltip="<%- gettext('Configure') %>" class="configure-button action-button">
-                            <i class="icon fa fa-gear"></i>
+                            <span class="icon fa fa-gear" aria-hidden="true"></span>
                             <span class="sr action-button-text"><%- gettext('Configure') %></span>
                         </a>
                     </li>
@@ -115,7 +115,7 @@ if (is_proctored_exam) {
                 <% if (xblockInfo.isDeletable()) { %>
                     <li class="action-item action-delete">
                         <a href="#" data-tooltip="<%- gettext('Delete') %>" class="delete-button action-button">
-                            <i class="icon fa fa-trash-o" aria-hidden="true"></i>
+                            <span class="icon fa fa-trash-o" aria-hidden="true"></span>
                             <span class="sr action-button-text"><%- gettext('Delete') %></span>
                         </a>
                     </li>
@@ -146,13 +146,13 @@ if (is_proctored_exam) {
                     <span class="status-release-value">
                         <% if (!course.get('self_paced')) { %>
                             <% if (xblockInfo.get('released_to_students')) { %>
-                                <i class="icon fa fa-check"></i>
+                                <span class="icon fa fa-check" aria-hidden="true"></span>
                                 <%- gettext('Released:') %>
                             <% } else if (xblockInfo.get('release_date')) { %>
-                                <i class="icon fa fa-clock-o"></i>
+                                <span class="icon fa fa-clock-o" aria-hidden="true"></span>
                                 <%- gettext('Scheduled:') %>
                             <% } else { %>
-                                <i class="icon fa fa-clock-o"></i>
+                                <span class="icon fa fa-clock-o" aria-hidden="true"></span>
                                 <%- gettext('Unscheduled') %>
                             <% } %>
                             <% if (xblockInfo.get('release_date')) { %>
@@ -167,7 +167,7 @@ if (is_proctored_exam) {
                 <div class="status-timed-proctored-exam">
                     <p>
                         <span class="sr status-grading-label"> <%- gettext('Graded as:') %> </span>
-                        <i class="icon fa fa-check"></i>
+                        <span class="icon fa fa-check" aria-hidden="true"></span>
                         <span class="status-grading-value"> <%- gradingType %> </span>
                          -
                         <span class="sr status-proctored-exam-label"> <%- exam_value %> </span>
@@ -180,10 +180,10 @@ if (is_proctored_exam) {
                 <div class="status-hide-after-due">
                     <p>
                         <% if (!is_proctored_exam && xblockInfo.get('hide_after_due')) { %>
-                            <i class="icon fa fa-eye-slash"></i>
+                            <span class="icon fa fa-eye-slash" aria-hidden="true"></span>
                             <span class="status-hide-after-due-value"> <%- gettext("Exam will remain hidden after due date") %> </span>
                         <% } else { %>
-                            <i class="icon fa fa-eye"></i>
+                            <span class="icon fa fa-eye" aria-hidden="true"></span>
                             <span class="status-hide-after-due-value"> <%- gettext("Exam will be visible after due date") %> </span>
                         <% } %>
                     </p>
@@ -192,7 +192,7 @@ if (is_proctored_exam) {
                 <div class="status-grading">
                     <p>
                         <span class="sr status-grading-label"> <%- gettext('Graded as:') %> </span>
-                        <i class="icon fa fa-check"></i>
+                        <span class="icon fa fa-check" aria-hidden="true"></span>
                         <span class="status-grading-value"> <%- gradingType %> </span>
                         <% if (xblockInfo.get('due_date') && !course.get('self_paced')) { %>
                             <span class="status-grading-date"> <%- gettext('Due:') %> <%- xblockInfo.get('due_date') %> </span>
@@ -203,7 +203,7 @@ if (is_proctored_exam) {
         <% } %>
         <% if (statusMessage) { %>
         <div class="status-message">
-            <i class="icon fa <%- statusIconClass %>"></i>
+            <span class="icon fa <%- statusIconClass %>" aria-hidden="true"></span>
             <p class="status-message-copy"><%- statusMessage %></p>
         </div>
         <% } %>
@@ -220,7 +220,7 @@ if (is_proctored_exam) {
                          gettext('Click to add a new %(xblock_type)s'), { xblock_type: defaultNewChildName }, true
                    ) %>"
                 >
-                    <i class="icon fa fa-plus"></i><%- addChildLabel %>
+                    <span class="icon fa fa-plus" aria-hidden="true"></span><%- addChildLabel %>
                 </a>
             </p>
         </div>
@@ -228,7 +228,7 @@ if (is_proctored_exam) {
         <div class="outline-content <%- xblockType %>-content">
             <ol class="<%- typeListClass %> is-sortable">
                 <li class="ui-splint ui-splint-indicator">
-                    <span class="draggable-drop-indicator draggable-drop-indicator-initial"><i class="icon fa fa-caret-right"></i></span>
+                    <span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
                 </li>
             </ol>
 
@@ -241,7 +241,7 @@ if (is_proctored_exam) {
                              gettext('Click to add a new %(xblock_type)s'), { xblock_type: defaultNewChildName }, true
                        ) %>"
                     >
-                        <i class="icon fa fa-plus"></i><%- addChildLabel %>
+                        <span class="icon fa fa-plus" aria-hidden="true"></span><%- addChildLabel %>
                     </a>
                 </div>
                 <% } %>
@@ -250,6 +250,6 @@ if (is_proctored_exam) {
     <% } %>
 
 <% if (parentInfo) { %>
-    <span class="draggable-drop-indicator draggable-drop-indicator-after"><i class="icon fa fa-caret-right"></i></span>
+    <span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
 </li>
 <% } %>

cms/templates/js/due-date-editor.underscore

@@ -15,7 +15,7 @@
 <ul class="list-actions">
     <li class="action-item">
         <a href="#" data-tooltip="<%= gettext('Clear Grading Due Date') %>" class="clear-date action-button action-clear">
-            <i class="icon fa fa-undo"></i>
+            <span class="icon fa fa-undo" aria-hidden="true"></span>
             <span class="sr"><%= gettext('Clear Grading Due Date') %></span>
         </a>
     </li>

cms/templates/js/edit-chapter.underscore

@@ -11,4 +11,4 @@
   <span class="tip tip-stacked"><%- gettext("upload a PDF file or provide the path to a Studio asset file") %></span>
 <button class="action action-upload"><%- gettext("Upload PDF") %></button>
 </div>
-<a href="" class="action action-close"><i class="icon fa fa-times-circle"></i> <span class="sr"><%- gettext("delete chapter") %></span></a>
+<a href="" class="action action-close"><span class="icon fa fa-times-circle" aria-hidden="true"></span> <span class="sr"><%- gettext("delete chapter") %></span></a>

cms/templates/js/edit-textbook.underscore

@@ -18,7 +18,7 @@
     <legend class="sr"><%- gettext("Chapter information") %></legend>
       <ol class="chapters list-input enum"></ol>
 
-    <button class="action action-add-chapter"><i class="icon fa fa-plus"></i> <%- gettext("Add a Chapter") %></button>
+    <button class="action action-add-chapter"><span class="icon fa fa-plus" aria-hidden="true"></span> <%- gettext("Add a Chapter") %></button>
   </fieldset>
   </div>
   <div class="actions">

cms/templates/js/group-configuration-details.underscore

@@ -2,7 +2,7 @@
     <header class="collection-header group-configuration-header">
         <h3 class="title group-configuration-title">
             <a href="#" class="toggle group-toggle <% if(showGroups){ print('hide'); } else { print('show'); } %>-groups">
-                <i class="ui-toggle-expansion icon fa fa-caret-<% if(showGroups){ print('down'); } else { print('right'); } %>"></i>
+                <span class="ui-toggle-expansion icon fa fa-caret-<% if(showGroups){ print('down'); } else { print('right'); } %>"></span>
                 <%- name %>
             </a>
         </h3>
@@ -42,15 +42,15 @@
     <% } %>
     <ul class="actions group-configuration-actions">
         <li class="action action-edit">
-            <button class="edit"><i class="icon fa fa-pencil"></i> <%- gettext("Edit") %></button>
+            <button class="edit"><span class="icon fa fa-pencil" aria-hidden="true"></span> <%- gettext("Edit") %></button>
         </li>
         <% if (_.isEmpty(usage)) { %>
             <li class="action action-delete wrapper-delete-button">
-                <button class="delete action-icon"><i class="icon fa fa-trash-o"></i><span><%- gettext("Delete") %></span></button>
+                <button class="delete action-icon"><span class="icon fa fa-trash-o" aria-hidden="true"></span><span><%- gettext("Delete") %></span></button>
             </li>
         <% } else { %>
             <li class="action action-delete wrapper-delete-button" data-tooltip="<%- gettext('Cannot delete when in use by an experiment') %>">
-                <button class="delete action-icon is-disabled" aria-disabled="true"><i class="icon fa fa-trash-o"></i><span><%- gettext("Delete") %></span></button>
+                <button class="delete action-icon is-disabled" aria-disabled="true" aria-hidden="true"><span class="icon fa fa-trash-o"></span><span><%- gettext("Delete") %></span></button>
             </li>
         <% } %>
     </ul>
@@ -66,9 +66,9 @@
             <% if (unit.validation) { %>
               <p>
                 <% if (unit.validation.type === 'warning') { %>
-                  <i class="icon fa fa-warning"></i>
+                  <span class="icon fa fa-warning" aria-hidden="true"></span>
                 <% } else if (unit.validation.type === 'error') { %>
-                  <i class="icon fa fa-exclamation-circle"></i>
+                  <span class="icon fa fa-exclamation-circle" aria-hidden="true"></span>
                 <% } %>
                 <span class="usage-validation-message group-configuration-validation-message">
                   <%- unit.validation.text %>

cms/templates/js/group-configuration-editor.underscore

@@ -30,11 +30,11 @@
             <label class="groups-fields-label required"><%- gettext("Groups") %></label>
             <span class="tip tip-stacked"><%- gettext("Name of the groups that students will be assigned to, for example, Control, Video, Problems. You must have two or more groups.") %></span>
             <ol class="groups list-input enum"></ol>
-            <button class="action action-add-group action-add-item"><i class="icon fa fa-plus"></i> <%- gettext("Add another group") %></button>
+            <button class="action action-add-group action-add-item"><span class="icon fa fa-plus" aria-hidden="true"></span> <%- gettext("Add another group") %></button>
         </fieldset>
         <% if (!_.isEmpty(usage)) { %>
             <div class="wrapper-group-configuration-validation usage-validation">
-                <i class="icon fa fa-warning"></i>
+                <span class="icon fa fa-warning" aria-hidden="true"></span>
                 <p class="group-configuration-validation-text">
                     <%- gettext('This configuration is currently used in content experiments. If you make changes to the groups, you may need to edit those experiments.') %>
                 </p>

cms/templates/js/group-edit.underscore

 <div class="input-wrap field long text required field-add-group-name group-<%- index %>-name
     <% if (error && error.attributes && error.attributes.name) { print('error'); } %>"><input name="group-<%- index %>-name" class="group-name long" value="<%- name %>" type="text">
 </div><div class="group-allocation"><%- allocation %>%</div>
-<a href="" class="action action-close"><i class="icon fa fa-times-circle"></i> <span class="sr"><%- gettext("delete group") %></span></a>
+<a href="" class="action action-close"><span class="icon fa fa-times-circle" aria-hidden="true"></span> <span class="sr"><%- gettext("delete group") %></span></a>

cms/templates/js/license-selector.underscore

@@ -98,9 +98,9 @@
                     />
             <% } else { %>
 	        <% //<span> must come before <i> icon or else spacing gets messed up %>
-                <span class="sr">gettext("Creative Commons licensed content, with terms as follow:")&nbsp;</span><i aria-hidden="true" class="icon-cc"></i>
+                <span class="sr">gettext("Creative Commons licensed content, with terms as follow:")&nbsp;</span><span aria-hidden="true" class="icon-cc"></span>
                 <% _.each(enabled, function(option) { %>
-                        <span class="sr"><%- license.options[option.toUpperCase()].name %>&nbsp;</span><i aria-hidden="true" class="icon-cc-<%- option %>"></i>
+                        <span class="sr"><%- license.options[option.toUpperCase()].name %>&nbsp;</span><span aria-hidden="true" class="icon-cc-<%- option %>"></span>
                 <% }); %>
                 <span class="license-text"><%= gettext("Some Rights Reserved") %></span>
             <% } %>

cms/templates/js/list.underscore

@@ -2,7 +2,7 @@
     <div class="no-content">
         <p>
             <%- emptyMessage %>
-            <a href="#" class="button new-button"><i class="icon fa fa-plus"></i>
+            <a href="#" class="button new-button"><span class="icon fa fa-plus" aria-hidden="true"></span>
             <%- interpolate(
                 gettext("%(new_item_message)s"), {new_item_message: newItemMessage}, true
             ) %></a>
@@ -12,7 +12,7 @@
     <div class="list-items"></div>
     <% if (!isEditing) { %>
         <button class="action action-add <% if(!canCreateNewItem) {%> action-add-hidden <% }%>" >
-            <i class="icon fa fa-plus"></i>
+            <span class="icon fa fa-plus" aria-hidden="true"></span>
             <%- interpolate(
                 gettext('New %(item_type)s'), {item_type: itemCategoryDisplayName}, true
             ) %>

cms/templates/js/metadata-dict-entry.underscore

@@ -3,11 +3,11 @@
   <div id="<%= uniqueId %>" class="wrapper-dict-settings">
     <ol class="list-settings"></ol>
     <a href="#" class="create-action create-setting">
-      <i class="icon fa fa-plus"></i><%= gettext("Add") %> <span class="sr"><%= model.get('display_name')%></span>
+      <span class="icon fa fa-plus" aria-hidden="true"></span><%= gettext("Add") %> <span class="sr"><%= model.get('display_name')%></span>
     </a>
   </div>
   <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-    <i class="icon fa fa-undo"></i>
+    <span class="icon fa fa-undo" aria-hidden="true"></span>
     <span class="sr">"<%= gettext("Clear Value") %>"</span>
   </button>
 </div>

cms/templates/js/metadata-file-uploader-entry.underscore

@@ -3,7 +3,7 @@
   <input type="hidden" id="<%= uniqueId %>" class="input setting-input" value="<%= model.get("value") %>">
   <div class="wrapper-uploader-actions"></div>
   <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-        <i class="icon fa fa-undo"></i><span class="sr">"<%= gettext("Clear Value") %>"</span>
+        <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"<%= gettext("Clear Value") %>"</span>
     </button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>

cms/templates/js/metadata-list-entry.underscore

@@ -6,11 +6,11 @@
     </ol>
 
     <a href="#" class="create-action create-setting">
-      <i class="icon fa fa-plus"></i><%= gettext("Add") %> <span class="sr"><%= model.get('display_name')%></span>
+      <span class="icon fa fa-plus" aria-hidden="true"></span><%= gettext("Add") %> <span class="sr"><%= model.get('display_name')%></span>
     </a>
   </div>
   <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-    <i class="icon fa fa-undo"></i>
+    <span class="icon fa fa-undo" aria-hidden="true"></span>
     <span class="sr">"<%= gettext("Clear Value") %>"</span>
   </button>
 </div>

cms/templates/js/metadata-number-entry.underscore

@@ -2,7 +2,7 @@
 	<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
 	<input class="input setting-input setting-input-number" type="number" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
     <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-        <i class="icon fa fa-undo"></i><span class="sr">"<%= gettext("Clear Value") %>"</span>
+        <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"<%= gettext("Clear Value") %>"</span>
     </button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>

cms/templates/js/metadata-option-entry.underscore

@@ -10,7 +10,7 @@
         <% }) %>
     </select>
     <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-        <i class="icon fa fa-undo"></i><span class="sr">"<%= gettext("Clear Value") %>"</span>
+        <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"<%= gettext("Clear Value") %>"</span>
     </button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>

cms/templates/js/metadata-string-entry.underscore

@@ -2,7 +2,7 @@
 	<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
 	<input class="input setting-input" type="text" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
 	<button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-        <i class="icon fa fa-undo"></i><span class="sr">"<%= gettext("Clear Value") %>"</span>
+        <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"<%= gettext("Clear Value") %>"</span>
     </button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>

cms/templates/js/mock/mock-collapsible-view.underscore

 <div class="is-collapsible">
-    <a href="#" class="expand-collapse collapse"><i class="ui-toggle-expansion">Expand/Collapse</i></a>
+    <a href="#" class="expand-collapse collapse"><span class="ui-toggle-expansion" aria-hidden="true"></span>Expand/Collapse</a>
     <div class="content">Mock Content</div>
 </div>

cms/templates/js/mock/mock-container-page.underscore

@@ -28,20 +28,20 @@
                     % else:
                         <li class="action-item action-edit nav-item">
                             <a href="#" class="button edit-button action-button">
-                                <i class="icon fa fa-pencil"></i>
+                                <span class="icon fa fa-pencil" aria-hidden="true"></span>
                                 <span class="action-button-text">Edit</span>
                             </a>
                         </li>
                 % endif
                     <li class="nav-item">
                         <a href="#" class="button new-button new-component-button">
-                            <i class="icon fa fa-plus icon-inline"></i>
+                            <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>
                             <span class="action-button-text">Add Component</span>
                         </a>
                    </li>
                    <li class="action-item action-toggle-preview nav-item">
                        <a href="#" class="button button-toggle-preview action-button toggle-preview-button is-hidden">
-                           <i class="icon fa fa-refresh"></i>
+                           <span class="icon fa fa-refresh" aria-hidden="true"></span>
                            <span class="action-button-text preview-text"></span>
                        </a>
                    </li>
@@ -59,7 +59,7 @@
                     <section class="wrapper-xblock level-page studio-xblock-wrapper" data-locator="locator-container">
                     </section>
                     <div class="ui-loading is-hidden">
-                        <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading...</span></p>
+                        <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading...</span></p>
                     </div>
                 </article>
                 <aside class="content-supplementary" role="complementary">

cms/templates/js/mock/mock-container-paged-xblock.underscore

@@ -21,7 +21,7 @@
                     <div class="xblock-header-primary">
                         <div class="header-details">
                             <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
-                                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                                <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                                 <span class="sr">Expand or Collapse</span>
                             </a>
                             <span class="xblock-display-name">Group A</span>
@@ -125,7 +125,7 @@
                     <div class="xblock-header-primary">
                         <div class="header-details">
                             <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
-                                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                                <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                                 <span class="sr">Expand or Collapse</span>
                             </a>
                             <span class="xblock-display-name">Group B</span>

cms/templates/js/mock/mock-container-xblock.underscore

@@ -19,7 +19,7 @@
                         <div class="xblock-header-primary">
                             <div class="header-details">
                                 <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
-                                    <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                                    <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                                     <span class="sr">Expand or Collapse</span>
                                 </a>
                                 <span class="xblock-display-name">Group A</span>
@@ -133,7 +133,7 @@
                         <div class="xblock-header-primary">
                             <div class="header-details">
                                 <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
-                                    <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                                    <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                                     <span class="sr">Expand or Collapse</span>
                                 </a>
                                 <span class="xblock-display-name">Group B</span>

cms/templates/js/mock/mock-course-outline-page.underscore

@@ -12,18 +12,18 @@
                 <ul>
                     <li class="nav-item">
                         <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
-                            <span class="collapse-all"><i class="icon fa fa-arrow-up"></i> <span class="label">Collapse All Sections</span></span>
-                            <span class="expand-all"><i class="icon fa fa-arrow-down"></i> <span class="label">Expand All Sections</span></span>
+                            <span class="collapse-all"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">Collapse All Sections</span></span>
+                            <span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <span class="label">Expand All Sections</span></span>
                         </a>
                     </li>
                     <li class="nav-item">
                         <a href="#" class="button button-new" data-category="chapter" data-parent="mock-course" data-default-name="Section" title="Click to add a new section">
-                            <i class="icon fa fa-plus"></i>New Section
+                            <span class="icon fa fa-plus" aria-hidden="true"></span>New Section
                         </a>
                     </li>
                     <li class="nav-item">
                         <a title="Reindex current course" data-category="reindex" class="button button-reindex" href="#">
-                            <i class="icon-arrow-right"></i>Reindex
+                            <span class="icon-arrow-right" aria-hidden="true"></span>Reindex
                         </a>
                     </li>
                     <li class="nav-item">
@@ -42,14 +42,14 @@
                         <div class="no-content add-xblock-component">
                             <p>You haven't added any content to this course yet.
                                 <a href="#" class="button button-new" data-category="chapter" data-parent="mock-course" data-default-name="Section" title="Click to add a new section">
-                                    <i class="icon fa fa-plus"></i>Add Section
+                                    <span class="icon fa fa-plus" aria-hidden="true"></span>Add Section
                                 </a>
                             </p>
                         </div>
                     </article>
                 </div>
                 <div class="ui-loading">
-                    <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+                    <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
                 </div>
             </article>
             <aside class="content-supplementary" role="complementary">

cms/templates/js/mock/mock-course-rerun-notification.underscore

 <div id="page-alert">
     <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
         <div class="alert announcement has-actions">
-            <i class="feedback-symbol icon fa fa-bullhorn"></i>
+            <span class="feedback-symbol icon fa fa-bullhorn" aria-hidden="true"></span>
 
             <div class="copy">
                 <h2 class="title title-3">This course was created as a re-run. Some manual configuration is needed.</h2>
@@ -14,7 +14,7 @@
             <ul class="nav-actions">
                 <li class="action action-dismiss">
                     <a href="#" class="button dismiss-button" data-dismiss-link="dummy_dismiss_url">
-                        <i class="icon icon fa fa-times-circle"></i>
+                        <span class="icon icon fa fa-times-circle" aria-hidden="true"></span>
                         <span class="button-copy">Dismiss</span>
                     </a>
                 </li>

cms/templates/js/mock/mock-empty-container-xblock.underscore

 <header class="xblock-header">
     <div class="header-details">
         <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
-            <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+            <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
             <span class="sr">Expand or Collapse</span>
         </a>
         <span class="xblock-display-name">Empty Vertical Test</span>

cms/templates/js/mock/mock-group-configuration-page.underscore

@@ -13,12 +13,12 @@
             <article class="content-primary" role="main">
                 <div class="wrapper-groups content-groups">
                     <div class="ui-loading">
-                        <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+                        <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
                     </div>
                 </div>
                 <div class="wrapper-groups experiment-groups">
                     <div class="ui-loading">
-                        <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+                        <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
                     </div>
                 </div>
             </article>

cms/templates/js/mock/mock-index-page.underscore

@@ -5,11 +5,11 @@
       <h3 class="sr">Page Actions</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="button new-button new-course-button"><i class="icon fa fa-plus icon-inline"></i>
+          <a href="#" class="button new-button new-course-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>
               New Course</a>
         </li>
         <li class="nav-item">
-          <a href="#" class="button new-button new-library-button"><i class="icon fa fa-plus icon-inline"></i>
+          <a href="#" class="button new-button new-library-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>
               New Library</a>
         </li>
       </ul>
@@ -150,7 +150,7 @@
                 <dl class="course-status">
                   <dt class="label sr">This re-run processing status:</dt>
                   <dd class="value">
-                    <i class="icon fa fa-refresh fa-spin"></i>
+                    <span class="icon fa fa-refresh fa-spin" aria-hidden="true"></span>
                     <span class="copy">Configuring as re-run</span>
                   </dd>
                 </dl>
@@ -186,7 +186,7 @@
                 <dl class="course-status">
                   <dt class="label sr">This re-run processing status:</dt>
                   <dd class="value">
-                    <i class="icon fa fa-warning"></i>
+                    <span class="icon fa fa-warning" aria-hidden="true"></span>
                     <span class="copy">Configuration Error</span>
                   </dd>
                 </dl>
@@ -198,7 +198,7 @@
                 <ul  class="status-actions">
                   <li class="action action-dismiss">
                     <a href="#" class="button dismiss-button" data-dismiss-link="dummy_dismiss_url">
-                      <i class="icon fa fa-times-circle"></i>
+                      <span class="icon fa fa-times-circle" aria-hidden="true"></span>
                       <span class="button-copy">Dismiss</span>
                     </a>
                   </li>

cms/templates/js/mock/mock-manage-users-lib-ro.underscore

@@ -21,7 +21,7 @@
         <article class="content-primary" role="main">
           <ol id="user-list" class="user-list">
             <div class="ui-loading">
-              <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+              <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
             </div>
           </ol>
         </article>

cms/templates/js/mock/mock-manage-users-lib.underscore

@@ -13,7 +13,7 @@
           <h3 class="sr">Page Actions</h3>
           <ul>
             <li class="nav-item">
-              <a href="#" class="button new-button create-user-button"><i class="icon fa fa-plus"></i> Add Instructor</a>
+              <a href="#" class="button new-button create-user-button"><span class="icon fa fa-plus" aria-hidden="true"></span> Add Instructor</a>
             </li>
           </ul>
         </nav>
@@ -50,7 +50,7 @@
 
           <ol id="user-list" class="user-list">
             <div class="ui-loading">
-              <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+              <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
             </div>
           </ol>
 

cms/templates/js/mock/mock-paged-container-xblock.underscore

@@ -21,7 +21,7 @@
                     <div class="xblock-header-primary">
                         <div class="header-details">
                             <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
-                                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                                <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                                 <span class="sr">Expand or Collapse</span>
                             </a>
                             <span class="xblock-display-name">Group A</span>
@@ -125,7 +125,7 @@
                     <div class="xblock-header-primary">
                         <div class="header-details">
                             <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse expand">
-                                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                                <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                                 <span class="sr">Expand or Collapse</span>
                             </a>
                             <span class="xblock-display-name">Group B</span>

cms/templates/js/mock/mock-settings-page.underscore

@@ -207,7 +207,7 @@
     </ol>
     <div class="actions">
       <button type="button" class="action action-primary button new-button add-course-learning-info">
-        <i class="icon fa fa-plus icon-inline"></i>Add Learning Outcome
+        <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>Add Learning Outcome
       </button>
     </div>
 </section>
@@ -222,7 +222,7 @@
   </ol>
   <div class="actions">
     <button type="button" class="action action-primary button new-button add-course-instructor-info">
-      <i class="icon fa fa-plus icon-inline"></i>Add Instructor
+      <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>Add Instructor
     </button>
   </div>
 </section>

cms/templates/js/mock/mock-xmodule-editor.underscore

@@ -19,7 +19,7 @@
                 \t<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
                 \t<input class="input setting-input" type="text" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
                 \t<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
-                <i class="icon fa fa-undo"></i><span class="sr">"Clear Value"</span>
+                <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"Clear Value"</span>
                 </button>
             </div>
             <span class="tip setting-help"><%= model.get('help') %></span>

cms/templates/js/mock/mock-xmodule-settings-only-editor.underscore

@@ -15,7 +15,7 @@
                 \t<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
                 \t<input class="input setting-input" type="text" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
                 \t<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
-                <i class="icon fa fa-undo"></i><span class="sr">"Clear Value"</span>
+                <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"Clear Value"</span>
                 </button>
             </div>
             <span class="tip setting-help"><%= model.get('help') %></span>

cms/templates/js/no-textbooks.underscore

 <div class="no-textbook-content">
-    <p><%= gettext("You haven't added any textbooks to this course yet.") %><a href="#" class="button new-button"><i class="icon fa fa-plus"></i><%= gettext("Add your first textbook") %></a></p>
+    <p><%- gettext("You haven't added any textbooks to this course yet.") %><a href="#" class="button new-button"><span class="icon fa fa-plus" aria-hidden="true"></span><%- gettext("Add your first textbook") %></a></p>
 </div>

cms/templates/js/paging-header.underscore

@@ -4,8 +4,8 @@
     </div>
     <nav class="pagination pagination-compact top" aria-label="Compact Pagination">
         <ol>
-            <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon fa fa-angle-left"></i> <span class="nav-label"><%- gettext("Previous") %></span></a></li>
-            <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label"><%- gettext("Next") %></span> <i class="icon fa fa-angle-right"></i></a></li>
+            <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><span class="icon fa fa-angle-left" aria-hidden="true"></span> <span class="nav-label"><%- gettext("Previous") %></span></a></li>
+            <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label"><%- gettext("Next") %></span> <span class="icon fa fa-angle-right" aria-hidden="true"></span></a></li>
         </ol>
     </nav>
 </div>

cms/templates/js/publish-xblock.underscore

@@ -85,7 +85,7 @@ var visibleToStaffOnly = visibilityState === 'staff_only';
         <% } %>
             <% if (hasContentGroupComponents) { %>
                 <p class="note-visibility">
-                    <i class="icon fa fa-eye" aria-hidden="true"></i>
+                    <span class="icon fa fa-eye" aria-hidden="true"></span>
                     <span class="note-copy"><%- gettext("Some content in this unit is visible only to particular content groups") %></span>
                 </p>
             <% } %>
@@ -93,9 +93,9 @@ var visibleToStaffOnly = visibilityState === 'staff_only';
             <li class="action-inline">
                 <a href="" class="action-staff-lock" role="button" aria-pressed="<%- hasExplicitStaffLock %>">
                 <% if (hasExplicitStaffLock) { %>
-                    <i class="icon fa fa-check-square-o" aria-hidden="true"></i>
+                    <span class="icon fa fa-check-square-o" aria-hidden="true"></span>
                 <% } else { %>
-                    <i class="icon fa fa-square-o" aria-hidden="true"></i>
+                    <span class="icon fa fa-square-o" aria-hidden="true"></span>
                 <% } %>
                 <%- gettext('Hide from students') %>
             </a>

cms/templates/js/release-date-editor.underscore

@@ -19,7 +19,7 @@
       <ul class="list-actions">
           <li class="action-item">
               <a href="#" data-tooltip="<%= gettext('Clear Release Date/Time') %>" class="clear-date action-button action-clear">
-                  <i class="icon fa fa-undo"></i>
+                  <span class="icon fa fa-undo" aria-hidden="true"></span>
                   <span class="sr"><%= gettext('Clear Release Date/Time') %></span>
               </a>
           </li>

cms/templates/js/show-textbook.underscore

@@ -8,7 +8,7 @@
 <% if(chapters.length > 1) {%>
     <p><a href="#" class="chapter-toggle
         <% if(showChapters){ print('hide'); } else { print('show'); } %>-chapters">
-        <i class="ui-toggle-expansion icon fa fa-caret-<% if(showChapters){ print('down'); } else { print('right'); } %>"></i>
+        <span class="ui-toggle-expansion icon fa fa-caret-<% if(showChapters){ print('down'); } else { print('right'); } %>" aria-hidden="true"></span>
         <%- chapters.length %> PDF Chapters
     </a></p>
 <% } else if(chapters.length === 1) { %>
@@ -40,7 +40,7 @@
         <button class="edit"><%- gettext("Edit") %></button>
     </li>
     <li class="action action-delete">
-        <button class="delete action-icon"><i class="icon fa fa-trash-o"></i><span><%- gettext("Delete") %></span></button>
+        <button class="delete action-icon"><span class="icon fa fa-trash-o" aria-hidden="true"></span><span><%- gettext("Delete") %></span></button>
     </li>
 </ul>
 

cms/templates/js/signatory-details.underscore

@@ -2,7 +2,7 @@
   <% if (CMS.User.isGlobalStaff || !certificate.get('is_active')) { %>
   <div class="actions certificate-actions signatory-panel-edit">
     <span class="action action-edit-signatory">
-      <a href="javascript:void(0);" class="edit-signatory"><i class="icon fa fa-pencil" aria-hidden="true"></i> <%- gettext("Edit") %></a>
+      <a href="javascript:void(0);" class="edit-signatory"><span class="icon fa fa-pencil" aria-hidden="true"></span> <%- gettext("Edit") %></a>
     </span>
   </div>
   <% } %>

cms/templates/js/signatory-editor.underscore

      <div class="signatory-panel-default">
        <% if (is_editing_all_collections && signatories_count > 1 && (total_saved_signatories > 1 || isNew) ) { %>
        <a class="signatory-panel-delete" href="#" data-tooltip="Delete">
-          <i class="icon fa fa-trash-o" aria-hidden="true"></i>
+          <span class="icon fa fa-trash-o" aria-hidden="true"></span>
           <span class="sr action-button-text"><%- gettext("Delete") %></span>
        </a>
        <% } %>

cms/templates/js/staff-lock-editor.underscore

@@ -5,8 +5,8 @@
         <li class="field field-checkbox checkbox-cosmetic">
             <input type="checkbox" id="staff_lock" name="staff_lock" class="input input-checkbox" />
             <label for="staff_lock" class="label">
-              <i class="icon fa fa-check-square-o input-checkbox-checked"></i>
-              <i class="icon fa fa-square-o input-checkbox-unchecked"></i>
+              <span class="icon fa fa-check-square-o input-checkbox-checked" aria-hidden="true"></span>
+              <span class="icon fa fa-square-o input-checkbox-unchecked" aria-hidden="true"></span>
               <%= gettext('Hide from students') %>
             </label>
 

cms/templates/js/team-member.underscore

@@ -40,7 +40,7 @@
         </li>
         <li class="action action-delete <%=!allow_delete ? "is-disabled" : "" %> aria-disabled="<%=!allow_delete%>">
             <a href="#" class="delete remove-user action-icon" data-id="<%= user.email %>">
-                <i class="icon fa fa-trash-o"></i>
+                <span class="icon fa fa-trash-o" aria-hidden="true"></span>
                 <span class="sr"><%= viewHelpers.format(gettext("Delete the user, {username}"), {username:user.username}) %></span>
             </a>
         </li>

cms/templates/js/unit-outline.underscore

@@ -17,7 +17,7 @@
                 <div class="add-<%= childType %> add-item">
                     <a href="#" class="button button-new" data-category="<%= childCategory %>"
                        data-parent="<%= xblockInfo.get('id') %>" data-default-name="<%= defaultNewChildName %>">
-                        <i class="icon fa fa-plus"></i><%= addChildLabel %>
+                        <span class="icon fa fa-plus" aria-hidden="true"></span><%= addChildLabel %>
                     </a>
                 </div>
             <% } %>

cms/templates/js/validation-error-modal.underscore

@@ -23,7 +23,7 @@
 
             <li class = "error-item">
                 <span class='error-item-title'>
-                    <i class="icon fa fa-warning"></i>
+                    <span class="icon fa fa-warning" aria-hidden="true"></span>
                     <strong><%= value.model.display_name %></strong>:
                 </span>
                 <textarea class = "error-item-message" disabled='disabled'><%=value.message%></textarea>

cms/templates/js/verification-access-editor.underscore

@@ -14,8 +14,8 @@
             aria-describedby="verification-help-text"
           >
           <label class="label" for="verification-access-checkbox">
-            <i class="icon fa fa-check-square-o input-checkbox-checked" aria-hidden="true"></i>
-            <i class="icon fa fa-square-o input-checkbox-unchecked" aria-hidden="true"></i>
+            <span class="icon fa fa-check-square-o input-checkbox-checked" aria-hidden="true"></span>
+            <span class="icon fa fa-square-o input-checkbox-unchecked" aria-hidden="true"></span>
             <span class="sr"><%- gettext("Must complete verification checkpoint") %></span>
           </label>
 

cms/templates/js/video/metadata-translations-entry.underscore

@@ -3,11 +3,11 @@
   <div class="wrapper-translations-settings">
     <ol class="list-settings"></ol>
     <a href="#" class="create-action create-setting">
-      <i class="icon fa fa-plus"></i><%= gettext("Add") %> <span class="sr"><%= model.get('display_name')%></span>
+      <span class="icon fa fa-plus" aria-hidden="true"></span><%= gettext("Add") %> <span class="sr"><%= model.get('display_name')%></span>
     </a>
   </div>
   <button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
-    <i class="icon fa fa-undo"></i>
+    <span class="icon fa fa-undo" aria-hidden="true"></span>
     <span class="sr">"<%= gettext("Clear Value") %>"</span>
   </button>
 </div>

cms/templates/js/video/metadata-translations-item.underscore

-<li class="list-settings-item"
-  ><a href="#" class="remove-action remove-setting" data-lang="<%= lang %>" data-value="<%= value %>"><i class="icon fa fa-times-circle"></i><span class="sr"><%= gettext("Remove") %></span></a>
+<li class="list-settings-item">
+  <a href="#" class="remove-action remove-setting" data-lang="<%= lang %>" data-value="<%= value %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr"><%= gettext("Remove") %></span></a>
   <input type="hidden" class="input" value="<%= value %>">
   <div class="list-settings-buttons"><% if (lang) {
     %><a href="#" class="upload-action upload-setting" data-lang="<%= lang %>" data-value="<%= value %>"><%= value ? gettext("Replace") : gettext("Upload") %>

cms/templates/js/video/transcripts/messages/transcripts-choose.underscore

 <div class="transcripts-message-status status-error">
-    <i class="icon fa fa-remove"></i>
+    <span class="icon fa fa-remove" aria-hidden="true"></span>
     <%= gettext("Timed Transcript Conflict") %>
 </div>
 

cms/templates/js/video/transcripts/messages/transcripts-found.underscore

-<div class="transcripts-message-status"><i class="icon fa fa-check"></i><%= gettext("Timed Transcript Found") %></div>
+<div class="transcripts-message-status"><span class="icon fa fa-check" aria-hidden="true"></span><%= gettext("Timed Transcript Found") %></div>
 <p class="transcripts-message">
 <%= gettext("EdX has a timed transcript for this video. If you want to edit this transcript, you can download, edit, and re-upload the existing transcript. If you want to replace this transcript, upload a new .srt transcript file.") %>
 </p>

cms/templates/js/video/transcripts/messages/transcripts-import.underscore

-<div class="transcripts-message-status status-error"><i class="icon fa fa-remove"></i><%= gettext("No EdX Timed Transcript") %></div>
+<div class="transcripts-message-status status-error"><span class="icon fa fa-remove" aria-hidden="true"></span><%= gettext("No EdX Timed Transcript") %></div>
 <p class="transcripts-message">
 <%= gettext("EdX doesn't have a timed transcript for this video in Studio, but we found a transcript on YouTube. You can import the YouTube transcript or upload your own .srt transcript file.") %>
 </p>

cms/templates/js/video/transcripts/messages/transcripts-not-found.underscore

-<div class="transcripts-message-status status-error"><i class="icon fa fa-remove"></i><%= gettext("No Timed Transcript") %></div>
+<div class="transcripts-message-status status-error"><span class="icon fa fa-remove" aria-hidden="true"></span><%= gettext("No Timed Transcript") %></div>
 <p class="transcripts-message">
 <%= gettext("EdX doesn\'t have a timed transcript for this video. Please upload an .srt file.") %>
 </p>

cms/templates/js/video/transcripts/messages/transcripts-replace.underscore

 <div class="transcripts-message-status status-error">
-    <i class="icon fa fa-remove"></i>
+    <span class="icon fa fa-remove" aria-hidden="true"></span>
     <%= gettext("Timed Transcript Conflict") %>
 </div>
 

cms/templates/js/video/transcripts/messages/transcripts-uploaded.underscore

-<div class="transcripts-message-status"><i class="icon fa fa-check"></i><%= gettext("Timed Transcript Uploaded Successfully") %></div>
+<div class="transcripts-message-status"><span class="icon fa fa-check" aria-hidden="true"></span><%= gettext("Timed Transcript Uploaded Successfully") %></div>
 <p class="transcripts-message">
 <%= gettext("EdX has a timed transcript for this video. If you want to replace this transcript, upload a new .srt transcript file. If you want to edit this transcript, you can download, edit, and re-upload the existing transcript.") %>
 </p>

cms/templates/js/video/transcripts/messages/transcripts-use-existing.underscore

 <div class="transcripts-message-status status-error">
-    <i class="icon fa fa-remove"></i>
+    <span class="icon fa fa-remove" aria-hidden="true"></span>
     <%= gettext("Confirm Timed Transcript") %>
 </div>
 

cms/templates/js/video/transcripts/metadata-videolist-entry.underscore

@@ -5,7 +5,7 @@
     <div class="tip videolist-url-tip setting-help"><%= model.get('help') %></div>
     <div class="wrapper-videolist-urls">
       <a href="#" class="collapse-action collapse-setting">
-        <i class="icon fa fa-plus"></i><%= gettext("Add URLs for additional versions") %> <span class="sr"><%= model.get('display_name')%></span>
+        <span class="icon fa fa-plus" aria-hidden="true"></span><%= gettext("Add URLs for additional versions") %> <span class="sr"><%= model.get('display_name')%></span>
       </a>
       <div class="videolist-extra-videos">
         <span class="tip videolist-extra-videos-tip setting-help"><%= gettext("To be sure all students can access the video, we recommend providing both an .mp4 and a .webm version of your video. Click below to add a URL for another version. These URLs cannot be YouTube URLs. The first listed video that's compatible with the student's computer will play.") %></span>

cms/templates/js/xblock-outline.underscore

 <% if (parentInfo) { %>
 <li class="outline-item outline-item-<%= xblockType %> <%= includesChildren ? 'is-collapsible' : '' %> is-draggable <%= isCollapsed ? 'is-collapsed' : '' %>"
     data-parent="<%= parentInfo.get('id') %>" data-locator="<%= xblockInfo.get('id') %>">
-    <span class="draggable-drop-indicator draggable-drop-indicator-before"><i class="icon fa fa-caret-right"></i></span>
+    <span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
 
     <div class="wrapper-xblock-header">
         <div class="wrapper-xblock-header-primary">
@@ -11,7 +11,7 @@
                           gettext('Collapse/Expand this %(xblock_type)s'), { xblock_type: xblockTypeDisplayName }, true
                     ) %>"
                 >
-                    <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                    <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
             <% } else { %>
                 <h3 class="xblock-title">
             <% } %>
@@ -29,7 +29,7 @@
                 <ul class="actions-list">
                     <li class="action-item action-delete">
                         <a href="#" data-tooltip="<%= gettext('Delete') %>" class="delete-button action-button">
-                            <i class="icon fa fa-remove"></i>
+                            <span class="icon fa fa-remove" aria-hidden="true"></span>
                             <span class="sr"><%= gettext('Delete') %></span>
                         </a>
                     </li>
@@ -39,7 +39,7 @@
         <div class="wrapper-xblock-header-secondary">
             <% if (xblockInfo.get('release_date')) { %>
                 <div class="meta-info">
-                    <i class="icon fa fa-clock-o"></i>
+                    <span class="icon fa fa-clock-o" aria-hidden="true"></span>
                     <%= gettext('Released:') %> <%= xblockInfo.get('release_date') %>
                 </div>
             <% } %>
@@ -61,7 +61,7 @@
                          gettext('Click to add a new %(xblock_type)s'), { xblock_type: defaultNewChildName }, true
                    ) %>"
                 >
-                    <i class="icon fa fa-plus"></i><%= addChildLabel %>
+                    <span class="icon fa fa-plus" aria-hidden="true"></span><%= addChildLabel %>
                 </a>
             </p>
         </div>
@@ -77,13 +77,13 @@
                          gettext('Click to add a new %(xblock_type)s'), { xblock_type: defaultNewChildName }, true
                    ) %>"
                 >
-                    <i class="icon fa fa-plus"></i><%= addChildLabel %>
+                    <span class="icon fa fa-plus" aria-hidden="true"></span><%= addChildLabel %>
                 </a>
             </div>
         <% } %>
     <% } %>
 
 <% if (parentInfo) { %>
-    <span class="draggable-drop-indicator draggable-drop-indicator-after"><i class="icon fa fa-caret-right"></i></span>
+    <span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
 </li>
 <% } %>

cms/templates/js/xblock-string-field-editor.underscore

 <div class="incontext-editor-action-wrapper">
-    <a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="<%= gettext('Edit the name') %>">
-        <i class="icon fa fa-pencil"></i><span class="sr"> <%= gettext("Edit") %></span>
+    <a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="<%- gettext('Edit the name') %>">
+        <span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> <%- gettext("Edit") %></span>
     </a>
 </div>
 

cms/templates/js/xblock-validation-messages.underscore

@@ -4,7 +4,7 @@ var aggregateMessageType = summaryMessage.type;
 var aggregateValidationClass = aggregateMessageType === "error"? "has-errors" : "has-warnings";
 %>
     <div class="xblock-message validation <%= aggregateValidationClass %> <%= additionalClasses %>">
-        <p class="<%= aggregateMessageType %>"><i class="icon fa <%= getIcon(aggregateMessageType) %>"></i>
+        <p class="<%- aggregateMessageType %>"><span class="icon fa <%- getIcon(aggregateMessageType) %>" aria-hidden="true"></span>
         <%- summaryMessage.text %>
         <% if (summaryMessage.action_class) { %>
             <a href="#" class="button action-button <%- summaryMessage.action_class %>">

cms/templates/library.html

@@ -58,12 +58,12 @@ from openedx.core.djangolib.markup import HTML, Text
             <ul>
                 <li class="nav-item">
                     <a href="#" class="button new-button new-component-button">
-                        <i class="icon fa fa-plus icon-inline"></i> <span class="action-button-text">${_("Add Component")}</span>
+                        <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> <span class="action-button-text">${_("Add Component")}</span>
                     </a>
                 </li>
                 <li class="action-item action-toggle-preview nav-item">
                     <a href="#" class="button button-toggle-preview action-button toggle-preview-button is-hidden">
-                        <i class="icon fa fa-refresh"></i>
+                        <span class="icon fa fa-refresh" aria-hidden="true"></span>
                         <span class="action-button-text preview-text"></span>
                     </a>
                 </li>
@@ -81,7 +81,7 @@ from openedx.core.djangolib.markup import HTML, Text
                 <section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${context_library.location}" data-course-key="${context_library.location.library_key}">
                 </section>
                 <div class="ui-loading">
-                    <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
+                    <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span><span class="copy">${_("Loading")}</span></p>
                 </div>
             </article>
             <aside class="content-supplementary" role="complementary">

cms/templates/manage_users.html

@@ -32,7 +32,7 @@ from openedx.core.djangolib.js_utils import (
       <ul>
         %if allow_actions:
         <li class="nav-item">
-          <a href="#" class="button new-button create-user-button"><i class="icon fa fa-plus"></i> ${_("New Team Member")}</a>
+          <a href="#" class="button new-button create-user-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("New Team Member")}</a>
         </li>
         %endif
       </ul>
@@ -72,7 +72,7 @@ from openedx.core.djangolib.js_utils import (
 
       <ol class="user-list" id="user-list">
         <div class="ui-loading">
-          <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+          <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_('Loading')}</span></p>
         </div>
       </ol>
 
@@ -87,7 +87,7 @@ from openedx.core.djangolib.js_utils import (
 
         <ul class="list-actions">
           <li class="action-item">
-            <a href="#" class="action action-primary button new-button create-user-button"><i class="icon fa fa-plus icon-inline"></i> ${_('Add a New Team Member')}</a>
+            <a href="#" class="action action-primary button new-button create-user-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> ${_('Add a New Team Member')}</a>
           </li>
         </ul>
       </div>

cms/templates/manage_users_lib.html

@@ -32,7 +32,7 @@ from openedx.core.djangolib.js_utils import (
       <ul>
         %if allow_actions:
         <li class="nav-item">
-          <a href="#" class="button new-button create-user-button"><i class="icon fa fa-plus"></i> ${_("New Team Member")}</a>
+          <a href="#" class="button new-button create-user-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("New Team Member")}</a>
         </li>
         %endif
       </ul>
@@ -72,7 +72,7 @@ from openedx.core.djangolib.js_utils import (
 
       <ol class="user-list" id="user-list">
         <div class="ui-loading">
-          <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
+          <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
         </div>
       </ol>
 
@@ -87,7 +87,7 @@ from openedx.core.djangolib.js_utils import (
 
         <ul class="list-actions">
           <li class="action-item">
-            <a href="#" class="action action-primary button new-button create-user-button"><i class="icon fa fa-plus icon-inline"></i> ${_('Add a New User')}</a>
+            <a href="#" class="action action-primary button new-button create-user-button"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> ${_('Add a New User')}</a>
           </li>
         </ul>
       </div>

cms/templates/settings.html

@@ -106,7 +106,7 @@ CMS.URL.UPLOAD_ASSET = '${upload_asset_url | n, js_escaped_string}'
                 %>
                 <a title="${_('Send a note to students via email')}"
                     href="mailto:someone@domain.com?Subject=${email_subject}&body=${email_body}" class="action action-primary">
-                    <i class="icon fa fa-envelope-o icon-inline"></i>${_("Invite your students")}</a>
+                    <span class="icon fa fa-envelope-o icon-inline" aria-hidden="true"></span>${_("Invite your students")}</a>
               </li>
             </ul>
           </div>
@@ -476,7 +476,7 @@ CMS.URL.UPLOAD_ASSET = '${upload_asset_url | n, js_escaped_string}'
               </ol>
               <div class="actions">
                 <button type="button" class="action action-primary button new-button add-course-learning-info">
-                  <i class="icon fa fa-plus icon-inline"></i>${_("Add Learning Outcome")}
+                  <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>${_("Add Learning Outcome")}
                 </button>
               </div>
             </section>
@@ -492,7 +492,7 @@ CMS.URL.UPLOAD_ASSET = '${upload_asset_url | n, js_escaped_string}'
               </ol>
               <div class="actions">
                 <button type="button" class="action action-primary button new-button add-course-instructor-info">
-                  <i class="icon fa fa-plus icon-inline"></i>${_("Add Instructor")}
+                  <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>${_("Add Instructor")}
                 </button>
               </div>
             </section>

cms/templates/settings_graders.html

@@ -58,7 +58,7 @@
           <ol class="list-input">
             <li class="field" id="field-course-grading-range">
               <div class="grade-controls course-grading-range well">
-                <a href="#" class="new-grade-button"><span class="icon fa fa-plus"></span></a>
+                <a href="#" class="new-grade-button"><span class="icon fa fa-plus" aria-hidden="true"></span><span class="sr">${_("Add grade")}</span></a>
                 <div class="grade-slider" dir="ltr">
                   <div class="grade-bar">
                     <ol class="increments">
@@ -131,7 +131,7 @@
 
           <div class="actions">
             <a href="#" class="new-button new-course-grading-item add-grading-data">
-              <i class="icon fa fa-plus"></i> ${_("New Assignment Type")}
+              <span class="icon fa fa-plus" aria-hidden="true"></span> ${_("New Assignment Type")}
             </a>
           </div>
         </section>

cms/templates/studio_xblock_wrapper.html

@@ -57,7 +57,7 @@ messages = xblock.validate().to_json()
         <div class="header-details">
             % if show_inline:
             <a href="#" data-tooltip="${_('Expand or Collapse')}" class="action expand-collapse collapse">
-                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
+                <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                 <span class="sr">${_('Expand or Collapse')}</span>
             </a>
             % endif
@@ -70,14 +70,14 @@ messages = xblock.validate().to_json()
                         % if not show_inline:
                             <li class="action-item action-edit">
                                 <a href="#" class="edit-button action-button">
-                                    <i class="icon fa fa-pencil"></i>
+                                    <span class="icon fa fa-pencil" aria-hidden="true"></span>
                                     <span class="action-button-text">${_("Edit")}</span>
                                 </a>
                             </li>
                             % if can_edit_visibility:
                                 <li class="action-item action-visibility">
                                     <a href="#" data-tooltip="${_("Visibility Settings")}" class="visibility-button action-button">
-                                        <i class="icon fa fa-eye" aria-hidden="true"></i>
+                                        <span class="icon fa fa-eye" aria-hidden="true"></span>
                                         <span class="sr">${_("Visibility")}</span>
                                     </a>
                                 </li>
@@ -85,7 +85,7 @@ messages = xblock.validate().to_json()
                             % if can_add:
                                 <li class="action-item action-duplicate">
                                     <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
-                                    <i class="icon fa fa-copy"></i>
+                                    <span class="icon fa fa-copy" aria-hidden="true"></span>
                                     <span class="sr">${_("Duplicate")}</span>
                                     </a>
                                 </li>
@@ -95,7 +95,7 @@ messages = xblock.validate().to_json()
                             <!-- If we can add, we can delete. -->
                             <li class="action-item action-delete">
                                 <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
-                                <i class="icon fa fa-trash-o"></i>
+                                <span class="icon fa fa-trash-o" aria-hidden="true"></span>
                                 <span class="sr">${_("Delete")}</span>
                                 </a>
                             </li>
@@ -126,7 +126,7 @@ messages = xblock.validate().to_json()
                     <a href="${xblock_url}" class="action-button">
                         ## Translators: this is a verb describing the action of viewing more details
                         <span class="action-button-text">${_('View')}</span>
-                        <i class="icon fa fa-arrow-right"></i>
+                        <span class="icon fa fa-arrow-right" aria-hidden="true"></span>
                     </a>
                 </li>
             </ul>

cms/templates/textbooks.html

@@ -44,7 +44,7 @@ CMS.URL.LMS_BASE = "${settings.LMS_BASE}"
         <h3 class="sr">${_("Page Actions")}</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="button new-button"><i class="icon fa fa-plus"></i> ${_("New Textbook")}</a>
+            <a href="#" class="button new-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("New Textbook")}</a>
           </li>
         </ul>
       </nav>

cms/templates/videos_index.html

@@ -46,7 +46,7 @@
             <h3 class="sr">${_("Page Actions")}</h3>
             <ul>
                 <li class="nav-item">
-                    <a href="#" class="button upload-button new-button"><i class="icon fa fa-plus"></i> ${_("Upload New File")}</a>
+                    <a href="#" class="button upload-button new-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("Upload New File")}</a>
                 </li>
             </ul>
         </nav>

cms/templates/visibility_editor.html

@@ -28,7 +28,7 @@ is_staff_locked = ancestor_has_staff_lock(xblock)
         </div>
     % elif is_staff_locked:
         <div class="summary-message summary-message-warning visibility-summary-message">
-            <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
             <p class="copy">
                 ## Translators: Any text between {screen_reader_start} and {screen_reader_end} is only read by screen readers and never shown in the browser.
                 ${_(

cms/templates/widgets/_ui-dnd-indicator-after.html

-<%page expression_filter="h"/>
-<span class="draggable-drop-indicator draggable-drop-indicator-after"><i class="icon fa fa-caret-right"></i></span>

cms/templates/widgets/_ui-dnd-indicator-before.html

-<%page expression_filter="h"/>
-<span class="draggable-drop-indicator draggable-drop-indicator-before"><i class="icon fa fa-caret-right"></i></span>

cms/templates/widgets/_ui-dnd-indicator-initial.html

-<%page expression_filter="h"/>
-<span class="draggable-drop-indicator draggable-drop-indicator-initial"><i class="icon fa fa-caret-right"></i></span>

cms/templates/widgets/header.html

@@ -45,7 +45,7 @@
         <h2 class="sr">${_("Course Navigation")}</h2>
         <ol>
           <li class="nav-item nav-course-courseware">
-            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Course")} </span>${_("Content")}</span> <i class="icon fa fa-caret-down ui-toggle-dd"></i></h3>
+            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Course")} </span>${_("Content")}</span> <span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -76,7 +76,7 @@
           </li>
 
           <li class="nav-item nav-course-settings">
-            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Course")} </span>${_("Settings")}</span> <i class="icon fa fa-caret-down ui-toggle-dd"></i></h3>
+            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Course")} </span>${_("Settings")}</span> <span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -107,7 +107,7 @@
           </li>
 
           <li class="nav-item nav-course-tools">
-            <h3 class="title"><span class="label">${_("Tools")}</span> <i class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></i></h3>
+            <h3 class="title"><span class="label">${_("Tools")}</span> <span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span></h3>
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
                 <ul>
@@ -149,7 +149,7 @@
         <ol>
 
           <li class="nav-item nav-library-settings">
-            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Library")} </span>${_("Settings")}</span> <i class="icon fa fa-caret-down ui-toggle-dd"></i></h3>
+            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Library")} </span>${_("Settings")}</span> <span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span></h3>
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
                 <ul>
@@ -161,7 +161,7 @@
             </div>
           </li>
           <li class="nav-item nav-course-tools">
-            <h3 class="title"><span class="label">${_("Tools")}</span> <i class="icon fa fa-caret-down ui-toggle-dd"></i></h3>
+            <h3 class="title"><span class="label">${_("Tools")}</span> <span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -221,7 +221,7 @@
             <h3 class="title"><span class="label"><a href="${get_online_help_info(online_help_token)['doc_url']}" title="${_('Contextual Online Help')}" target="_blank">${_("Help")}</a></span></h3>
           </li>
           <li class="nav-item nav-account-user">
-            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Currently signed in as:")}</span><span class="account-username" title="${ user.username }">${ user.username }</span></span> <i class="icon fa fa-caret-down ui-toggle-dd"></i></h3>
+            <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Currently signed in as:")}</span><span class="account-username" title="${ user.username }">${ user.username }</span></span> <span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">

cms/templates/widgets/sock.html

@@ -6,7 +6,7 @@ from django.core.urlresolvers import reverse
 <div class="wrapper-sock wrapper">
   <ul class="list-actions list-cta">
     <li class="action-item">
-      <a href="#sock" class="cta cta-show-sock"><i class="icon fa fa-question-circle"></i>
+      <a href="#sock" class="cta cta-show-sock"><span class="icon fa fa-question-circle" aria-hidden="true"></span>
         <span class="copy-show is-shown">${_("Looking for help with {studio_name}?").format(studio_name=settings.STUDIO_SHORT_NAME)}</span>
         <span class="copy-hide is-hidden">${_("Hide {studio_name} Help").format(studio_name=settings.STUDIO_SHORT_NAME)}</span>
       </a>

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

 <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 data-tooltip="${clarification | h}" data-tooltip-show-on-click="true"
+       class="fa fa-info-circle" aria-hidden="true"></span>
     <span class="sr">(${clarification})</span>
 </span>

common/static/common/templates/discussion/thread.underscore

@@ -33,7 +33,7 @@
         </div>
     </div>
     <div class="post-tools">
-        <a href="javascript:void(0)" class="forum-thread-expand"><span class="icon fa fa-plus"/><%- gettext("Expand discussion") %></a>
-        <a href="javascript:void(0)" class="forum-thread-collapse"><span class="icon fa fa-minus"/><%- gettext("Collapse discussion") %></a>
+        <a href="javascript:void(0)" class="forum-thread-expand"><span class="icon fa fa-plus" aria-hidden="true"/><%- gettext("Expand discussion") %></a>
+        <a href="javascript:void(0)" class="forum-thread-collapse"><span class="icon fa fa-minus" aria-hidden="true"/><%- gettext("Collapse discussion") %></a>
     </div>
 </article>

common/templates/license.html

@@ -48,9 +48,9 @@ def parse_license(lic):
         </a>
     % else:
         ## <span> must come before <i> icon or else spacing gets messed up
-        <span class="sr">${_("Creative Commons licensed content, with terms as follow:")}&nbsp;</span><i aria-hidden="true" class="icon-cc"></i>
+        <span class="sr">${_("Creative Commons licensed content, with terms as follow:")}&nbsp;</span><span aria-hidden="true" class="icon-cc"></span>
         % for option in enabled:
-            <span class="sr">${names[option]}&nbsp;</span><i aria-hidden="true" class="icon-cc-${option}"></i>
+            <span class="sr">${names[option]}&nbsp;</span><span aria-hidden="true" class="icon-cc-${option}"></span>
         % endfor
         <span class="license-text">${_("Some Rights Reserved")}</span>
     % endif