changed icon html from <i> to <span>

TNL-4651

common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee

@@ -32,7 +32,7 @@ describe "DiscussionThreadListView", ->
                         <a href="#" class="forum-nav-browse-title">All Discussions</a>
                     </li>
                     <li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
-                        <a href="#" class="forum-nav-browse-title"><i class="icon fa fa-star"></i>Posts I'm Following</a>
+                        <a href="#" class="forum-nav-browse-title"><span class="icon fa fa-star" aria-hidden="true"></span>Posts I'm Following</a>
                     </li>
                     <li class="forum-nav-browse-menu-item">
                         <a href="#" class="forum-nav-browse-title">Parent</a>

common/static/coffee/src/discussion/utils.coffee

@@ -113,7 +113,7 @@ class @DiscussionUtil
       alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
       alertDiv.html(
         "<div class='inner-wrapper discussion-alert-wrapper'>" +
-        "  <button class='close-modal dismiss' aria-hidden='true'><i class='icon fa fa-times'></i></button>" +
+        "  <button class='close-modal dismiss' title='" + gettext("Close") + "'><span class='icon fa fa-times' aria-hidden='true'></span></button>" +
         "  <header><h2/><hr/></header>" +
         "  <p id='discussion-alert-message'/>" +
         "  <hr/>" +

common/static/common/templates/components/paging-footer.underscore

 <nav class="pagination pagination-full bottom" aria-label="<%= paginationLabel %>">
-    <div class="nav-item previous"><button class="nav-link previous-page-link"><i class="icon fa fa-angle-left" aria-hidden="true"></i> <span class="nav-label"><%= gettext("Previous") %></span></button></div>
+    <div class="nav-item previous"><button class="nav-link previous-page-link"><span class="icon fa fa-angle-left" aria-hidden="true"></span> <span class="nav-label"><%= gettext("Previous") %></span></button></div>
     <div class="nav-item page">
         <div class="pagination-form">
             <label class="page-number-label" for="page-number-input"><%= interpolate(
@@ -16,5 +16,5 @@
         <span class="page-divider" aria-hidden="true">/</span>
         <span class="total-pages"><%= total_pages %></span>
     </div>
-    <div class="nav-item next"><button class="nav-link next-page-link"><span class="nav-label"><%= gettext("Next") %></span> <i class="icon fa fa-angle-right" aria-hidden="true"></i></button></div>
+    <div class="nav-item next"><button class="nav-link next-page-link"><span class="nav-label"><%= gettext("Next") %></span> <span class="icon fa fa-angle-right" aria-hidden="true"></span></button></div>
 </nav>

common/static/common/templates/components/search-field.underscore

@@ -4,7 +4,7 @@
             <label for="search-<%- type %>" class="search-label"><%- searchLabel %></label>
             <input id="search-<%- type %>" class="search-field" type="text" value="<%- searchString %>" placeholder="<%- searchLabel %>" />
             <button type="button" class="action action-clear <%- searchLabel ? '' : 'is-hidden' %>" aria-label="<%- gettext('Clear search') %>">
-                <i class="icon fa fa-times-circle" aria-hidden="true"></i><span class="sr"><%- gettext('Search') %></span>
+                <span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr"><%- gettext('Search') %></span>
             </button>
         </div>
         <button type="submit" class="action action-search"><span class="icon fa-search" aria-hidden="true"></span><span class="sr"><%- gettext('Search') %></span></button>

common/static/common/templates/components/system-feedback.underscore

@@ -11,7 +11,7 @@
   <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
     <% if(obj.icon) { %>
       <% var iconClass = {"warning": "warning", "confirmation": "check", "error": "warning", "announcement": "bullhorn", "step-required": "exclamation-circle", "help": "question", "mini": "cog"} %>
-      <i class="feedback-symbol fa fa-<%= iconClass[intent] %>"></i>
+      <span class="feedback-symbol fa fa-<%= iconClass[intent] %>" aria-hidden="true"></span>
     <% } %>
 
     <div class="copy">
@@ -40,7 +40,7 @@
 
     <% if(obj.closeIcon) { %>
     <a href="#" rel="view" class="action action-close action-<%= type %>-close">
-      <i class="icon fa fa-times-circle"></i>
+      <span class="icon fa fa-times-circle" aria-hidden="true"></span>
       <span class="label">close <%= type %></span>
     </a>
     <% } %>

common/static/common/templates/discussion/forum-action-answer.underscore

@@ -5,6 +5,6 @@
             <span class="label-unchecked"><%- gettext("Mark as Answer") %></span>
             <span class="label-checked"><%- gettext("Unmark as Answer") %></span>
         </span>
-        <span class="action-icon"><i class="icon fa fa-check"></i></span>
+        <span class="action-icon"><span class="icon fa fa-check" aria-hidden="true"></span></span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-close.underscore

@@ -6,7 +6,7 @@
             <span class="label-checked"><%- gettext("Open") %></span>
         </span>
         <span class="action-icon">
-          <i class="icon fa fa-lock"></i>
+          <span class="icon fa fa-lock" aria-hidden="true"></span>
         </span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-delete.underscore

 <li class="actions-item">
     <a href="javascript:void(0)" class="action-list-item action-delete" role="button">
         <span class="action-label"><%- gettext("Delete") %></span>
-        <span class="action-icon"><i class="icon fa fa-remove"></i></span>
+        <span class="action-icon"><span class="icon fa fa-remove" aria-hidden="true"></span></span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-edit.underscore

 <li class="actions-item">
     <a href="javascript:void(0)" class="action-list-item action-edit" role="button">
         <span class="action-label"><%- gettext("Edit") %></span>
-        <span class="action-icon"><i class="icon fa fa-pencil"></i></span>
+        <span class="action-icon"><span class="icon fa fa-pencil" aria-hidden="true"></span></span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-endorse.underscore

@@ -5,6 +5,6 @@
             <span class="label-unchecked"><%- gettext("Endorse") %></span>
             <span class="label-checked"><%- gettext("Unendorse") %></span>
         </span>
-        <span class="action-icon"><i class="icon fa fa-check"></i></span>
+        <span class="action-icon"><span class="icon fa fa-check" aria-hidden="true"></span></span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-follow.underscore

@@ -5,6 +5,6 @@
             <span class="label-unchecked"><%- gettext("Follow") %></span>
             <span class="label-checked"><%- gettext("Unfollow") %></span>
         </span>
-        <span class="action-icon"><i class="icon fa fa-star"></i></span>
+        <span class="action-icon"><span class="icon fa fa-star" aria-hidden="true"></span></span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-pin.underscore

@@ -6,7 +6,7 @@
             <span class="label-checked"><%- gettext("Unpin") %></span>
         </span>
         <span class="action-icon">
-          <i class="icon fa fa-thumb-tack"></i>
+          <span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
         </span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-report.underscore

@@ -6,7 +6,7 @@
             <span class="label-checked"><%- gettext("Unreport") %></span>
         </span>
         <span class="action-icon">
-          <i class="icon fa fa-flag"></i>
+          <span class="icon fa fa-flag" aria-hidden="true"></span>
         </span>
     </a>
 </li>

common/static/common/templates/discussion/forum-action-vote.underscore

@@ -12,7 +12,7 @@
         </span>
 
         <span class="action-icon" aria-hidden="true">
-            <i class="icon fa fa-plus"></i>
+            <span class="icon fa fa-plus" aria-hidden="true"></span>
         </span>
     </a>
 </li>

common/static/common/templates/discussion/forum-actions.underscore

@@ -5,7 +5,7 @@
             <div class="more-wrapper">
                 <a href="javascript:void(0)" class="action-button action-more" role="button" aria-haspopup="true" aria-controls="action-menu-<%= contentId %>">
                     <span class="action-label"><%- gettext("More") %></span>
-                    <span class="action-icon"><i class="icon fa fa-ellipsis-h"></i></span>
+                    <span class="action-icon"><span class="icon fa fa-ellipsis-h" aria-hidden="true"></span></span>
                 </a>
                 <div class="actions-dropdown" id="action-menu-<%= contentType %>" aria-expanded="false">
                   <ul class="actions-dropdown-list">

common/static/common/templates/discussion/response-comment-show.underscore

@@ -28,6 +28,6 @@
     ) %>
   </p>
   <div class="post-labels">
-    <span class="post-label-reported"><i class="icon fa fa-flag"></i><%- gettext("Reported") %></span>
+    <span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
   </div>
 </div>

common/static/common/templates/discussion/search-alert.underscore

@@ -4,6 +4,7 @@
     </div>
 
     <div class="search-alert-controls">
-      <a href="#" class="dismiss control control-dismiss"><i class="icon fa fa-remove"></i></a>
+      <a href="#" class="dismiss control control-dismiss"><span class="icon fa fa-remove" aria-hidden="true"></span>
+      <span class="sr"><%- gettext("Close") %></span></a>
     </div>
 </div>

common/static/common/templates/discussion/thread-list-item.underscore

@@ -18,7 +18,7 @@
       }
       %>
       <span class="sr"><%= sr_text %></span>
-      <i class="icon fa <%= icon_class %>"></i>
+      <span class="icon fa <%= icon_class %>" aria-hidden="true"></span>
     </div><div class="forum-nav-thread-wrapper-1">
       <span class="forum-nav-thread-title"><%- title %></span>
       <% if(typeof(subscribed) === "undefined") { var subscribed = null; } %>
@@ -26,28 +26,28 @@
         <ul class="forum-nav-thread-labels">
         <% if (pinned) { %>
           <li class="post-label-pinned">
-            <i class="icon fa fa-thumb-tack"></i>
+            <span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
             <% // Translators: This is a label for a forum thread that has been pinned %>
             <%- gettext("Pinned") %>
           </li>
         <% } %>
         <% if (subscribed) { %>
           <li class="post-label-following">
-            <i class="icon fa fa-star"></i>
+            <span class="icon fa fa-star" aria-hidden="true"></span>
             <% // Translators: This is a label for a forum thread that the user is subscribed to %>
             <%- gettext("Following") %>
           </li>
         <% } %>
         <% if (staff_authored) { %>
           <li class="post-label-by-staff">
-            <i class="icon fa fa-user"></i>
+            <span class="icon fa fa-user" aria-hidden="true"></span>
             <% // Translators: This is a label for a forum thread that was authored by a member of the course staff %>
             <%- gettext("By: Staff") %>
           </li>
         <% } %>
         <% if (community_ta_authored) { %>
           <li class="post-label-by-community-ta">
-            <i class="icon fa fa-user"></i>
+            <span class="icon fa fa-user" aria-hidden="true"></span>
             <% // Translators: This is a label for a forum thread that was authored by a community TA %>
             <%- gettext("By: Community TA") %>
           </li>

common/static/common/templates/discussion/thread-response-show.underscore

@@ -38,7 +38,7 @@
         <% } %>
       </p>
       <div class="post-labels">
-          <span class="post-label-reported"><i class="icon fa fa-flag"></i><%- gettext("Reported") %></span>
+          <span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
       </div>
       </div>
       <div class="response-header-actions">

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

@@ -4,7 +4,7 @@
     var fmts = ngettext("Show Comment (%(num_comments)s)", "Show Comments (%(num_comments)s)", comments.length);
     print(interpolate(fmts, {num_comments: comments.length}, true));
     %>
-    <i class="icon fa fa-caret-down"></i>
+    <span class="icon fa fa-caret-down" aria-hidden="true"></span>
 </a>
 <ol class="comments">
     <li class="new-comment">

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

@@ -21,9 +21,9 @@
             %>
             </p>
             <div class="post-labels">
-                <span class="post-label-pinned"><i class="icon fa fa-thumb-tack"></i><%- gettext("Pinned") %></span>
-                <span class="post-label-reported"><i class="icon fa fa-flag"></i><%- gettext("Reported") %></span>
-                <span class="post-label-closed"><i class="icon fa fa-lock"></i><%- gettext("Closed") %></span>
+                <span class="post-label-pinned"><span class="icon fa fa-thumb-tack" aria-hidden="true"></span><%- gettext("Pinned") %></span>
+                <span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
+                <span class="post-label-closed"><span class="icon fa fa-lock" aria-hidden="true"></span><%- gettext("Closed") %></span>
             </div>
         </div>
         <% if (!readOnly) { %>

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

@@ -11,7 +11,7 @@
             <% if (!readOnly) { %>
                 <div class="add-response">
                     <button class="button add-response-btn">
-                        <i class="icon fa fa-reply"></i>
+                        <span class="icon fa fa-reply" aria-hidden="true"></span>
                         <span class="add-response-btn-text"><%- gettext("Add a Response") %></span>
                     </button>
                 </div>

common/static/common/templates/image-modal.underscore

@@ -3,7 +3,7 @@
     <%= smallHTML%>
     <a href="#" class="modal-ui-icon action-fullscreen" role="button">
       <span class="label">
-        <i class="icon fa fa-arrows-alt fa-large"></i> <%= gettext("Fullscreen") %>
+        <span class="icon fa fa-arrows-alt fa-large" aria-hidden="true"></span> <%- gettext("Fullscreen") %>
       </span>
     </a>
   </section>
@@ -11,12 +11,12 @@
   <section class="image-modal">
     <section class="image-content">
       <div class="image-wrapper">
-        <img alt="<%= largeALT %>, <%= gettext('Large') %>" src="<%= largeSRC %>" />
+        <img alt="<%= largeALT %>, <%- gettext('Large') %>" src="<%= largeSRC %>" />
       </div>
 
       <a href="#" class="modal-ui-icon action-close" role="button">
         <span class="label">
-          <i class="icon fa fa-remove fa-large"></i> <%= gettext("Close") %>
+          <span class="icon fa fa-remove fa-large" aria-hidden="true"></span> <%- gettext("Close") %>
         </span>
       </a>
 
@@ -24,7 +24,7 @@
         <li class="image-control">
           <a href="#" class="modal-ui-icon action-zoom-in" role="button">
             <span class="label">
-              <i class="icon fa fa fa-search-plus fa-large"></i> <%= gettext("Zoom In") %>
+              <span class="icon fa fa fa-search-plus fa-large" aria-hidden="true"></span> <%- gettext("Zoom In") %>
             </span>
           </a>
         </li>
@@ -32,7 +32,7 @@
         <li class="image-control">
           <a href="#" class="modal-ui-icon action-zoom-out is-disabled" aria-disabled="true" role="button">
             <span class="label">
-              <i class="icon fa fa fa-search-minus fa-large"></i> <%= gettext("Zoom Out") %>
+              <span class="icon fa fa fa-search-minus fa-large" aria-hidden="true"></span> <%- gettext("Zoom Out") %>
             </span>
           </a>
         </li>

common/test/acceptance/pages/lms/fields.py

@@ -104,7 +104,7 @@ class FieldsMixin(object):
         """
         self.wait_for_field(field_id)
 
-        query = self.q(css='.u-field-{} .u-field-message i'.format(field_id))
+        query = self.q(css='.u-field-{} .u-field-message .fa'.format(field_id))
         return [
             class_name for class_name
             in query.attrs('class')[0].split(' ')

lms/djangoapps/teams/static/teams/js/views/topic_card.js

@@ -46,7 +46,7 @@
                         gettext('View Teams in the %(topic_name)s Topic'),
                         { topic_name: this.model.get('name') }, true
                     ));
-                    return '<span class="sr">' + screenReaderText + '</span><i class="icon fa fa-arrow-right" aria-hidden="true"></i>';
+                    return '<span class="sr">' + screenReaderText + '</span><span class="icon fa fa-arrow-right" aria-hidden="true"></span>'; // jshint ignore:line
                 }
             });
 

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

@@ -5,7 +5,7 @@
                 data-user-create-comment="<%- !readOnly %>"
                 data-user-create-subcomment="<%- !readOnly %>">
             <% if (!readOnly) { %>
-                <button type="button" class="btn new-post-btn"><i class="icon fa fa-edit new-post-icon" aria-hidden="true"></i><%- gettext("New Post") %></button>
+                <button type="button" class="btn new-post-btn"><span class="icon fa fa-edit new-post-icon" aria-hidden="true"></span><%- gettext("New Post") %></button>
             <% } %>
         </div>
     </div>
@@ -32,7 +32,7 @@
         <% if (country) { %>
             <div class="team-country">
                 <span class="sr"><%- gettext("The country that team members primarily identify with.") %></span>
-                <i class="icon fa fa-globe fa-fw" aria-hidden="true"></i>
+                <span class="icon fa fa-globe fa-fw" aria-hidden="true"></span>
                 <span>
                     <%- gettext(country) %>
                 </span>
@@ -41,7 +41,7 @@
         <% if (language) { %>
             <div class="team-language">
                 <span class="sr"><%- gettext("The language that team members primarily use to communicate with each other.") %></span>
-                <i class="icon fa fa-comment-o fa-fw" aria-hidden="true"></i>
+                <span class="icon fa fa-comment-o fa-fw" aria-hidden="true"></span>
                 <span>
                     <%- gettext(language) %>
                 </span>

lms/static/coffee/src/instructor_dashboard/membership.coffee

@@ -117,7 +117,7 @@ class AuthListWidget extends MemberListWidget
 
         # create revoke button and insert it into the row
         label_trans = gettext("Revoke access")
-        $revoke_btn = $ _.template('<div class="revoke"><i class="icon fa fa-times-circle" aria-hidden="true"></i> <%= label %></div>')({label: label_trans}),
+        $revoke_btn = $ _.template('<div class="revoke"><span class="icon fa fa-times-circle" aria-hidden="true"></span> <%= label %></div>')({label: label_trans}),
           class: 'revoke'
         $revoke_btn.click =>
             @modify_member_access member.email, 'revoke', (error) =>

lms/static/js/bookmarks/views/bookmarks_list.js

@@ -15,8 +15,8 @@
             coursewareContentEl: '#course-content',
             coursewareResultsWrapperEl: '.courseware-results-wrapper',
 
-            errorIcon: '<i class="fa fa-fw fa-exclamation-triangle message-error" aria-hidden="true"></i>',
-            loadingIcon: '<i class="fa fa-fw fa-spinner fa-pulse message-in-progress" aria-hidden="true"></i>',
+            errorIcon: '<span class="fa fa-fw fa-exclamation-triangle message-error" aria-hidden="true"></span>',
+            loadingIcon: '<span class="fa fa-fw fa-spinner fa-pulse message-in-progress" aria-hidden="true"></span>',
 
             errorMessage: gettext('An error has occurred. Please try again.'),
             loadingMessage: gettext('Loading'),

lms/static/js/fixtures/ccx/schedule.html

@@ -6,7 +6,7 @@
 <section id="enter-date-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog">
     <button class="close-modal">
-      <i class="fa-remove"></i>
+      <span class="fa-remove" aria-hidden="true"></span>
       <span class="sr">
         Close
       </span>

lms/static/js/fixtures/dashboard/dashboard.html

@@ -28,7 +28,7 @@
 
 <div class="course-container">
   <div class="label-xseries-association">
-    <i class="xseries-icon"></i>
+    <span class="xseries-icon" aria-hidden="true"></span>
     <p class="message-copy">XSeries Program Course</p>
   </div>
     <article class="course honor">
@@ -57,7 +57,7 @@
                                 <span class="sr">
                                 Course options for Introduction to Drinking Water Treatment
                                 </span>
-                                <i class="fa fa-cog" aria-hidden="true"></i>
+                                <span class="fa fa-cog" aria-hidden="true"></span>
                             </button>
                             <div class="actions-dropdown" id="actions-dropdown-1" tabindex="-1">
                                 <ul class="actions-dropdown-list" id="actions-dropdown-list-1" aria-label="Available Actions" role="menu">
@@ -87,7 +87,7 @@
                         </p>
                         <div class="action-upgrade-container">
                             <a class="action action-upgrade" href="/verify_student/upgrade/course-v1:DelftX+CTB3365DWx+1T2016/" data-course-id="course-v1:DelftX+CTB3365DWx+1T2016" data-user="Anon">
-                                <i class="action-upgrade-icon"></i>
+                                <span class="action-upgrade-icon" aria-hidden="true"></span>
                                 <span class="wrapper-copy">
                                     <span class="copy" id="upgrade-to-verified">Upgrade to Verified</span>
                                 </span>
@@ -107,7 +107,7 @@
 
                         <a class="btn xseries-border-btn" href="https://www.edx.org/xseries/water-management" target="_blank"
                            data-program-id="xseries007">
-                            <i class="action-xseries-icon"></i>
+                            <span class="action-xseries-icon" aria-hidden="true"></span>
                             <span>View XSeries Details</span>
                         </a>
                     </div>
@@ -118,7 +118,7 @@
 </div>
 <div class="course-container">
   <div class="label-xseries-association">
-    <i class="xseries-icon"></i>
+    <span class="xseries-icon" aria-hidden="true"></span>
     <p class="message-copy">XSeries Program Course</p>
   </div>
     <article class="course honor">
@@ -147,7 +147,7 @@
                                 <span class="sr">
                                 Course options for Introduction to Drinking Water Treatment
                                 </span>
-                                <i class="fa fa-cog" aria-hidden="true"></i>
+                                <span class="fa fa-cog" aria-hidden="true"></span>
                             </button>
                             <div class="actions-dropdown" id="actions-dropdown-2" tabindex="-1">
                                 <ul class="actions-dropdown-list" id="actions-dropdown-list-2" aria-label="Available Actions" role="menu">
@@ -177,7 +177,7 @@
                         </p>
                         <div class="action-upgrade-container">
                             <a class="action action-upgrade" href="/verify_student/upgrade/course-v1:DelftX+CTB3365DWx+1T2016/" data-course-id="course-v1:DelftX+CTB3365DWx+1T2016" data-user="Anon">
-                                <i class="action-upgrade-icon"></i>
+                                <span class="action-upgrade-icon" aria-hidden="true"></span>
                                 <span class="wrapper-copy">
                                     <span class="copy" id="upgrade-to-verified">Upgrade to Verified</span>
                                 </span>
@@ -196,7 +196,7 @@
 
                         <a class="btn xseries-border-btn" href="https://www.edx.org/xseries/water-management" target="_blank"
                            data-program-id="xseries007">
-                            <i class="action-xseries-icon"></i>
+                            <span class="action-xseries-icon" aria-hidden="true"></span>
                             <span>View XSeries Details</span>
                         </a>
                     </div>

lms/static/js/fixtures/discovery.html

@@ -5,10 +5,10 @@
       <label for="discovery-input" class="sr">Search for a course</label>
       <input id="discovery-input" class="discovery-input" placeholder="Search for a course" type="text"/>
       <button type="submit" class="button postfix discovery-submit" aria-label="Search">
-        <i class="icon fa fa-search" aria-hidden="true"></i>
+        <span class="icon fa fa-search" aria-hidden="true"></span>
         <div aria-live="polite" aria-relevant="all">
           <div id="loading-indicator" class="loading-spinner hidden">
-          <i class="icon fa fa-spinner fa-spin"></i>
+          <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
           <span class="sr">Loading</span>
           </div>
         </div>

lms/static/js/fixtures/edxnotes/edxnotes.html

@@ -15,7 +15,7 @@
             <label for="search-notes-input" class="sr">Search notes for:</label>
             <input type="search" class="search-notes-input" id="search-notes-input" name="note" placeholder="Search notes for...">
             <button type="submit" class="search-notes-submit">
-              <i class="icon fa fa-search"></i>
+              <span class="icon fa fa-search" aria-hidden="true"></span>
               <span class="sr">Search</span>
             </button>
           </form>
@@ -37,7 +37,7 @@
 
         <div class="ui-loading" tabindex="-1">
           <span class="spin">
-            <i class="icon fa fa-refresh"></i>
+            <span class="icon fa fa-refresh" aria-hidden="true"></span>
           </span>
           <span class="copy">Loading</span>
         </div>

lms/static/js/fixtures/edxnotes/toggle_notes.html

 <div class="wrapper-utility edx-notes-visibility">
   <span class="action-toggle-message">Notes visible</span>
   <button class="utility-control utility-control-button action-toggle-notes is-disabled is-active" aria-pressed="true">
-    <i class="icon fa fa-pencil"></i>
+    <span class="icon fa fa-pencil" aria-hidden="true"></span>
      <span class="utility-control-label sr">Hide notes</span>
   </button>
 </div>

lms/static/js/fixtures/search/course_search_form.html

@@ -3,10 +3,10 @@
         <label for="course-search-input" class="sr">Course Search</label>
         <input id="course-search-input" type="text" class="search-field"/>
         <button type="submit" class="search-button">
-          search <i class="icon fa fa-search" aria-hidden="true"></i>
+          search <span class="icon fa fa-search" aria-hidden="true"></span>
         </button>
-        <button type="button" class="cancel-button" aria-label="Clear search">
-          <i class="icon fa fa-remove" aria-hidden="true"></i>
+        <button type="button" class="cancel-button" title="Clear search">
+          <span class="icon fa fa-remove" aria-hidden="true"></span>
         </button>
     </form>
 </div>

lms/static/js/fixtures/search/dashboard_search_form.html

@@ -4,10 +4,10 @@
         <div>
             <input id="dashboard-search-input" type="text" class="search-field"/>
             <button type="submit" class="search-button" aria-label="Search">
-                <i class="icon fa fa-search" aria-hidden="true"></i>
+                <span class="icon fa fa-search" aria-hidden="true"></span>
             </button>
             <button type="button" class="cancel-button" aria-label="Clear search">
-                <i class="icon fa fa-remove" aria-hidden="true"></i>
+                <span class="icon fa fa-remove" aria-hidden="true"></span>
             </button>
         </div>
     </form>

lms/static/js/fixtures/student_profile/student_profile.html

@@ -3,16 +3,15 @@
   <div class="ui-loading-indicator">
     <p>
       <span class="spin">
-        <i class="icon fa fa-refresh"></i>
+        <span class="icon fa fa-refresh" aria-hidden="true"></span>
       </span>
-      
       <span class="copy">
           Loading
       </span>
     </p>
   </div>
   <div class="ui-loading-error is-hidden">
-    <i class="fa fa-exclamation-triangle message-error" aria-hidden=true></i>
+    <span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
     <span class="copy">
       An error occurred. Please reload the page.
     </span>

lms/static/js/spec/courseware/bookmarks_list_view_spec.js

@@ -83,7 +83,7 @@ define(['backbone',
             var breadcrumbTrail = function (path, unitDisplayName) {
                 return _.pluck(path, 'display_name').
                     concat([unitDisplayName]).
-                    join(' <i class="icon fa fa-caret-right" aria-hidden="true"></i><span class="sr">-</span> ');
+                    join(' <span class="icon fa fa-caret-right" aria-hidden="true"></span><span class="sr">-</span> ');
             };
 
             var verifyBookmarkedData = function (view, expectedData) {

lms/static/js/spec/shoppingcart/shoppingcart_spec.js

@@ -7,7 +7,7 @@ define(['common/js/spec_helpers/ajax_helpers', 'js/shoppingcart/shoppingcart'],
             var requests = null;
 
             beforeEach(function() {
-                setFixtures('<section class="wrapper confirm-enrollment shopping-cart cart-view"><form action="" method="post"><input type="hidden" name="" value="" /><i class="icon fa fa-caret-right"></i><input type="submit" value="Payment"/></form></section>');
+                setFixtures('<section class="wrapper confirm-enrollment shopping-cart cart-view"><form action="" method="post"><input type="hidden" name="" value="" /><span class="icon fa fa-caret-right"></span><input type="submit" value="Payment"/></form></section>'); // jshint ignore:line
 
                 view = new edx.shoppingcart.showcart.CartView({
                     el: $('.confirm-enrollment.cart-view form')

lms/static/js/spec/student_profile/learner_profile_fields_spec.js

@@ -82,14 +82,14 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
                 var verifyImageUploadButtonMessage = function (view, inProgress) {
                     var iconName = inProgress ? 'fa-spinner' : 'fa-camera';
                     var message = inProgress ? view.titleUploading : view.uploadButtonTitle();
-                    expect(view.$('.upload-button-icon i').attr('class')).toContain(iconName);
+                    expect(view.$('.upload-button-icon span').attr('class')).toContain(iconName);
                     expect(view.$('.upload-button-title').text().trim()).toBe(message);
                 };
 
                 var verifyImageRemoveButtonMessage = function (view, inProgress) {
                     var iconName = inProgress ? 'fa-spinner' : 'fa-remove';
                     var message = inProgress ? view.titleRemoving : view.removeButtonTitle();
-                    expect(view.$('.remove-button-icon i').attr('class')).toContain(iconName);
+                    expect(view.$('.remove-button-icon span').attr('class')).toContain(iconName);
                     expect(view.$('.remove-button-title').text().trim()).toBe(message);
                 };
 

lms/static/js/views/fields.js

@@ -30,12 +30,12 @@
             tagName: 'div',
 
             indicators: {
-                'canEdit': '<i class="icon fa fa-pencil message-can-edit" aria-hidden="true"></i><span class="sr">' + gettext("Editable") + '</span>',
-                'error': '<i class="fa fa-exclamation-triangle message-error" aria-hidden="true"></i><span class="sr">' + gettext("Error") + '</span>',
-                'validationError': '<i class="fa fa-exclamation-triangle message-validation-error" aria-hidden="true"></i><span class="sr">' + gettext("Validation Error") + '</span>',
-                'inProgress': '<i class="fa fa-spinner fa-pulse message-in-progress" aria-hidden="true"></i><span class="sr">' + gettext("In Progress") + '</span>',
-                'success': '<i class="fa fa-check message-success" aria-hidden="true"></i><span class="sr">' + gettext("Success") + '</span>',
-                'plus': '<i class="fa fa-plus placeholder" aria-hidden="true"></i><span class="sr">' + gettext("Placeholder")+ '</span>'
+                'canEdit': '<span class="icon fa fa-pencil message-can-edit" aria-hidden="true"></span><span class="sr">' + gettext("Editable") + '</span>', // jshint ignore:line
+                'error': '<span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span><span class="sr">' + gettext("Error") + '</span>', // jshint ignore:line
+                'validationError': '<span class="fa fa-exclamation-triangle message-validation-error" aria-hidden="true"></span><span class="sr">' + gettext("Validation Error") + '</span>', // jshint ignore:line
+                'inProgress': '<span class="fa fa-spinner fa-pulse message-in-progress" aria-hidden="true"></span><span class="sr">' + gettext("In Progress") + '</span>', // jshint ignore:line
+                'success': '<span class="fa fa-check message-success" aria-hidden="true"></span><span class="sr">' + gettext("Success") + '</span>', // jshint ignore:line
+                'plus': '<span class="fa fa-plus placeholder" aria-hidden="true"></span><span class="sr">' + gettext("Placeholder")+ '</span>' // jshint ignore:line
             },
 
             messages: {

lms/static/js/views/image_field.js

@@ -23,9 +23,9 @@
             titleImageAlt: '',
             screenReaderTitle: gettext("Image"),
 
-            iconUpload: '<i class="icon fa fa-camera" aria-hidden="true"></i>',
-            iconRemove: '<i class="icon fa fa-remove" aria-hidden="true"></i>',
-            iconProgress: '<i class="icon fa fa-spinner fa-pulse fa-spin" aria-hidden="true"></i>',
+            iconUpload: '<span class="icon fa fa-camera" aria-hidden="true"></span>',
+            iconRemove: '<span class="icon fa fa-remove" aria-hidden="true"></span>',
+            iconProgress: '<span class="icon fa fa-spinner fa-pulse fa-spin" aria-hidden="true"></span>',
 
             errorMessage: gettext("An error has occurred. Refresh the page, and then try again."),
 

lms/templates/bookmarks/bookmarks-list.underscore

@@ -10,13 +10,13 @@
              <a class="bookmarks-results-list-item" href="<%= bookmark.blockUrl() %>" aria-labelledby="bookmark-link-<%= index %>" data-bookmark-id="<%= bookmark.get('id') %>" data-component-type="<%= bookmark.get('block_type') %>" data-usage-id="<%= bookmark.get('usage_id') %>" aria-describedby="bookmark-type-<%= index %> bookmark-date-<%= index %>">
                 <div class="list-item-content">
                     <div class="list-item-left-section">
-                        <h3 id="bookmark-link-<%= index %>" class="list-item-breadcrumbtrail"> <%= _.map(_.pluck(bookmark.get('path'), 'display_name'), _.escape).concat([_.escape(bookmark.get('display_name'))]).join(' <i class="icon fa fa-caret-right" aria-hidden="true"></i><span class="sr">-</span> ') %> </h3>
+                        <h3 id="bookmark-link-<%= index %>" class="list-item-breadcrumbtrail"> <%= _.map(_.pluck(bookmark.get('path'), 'display_name'), _.escape).concat([_.escape(bookmark.get('display_name'))]).join(' <span class="icon fa fa-caret-right" aria-hidden="true"></span><span class="sr">-</span> ') %> </h3>
                         <p id="bookmark-date-<%= index %>" class="list-item-date"> <%= gettext("Bookmarked on") %> <%= humanFriendlyDate(bookmark.get('created')) %> </p>
                     </div>
 
                     <p id="bookmark-type-<%= index %>" class="list-item-right-section">
                         <span aria-hidden="true"><%= gettext("View") %></span>
-                        <i class="icon fa fa-arrow-right" aria-hidden="true"></i>
+                        <span class="icon fa fa-arrow-right" aria-hidden="true"></span>
                     </p>
                 </div>
             </a>
@@ -29,7 +29,7 @@
 
     <div class="bookmarks-empty">
         <div class="bookmarks-empty-header">
-            <i class="icon fa fa-bookmark-o bookmarks-empty-header-icon" aria-hidden="true"></i>
+            <span class="icon fa fa-bookmark-o bookmarks-empty-header-icon" aria-hidden="true"></span>
             <%= gettext("You have not bookmarked any courseware pages yet.") %>
             <br>
         </div>

lms/templates/ccx/enrollment.html

@@ -89,7 +89,7 @@ from openedx.core.djangolib.markup import HTML, Text
             <tr>
               <td>${member.user}</td>
               <td>${member.user.email}</td>
-              <td><a class="revoke"><i class="fa fa-times-circle" aria-hidden="true"></i> ${_("Revoke access")}</a></td>
+              <td><a class="revoke"><span class="fa fa-times-circle" aria-hidden="true"></span> ${_("Revoke access")}</a></td>
             </tr>
             %endfor
           </tbody>

lms/templates/ccx/grading_policy.html

@@ -3,7 +3,7 @@
 
 <div id="warn-coach" class="wrapper-msg urgency-high warning">
   <div class="msg">
-    <i class="msg-icon fa fa-warning"></i>
+    <span class="msg-icon fa fa-warning" aria-hidden="true"></span>
     <div class="msg-content">
       <h3 class="title">${_("WARNING")}</h3>
       <div class="copy">

lms/templates/ccx/schedule.html

@@ -39,7 +39,7 @@ from openedx.core.djangolib.js_utils import (
          tabindex="-1" role="dialog" aria-labelledby="ccx_schedule_set_date_heading">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove" aria-hidden="true"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">${_("Close")}</span>
     </button>
     <header>

lms/templates/ccx/schedule.underscore

   <div align="right">
     <button id="ccx_expand_all_btn" class="ccx-button-link">
-      <i class="fa fa-expand" aria-hidden="true"></i> <%- gettext('Expand All') %>
+      <span class="fa fa-expand" aria-hidden="true"></span> <%- gettext('Expand All') %>
     </button>
     <button id="ccx_collapse_all_btn" class="ccx-button-link">
-      <i class="fa fa-compress" aria-hidden="true"></i> <%- gettext('Collapse All') %>
+      <span class="fa fa-compress" aria-hidden="true"></span> <%- gettext('Collapse All') %>
     </button>
   </div>
   <br/>
@@ -14,7 +14,7 @@
         <th><%- gettext('Start Date') %></th>
         <th><%- gettext('Due Date') %></th>
         <td><button id="remove-all" class="ccx-button-link">
-          <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove all') %>
+          <span class="fa fa-remove" aria-hidden="true"></span> <%- gettext('remove all') %>
         </button></td>
       </tr>
     </thead>
@@ -23,7 +23,7 @@
         <tr class="chapter collapsed" data-location="<%- chapter.location %>" data-depth="1">
           <td class="unit">
             <button class="toggle-collapse ccx-button-link" aria-expanded="false">
-              <i class="fa fa-caret-right"></i>
+              <span class="fa fa-caret-right" aria-hidden="true"></span>
               <span class="sr">
                 <%- interpolate(gettext('toggle chapter %(displayName)s'),
                   {displayName: chapter.display_name}, true) %>
@@ -43,7 +43,7 @@
           </td>
           <td><button class="remove-unit ccx-button-link" aria-label="<%- interpolate(
                 gettext('Remove chapter %(chapterDisplayName)s'), {chapterDisplayName: chapter.display_name}, true) %>">
-            <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove') %>
+            <span class="fa fa-remove" aria-hidden="true"></span> <%- gettext('remove') %>
           </button></td>
         </tr>
         <% _.each(chapter.children, function(child) { %>
@@ -51,7 +51,7 @@
               data-location="<%- chapter.location %> <%- child.location %>">
             <td class="unit">
               <button class="toggle-collapse ccx-button-link" aria-expanded="false">
-                 <i class="fa fa-caret-right"></i>
+                 <span class="fa fa-caret-right" aria-hidden="true"></span>
                  <span class="sr">
                      <%- interpolate(gettext('toggle subsection %(displayName)s'),
                       {displayName: child.display_name}, true) %>
@@ -73,7 +73,7 @@
             </td>
             <td><button class="remove-unit ccx-button-link" aria-label="<%- interpolate(
                 gettext('Remove subsection %(subsectionDisplayName)s'), {subsectionDisplayName: child.display_name}, true) %>">
-              <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove') %>
+              <span class="fa fa-remove" aria-hidden="true"></span> <%- gettext('remove') %>
             </button></td>
           </tr>
           <% _.each(child.children, function(subchild) { %>
@@ -106,7 +106,7 @@
               <td>
                 <button class="remove-unit ccx-button-link" aria-label="<%- interpolate(
                     gettext('Remove unit %(unitName)s'), {unitName: subchild.display_name}, true) %>">
-                  <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove') %>
+                  <span class="fa fa-remove" aria-hidden="true"></span> <%- gettext('remove') %>
                 </button>
               </td>
           </tr>

lms/templates/certificates/_accomplishment-banner.html

@@ -53,7 +53,7 @@ from django.template.defaultfilters import escapejs
                           picture_link: '${full_course_image_url}',
                           description: '${_('Click the link to see my certificate.') | escapejs}'
                           });">
-                          <i class="icon fa fa-facebook-official" aria-hidden="true"></i>
+                          <span class="icon fa fa-facebook-official" aria-hidden="true"></span>
                           <span class="action-label">${_("Post on Facebook")}</span>
                       </button>
                     %endif
@@ -62,14 +62,14 @@ from django.template.defaultfilters import escapejs
                         class="action action-share-twitter btn-inverse btn-small icon-only"
                         title="${_('Share on Twitter')}"
                         onclick="popupWindow('${twitter_url}', 'tweetWindow', 640, 480); return false;">
-                          <i class="icon fa fa-twitter" aria-hidden="true"></i>
+                          <span class="icon fa fa-twitter" aria-hidden="true"></span>
                           <span class="action-label">${_("Tweet this Accomplishment. Pop up window.")}</span>
                       </button>
                     %endif
 
                     %if linked_in_url:
                     <button class="action action-linkedin-profile btn-inverse btn-small icon-only" id="action-share-linkedin" title="${_('Add to LinkedIn Profile')}" data-course-id="${course_id}" data-certificate-mode="${course_mode}">
-                        <i class="icon fa fa-linkedin" aria-hidden="true"></i>
+                        <span class="icon fa fa-linkedin" aria-hidden="true"></span>
                         <span class="action-label">${_("Add to LinkedIn Profile")}</span>
                     </button>
                     %endif
@@ -82,7 +82,7 @@ from django.template.defaultfilters import escapejs
                     %endif
 
                     <button class="action action-print btn-inverse btn-small" id="action-print-view">
-                        <i class="icon fa fa-print" aria-hidden="true"></i>
+                        <span class="icon fa fa-print" aria-hidden="true"></span>
                         ${_("Print Certificate")}
                     </button>
                 </div>

lms/templates/certificates/_badges-modal.html

@@ -3,7 +3,7 @@
 <script src="${static.url('js/certificates/certificates.js')}"></script>
 <div class="badges-overlay" style="display:none;">
     <div class="badges-modal">
-        <div class="close"><i class="fa fa-close" alt="Close"><input type="button" class="sr-only" value="Close"/></i></div>
+        <div class="close"><span class="fa fa-close" alt="Close" aria-hidden="true"><input type="button" class="sr-only" value="Close"/></span></div>
         <h1 class="hd-1 emphasized">Share on Mozilla Backpack</h1>
         <p class="explanation">
             To share your certificate on Mozilla Backpack, you must first have a Backpack account.

lms/templates/commerce/checkout_receipt.html

@@ -28,8 +28,7 @@ from django.utils.translation import ugettext as _
 <div id="error-container" class="hidden">
     <div id="error" class="wrapper-msg wrapper-msg-activate">
         <div class=" msg msg-activate">
-            <i class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></i>
-
+            <span class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></span>
             <div class="msg-content">
                 <h3 class="title">
                     <span class="sr">${error_summary}</span>

lms/templates/course.html

@@ -10,7 +10,7 @@ from django.core.urlresolvers import reverse
     <header class="course-image">
       <div class="cover-image">
         <img src="${course.course_image_url}" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
-        <div class="learn-more" aria-hidden=true>${_("LEARN MORE")}</div>
+        <div class="learn-more" aria-hidden="true">${_("LEARN MORE")}</div>
       </div>
     </header>
     <div class="course-info" aria-hidden="true">

lms/templates/course_modes/choose.html

@@ -56,7 +56,7 @@ from openedx.core.djangolib.markup import HTML, Text
     % if error:
         <div class="wrapper-msg wrapper-msg-error">
             <div class=" msg msg-error">
-                <i class="msg-icon icon fa fa-exclamation-triangle"></i>
+                <span class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></span>
                 <div class="msg-content">
                     <h3 class="title">${_("Sorry, there was an error when trying to enroll you")}</h3>
                     <div class="copy">

lms/templates/courseware/course_about.html

@@ -221,15 +221,15 @@ from openedx.core.lib.courses import course_image_url
         <%include file="course_about_sidebar_header.html" />
 
         <ol class="important-dates">
-          <li class="important-dates-item"><i class="icon fa fa-info-circle"></i><p class="important-dates-item-title">${_("Course Number")}</p><span class="important-dates-item-text course-number">${course.display_number_with_default | h}</span></li>
+          <li class="important-dates-item"><span class="icon fa fa-info-circle" aria-hidden="true"></span><p class="important-dates-item-title">${_("Course Number")}</p><span class="important-dates-item-text course-number">${course.display_number_with_default | h}</span></li>
           % if not course.start_date_is_still_default:
-            <li class="important-dates-item"><i class="icon fa fa-calendar"></i><p class="important-dates-item-title">${_("Classes Start")}</p><span class="important-dates-item-text start-date">${course.start_datetime_text()}</span></li>
+            <li class="important-dates-item"><span class="icon fa fa-calendar" aria-hidden="true"></span><p class="important-dates-item-title">${_("Classes Start")}</p><span class="important-dates-item-text start-date">${course.start_datetime_text()}</span></li>
           % endif
             ## We plan to ditch end_date (which is not stored in course metadata),
             ## but for backwards compatibility, show about/end_date blob if it exists.
             % if get_course_about_section(request, course, "end_date") or course.end:
             <li class="important-dates-item">
-                <i class="icon fa fa-calendar"></i>
+                <span class="icon fa fa-calendar" aria-hidden="true"></span>
                 <p class="important-dates-item-title">${_("Classes End")}</p>
                 <span class="important-dates-item-text final-date">
                     % if get_course_about_section(request, course, "end_date"):
@@ -242,14 +242,14 @@ from openedx.core.lib.courses import course_image_url
             % endif
 
           % if get_course_about_section(request, course, "effort"):
-            <li class="important-dates-item"><i class="icon fa fa-pencil"></i><p class="important-dates-item-title">${_("Estimated Effort")}</p><span class="important-dates-item-text effort">${get_course_about_section(request, course, "effort")}</span></li>
+            <li class="important-dates-item"><span class="icon fa fa-pencil" aria-hidden="true"></span><p class="important-dates-item-title">${_("Estimated Effort")}</p><span class="important-dates-item-text effort">${get_course_about_section(request, course, "effort")}</span></li>
           % endif
 
-          ##<li class="important-dates-item"><i class="icon fa fa-clock-o"></i><p class="important-dates-item-title">${_('Course Length')}</p><span class="important-dates-item-text course-length">${_('{number} weeks').format(number=15)}</span></li>
+          ##<li class="important-dates-item"><span class="icon fa fa-clock-o" aria-hidden="true"></span><p class="important-dates-item-title">${_('Course Length')}</p><span class="important-dates-item-text course-length">${_('{number} weeks').format(number=15)}</span></li>
 
           %if course_price and (can_add_course_to_cart or is_cosmetic_price_enabled):
             <li class="important-dates-item">
-              <i class="icon fa fa-money"></i>
+              <span class="icon fa fa-money" aria-hidden="true"></span>
               <p class="important-dates-item-title">${_("Price")}</p>
               <span class="important-dates-item-text">${course_price}</span>
             </li>
@@ -258,7 +258,7 @@ from openedx.core.lib.courses import course_image_url
           % if pre_requisite_courses:
           <% prc_target = reverse('about_course', args=[unicode(pre_requisite_courses[0]['key'])]) %>
           <li class="prerequisite-course important-dates-item">
-            <i class="icon fa fa-list-ul"></i>
+            <span class="icon fa fa-list-ul" aria-hidden="true"></span>
             <p class="important-dates-item-title">${_("Prerequisites")}</p>
             ## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
             <span class="important-dates-item-text pre-requisite"><a href="${prc_target}">${pre_requisite_courses[0]['display']}</a></span>
@@ -272,7 +272,7 @@ from openedx.core.lib.courses import course_image_url
           </li>
           % endif
           % if get_course_about_section(request, course, "prerequisites"):
-            <li class="important-dates-item"><i class="icon fa fa-book"></i><p class="important-dates-item-title">${_("Requirements")}</p><span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span></li>
+            <li class="important-dates-item"><span class="icon fa fa-book" aria-hidden="true"></span><p class="important-dates-item-title">${_("Requirements")}</p><span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span></li>
           % endif
         </ol>
       </section>

lms/templates/courseware/course_about_sidebar_header.html

@@ -45,13 +45,13 @@ from django.conf import settings
         ).replace(u" ", u"%20")
       %>
       <a href="${tweet_action}" class="share">
-        <i class="icon fa fa-twitter"></i><span class="sr">${_("Tweet that you've enrolled in this course")}</span>
+        <span class="icon fa fa-twitter" aria-hidden="true"></span><span class="sr">${_("Tweet that you've enrolled in this course")}</span>
       </a>
       <a href="${facebook_link}" class="share">
-        <i class="icon fa fa-thumbs-up"></i><span class="sr">${_("Post a Facebook message to say you've enrolled in this course")}</span>
+        <span class="icon fa fa-thumbs-up" aria-hidden="true"></span><span class="sr">${_("Post a Facebook message to say you've enrolled in this course")}</span>
       </a>
       <a href="${email_subject}" class="share">
-        <i class="icon fa fa-envelope"></i><span class="sr">${_("Email someone to say you've enrolled in this course")}</span>
+        <span class="icon fa fa-envelope" aria-hidden="true"></span><span class="sr">${_("Email someone to say you've enrolled in this course")}</span>
       </a>
   </div>
   % endif

lms/templates/courseware/courses.html

@@ -37,11 +37,11 @@
           <form class="wrapper-search-input">
             <label for="discovery-input" class="sr">${_('Search for a course')}</label>
             <input id="discovery-input" class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
-            <button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
-              <i class="icon fa fa-search" aria-hidden="true"></i>
+            <button type="submit" class="button postfix discovery-submit" title="${_('Search')}">
+              <span class="icon fa fa-search" aria-hidden="true"></span>
               <div aria-live="polite" aria-relevant="all">
                 <div id="loading-indicator" class="loading-spinner hidden">
-                  <i class="icon fa fa-spinner fa-spin"></i>
+                  <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
                   <span class="sr">${_('Loading')}</span>
                 </div>
               </div>

lms/templates/courseware/courseware.html

@@ -127,10 +127,10 @@ ${HTML(fragment.foot_html())}
                 <div class="search-field-wrapper">
                   <input id="course-search-input" type="text" class="search-field"/>
                   <button type="submit" class="search-button">
-                    ${_('search')} <i class="icon fa fa-search" aria-hidden="true"></i>
+                    ${_('search')} <span class="icon fa fa-search" aria-hidden="true"></span>
                   </button>
-                  <button type="button" class="cancel-button" aria-label="${_('Clear search')}">
-                    <i class="icon fa fa-remove" aria-hidden="true"></i>
+                  <button type="button" class="cancel-button" title="${_('Clear search')}">
+                    <span class="icon fa fa-remove" aria-hidden="true"></span>
                   </button>
                 </div>
               </form>

lms/templates/courseware/progress.html

@@ -124,7 +124,7 @@ from django.utils.http import urlquote_plus
                     %elif credit_course_requirements['eligibility_status'] == 'partial_eligible':
                         <span>${_("{student_name}, you have not yet met the requirements for credit.").format(student_name=student.profile.name) | h}</span>
                     %endif
-                    <a href="${settings.CREDIT_HELP_LINK_URL | h}" class="credit-help"><i class="fa fa-question"></i><span class="sr">${_("Information about course credit requirements")}</span></a><br>
+                    <a href="${settings.CREDIT_HELP_LINK_URL | h}" class="credit-help"><span class="fa fa-question" aria-hidden="true"></span><span class="sr">${_("Information about course credit requirements")}</span></a><br>
                     <div class="requirement-container" data-eligible="${credit_course_requirements['eligibility_status'] | h}">
                     %for requirement in credit_course_requirements['requirements']:
                         <div class="requirement">
@@ -139,13 +139,13 @@ from django.utils.http import urlquote_plus
                                     %if requirement['status'] == 'submitted':
                                         <span class="requirement-submitted">${_("Verification Submitted")}</span>
                                     %elif requirement['status'] == 'failed':
-                                        <i class="fa fa-times" aria-hidden="true"></i>
+                                        <span class="fa fa-times" aria-hidden="true"></span>
                                         <span>${_("Verification Failed" )}</span>
                                     %elif requirement['status'] == 'declined':
-                                        <i class="fa fa-times" aria-hidden="true"></i>
+                                        <span class="fa fa-times" aria-hidden="true"></span>
                                         <span>${_("Verification Declined" )}</span>
                                     %elif requirement['status'] == 'satisfied':
-                                        <i class="fa fa-check" aria-hidden="true"></i>
+                                        <span class="fa fa-check" aria-hidden="true"></span>
                                         <span>${_("Completed by")} ${get_time_display(requirement['status_date'], DEFAULT_SHORT_DATE_FORMAT, settings.TIME_ZONE)}</span>
                                     %endif
                                 %else:
@@ -155,7 +155,7 @@ from django.utils.http import urlquote_plus
                         </div>
                     %endfor
                      </div>
-                    <button class="detail-collapse" aria-live="polite"><i class="fa fa-caret-up" aria-hidden="true"></i>
+                    <button class="detail-collapse" aria-live="polite"><span class="fa fa-caret-up" aria-hidden="true"></span>
                         <span class="requirement-detail">${_("Less")}</span>
                     </button>
                 </div>

lms/templates/dashboard.html

@@ -140,11 +140,11 @@ from openedx.core.djangolib.markup import HTML, Text
             <label for="dashboard-search-input">${_('Search Your Courses')}</label>
             <div class="search-field-wrapper">
               <input id="dashboard-search-input" type="text" class="search-field"/>
-              <button type="submit" class="search-button" aria-label="${_('Search')}">
-                <i class="icon fa fa-search" aria-hidden="true"></i>
+              <button type="submit" class="search-button" title="${_('Search')}">
+                <span class="icon fa fa-search" aria-hidden="true"></span>
               </button>
-              <button type="button" class="cancel-button" aria-label="${_('Clear search')}">
-                <i class="icon fa fa-remove" aria-hidden="true"></i>
+              <button type="button" class="cancel-button" title="${_('Clear search')}">
+                <span class="icon fa fa-remove" aria-hidden="true"></span>
               </button>
             </div>
           </form>
@@ -182,7 +182,7 @@ from openedx.core.djangolib.markup import HTML, Text
 <section id="email-settings-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="email-settings-title">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_("Close")}
@@ -213,7 +213,7 @@ from openedx.core.djangolib.markup import HTML, Text
 <section id="unenroll-modal" class="modal unenroll-modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="unenrollment-modal-title">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_("Close")}

lms/templates/dashboard/_dashboard_course_listing.html

@@ -54,7 +54,7 @@ from student.helpers import (
 <div class="course-container">
  % if course_program_info and course_program_info.get('category')=='xseries':
   <div class="label-xseries-association">
-    <i class="xseries-icon"></i>
+    <span class="xseries-icon" aria-hidden="true"></span>
     <p class="message-copy">${_("{category} Program Course").format(category=course_program_info['display_category'])}</p>
   </div>
  % endif
@@ -157,7 +157,7 @@ from student.helpers import (
                       title="${_('Share on Facebook')}"
                       onclick="window.open('${facebook_url}', '${share_window_name}', '${share_window_config}'); return false;">
                       <span class="sr">${_('Facebook')}</span>
-                      <i class="fa fa-facebook" aria-hidden="true"></i>
+                      <span class="fa fa-facebook" aria-hidden="true"></span>
                     </a>
                 % endif
                 % if share_url and share_settings.get('DASHBOARD_TWITTER', False):
@@ -174,7 +174,7 @@ from student.helpers import (
                       title="${_('Share on Twitter')}"
                       onclick="window.open('${twitter_url}', '${share_window_name}', '${share_window_config}'); return false;">
                       <span class="sr">${_('Twitter')}</span>
-                      <i class="fa fa-twitter" aria-hidden="true"></i>
+                      <span class="fa fa-twitter" aria-hidden="true"></span>
                     </a>
                 % endif
               % endif
@@ -185,7 +185,7 @@ from student.helpers import (
                 <span class="sr">&nbsp;
                   ${course_overview.display_name_with_default}
                 </span>
-                <i class="fa fa-cog" aria-hidden="true"></i>
+                <span class="fa fa-cog" aria-hidden="true"></span>
               </button>
               <div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" tabindex="-1">
                 <ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
@@ -356,7 +356,7 @@ from student.helpers import (
                   % else:
                     <a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': unicode(course_overview.id)})}" data-course-id="${course_overview.id}" data-user="${user.username}">
                   % endif
-                      <i class="action-upgrade-icon"></i>
+                      <span class="action-upgrade-icon" aria-hidden="true"></span>
                     <span class="wrapper-copy">
                       <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified")}</span>
                         <span class="sr">&nbsp;${_(course_overview.display_name_with_default)}</span>

lms/templates/dashboard/_dashboard_xseries_info.html

@@ -29,7 +29,7 @@
             <a class="btn ${xseries_btn_class}" href="${program_data['program_marketing_url']}" target="_blank"
                data-program-id="${program_data['program_id']}" >
                 <span class="sr">${program_data['display_name']}</span>
-                <i class="action-xseries-icon" aria-hidden="true"></i>
+                <span class="action-xseries-icon" aria-hidden="true"></span>
                 ${_("View {category} Details").format(category=display_category)}
             </a>
         </div>

lms/templates/discovery/course_card.underscore

@@ -3,7 +3,7 @@
         <header class="course-image">
             <div class="cover-image">
                 <img src="<%- image_url %>" alt="<%- content.display_name %> <%- content.number %>" />
-                <div class="learn-more" aria-hidden=true><%- gettext("LEARN MORE") %></div>
+                <div class="learn-more" aria-hidden="true"><%- gettext("LEARN MORE") %></div>
             </div>
         </header>
         <section class="course-info" aria-hidden="true">

lms/templates/discovery/filter.underscore

   <button data-value="<%- query %>" class="facet-option discovery-button" data-type="<%- type %>">
     <span class="query"><%- name %></span>
-    <i aria-hidden="true" class="fa fa-times"></i>
+    <span aria-hidden="true" class="fa fa-times" aria-hidden="true"></span>
   </button>

lms/templates/edxnotes/edxnotes.html

@@ -35,7 +35,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
             <label for="search-notes-input" class="sr">${_('Search notes for:')}</label>
             <input type="search" class="search-notes-input" id="search-notes-input" name="note" placeholder="${_('Search notes for...')}" required>
             <button type="submit" class="search-notes-submit">
-              <i class="icon fa fa-search"></i>
+              <span class="icon fa fa-search" aria-hidden="true"></span>
               <span class="sr">${_('Search')}</span>
             </button>
           </form>
@@ -59,7 +59,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
         % if has_notes:
         <div class="ui-loading" tabindex="-1">
           <span class="spin">
-            <i class="icon fa fa-refresh"></i>
+            <span class="icon fa fa-refresh" aria-hidden="true"></span>
           </span>
           <span class="copy">${_("Loading")}</span>
         </div>

lms/templates/edxnotes/tab-item.underscore

 <% var hasIcon = icon ? 1 : 0; %>
 
 <a class="tab-label <% if (hasIcon) { print('has-icon') } %>" href="#">
-  <% if (hasIcon) { %><i class="icon <%= icon %>" aria-hidden="true"></i> <% } %><%- gettext(name) %>
+  <% if (hasIcon) { %><span class="icon <%= icon %>" aria-hidden="true"></span> <% } %><%- gettext(name) %>
 </a>
 
 <% if (is_closable) { %>
   <a href="#" class="action-close">
-    <i class="icon fa fa-times-circle"></i>
+    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
     <span class="sr"><%- gettext("Clear search results") %></span>
   </a>
 <% } %>

lms/templates/edxnotes/toggle_notes.html

@@ -13,7 +13,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
 <div class="wrapper-utility edx-notes-visibility">
   <span class="action-toggle-message" aria-live="polite"></span>
   <button class="utility-control utility-control-button action-toggle-notes is-disabled ${"is-active" if edxnotes_visibility else ""}">
-    <i class="icon fa fa-pencil"></i>
+    <span class="icon fa fa-pencil" aria-hidden="true"></span>
     % if edxnotes_visibility:
     <span class="utility-control-label sr">${_("Hide notes")}</span>
     % else:

lms/templates/fields/field_dropdown.underscore

@@ -11,7 +11,7 @@
 <% } %>
 
 <% if (iconName) { %>
-    <i class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></i>
+    <span class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></span>
 <% } %>
 
 <span class="u-field-value">

lms/templates/forgot_password_modal.html

@@ -8,7 +8,7 @@ from django.core.urlresolvers import reverse
 <section id="forgot-password-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Password Reset')}">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/help_modal.html

@@ -22,7 +22,7 @@ from xmodule.tabs import CourseTabList
   <div class="inner-wrapper" id="help_wrapper">
     ## TODO: find a way to refactor this
     <button class="close-modal "tabindex="0">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}
@@ -86,7 +86,7 @@ from xmodule.tabs import CourseTabList
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}
@@ -120,7 +120,7 @@ from xmodule.tabs import CourseTabList
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="0">
     <button class="close-modal" tabindex="0">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/index.html

@@ -30,7 +30,7 @@ from openedx.core.djangolib.markup import HTML, Text
                     <input class="search-input" name="search_query" type="text" placeholder="${_("Search for a course")}"></input>
                   </label>
                   <button class="search-button" type="submit">
-                    <i class="icon fa fa-search" aria-hidden="true"></i><span class="sr">${_("Search")}</span>
+                    <span class="icon fa fa-search" aria-hidden="true"></span><span class="sr">${_("Search")}</span>
                   </button>
                 </form>
               </div>

lms/templates/instructor/instructor_dashboard_2/add_coupon_modal.html

@@ -6,7 +6,7 @@ from django.core.urlresolvers import reverse
 <section id="add-coupon-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Add Coupon Code')}">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/instructor/instructor_dashboard_2/certificates.html

@@ -174,7 +174,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
             <div class="bulk-white-list-exception"></div>
             <div class="white-listed-students" id="white-listed-students">
                 <div class="ui-loading">
-                    <span class="spin"><i class="icon fa fa-refresh" aria-hidden="true"></i></span> <span class="copy">${_('Loading')}</span>
+                    <span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_('Loading')}</span>
                 </div>
             </div>
             <br/>
@@ -188,7 +188,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
         <h2> ${_("Invalidate Certificates")} </h2>
         <div id="certificate-invalidation">
             <div class="ui-loading">
-                <span class="spin"><i class="icon fa fa-refresh" aria-hidden="true"></i></span> <span class="copy">${_('Loading')}</span>
+                <span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_('Loading')}</span>
             </div>
         </div>
     </div>

lms/templates/instructor/instructor_dashboard_2/cohort-editor.underscore

@@ -35,7 +35,7 @@
 
             <div class="form-actions">
                 <button class="form-submit button action-primary action-view">
-                    <i class="button-icon icon fa fa-plus" aria-hidden="true"></i> <%- gettext('Add Students') %>
+                    <span class="button-icon icon fa fa-plus" aria-hidden="true"></span> <%- gettext('Add Students') %>
                 </button>
             </div>
         </form>

lms/templates/instructor/instructor_dashboard_2/cohort-form.underscore

@@ -51,7 +51,7 @@
                 </div>
                 <% if (isDefaultCohort) { %>
                     <p class="copy-error">
-                        <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
+                        <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
                         <%- gettext("There must be one cohort to which students can automatically be assigned.") %>
                     </p>
                 <% } %>
@@ -96,7 +96,7 @@
                                 <% if (hasSelectedContentGroup && !foundSelected) { %>
                                     <div class="msg-inline">
                                         <p class="copy-error">
-                                            <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
+                                            <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
                                             <%=
                                             HtmlUtils.interpolateHtml(
                                                 // Translators: Any text between {screen_reader_start} and {screen_reader_end} is only read by screen readers and never shown in the browser.
@@ -115,7 +115,7 @@
                             <div class="input-group-other">
                                 <div class="msg-inline">
                                     <p class="copy-error">
-                                        <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
+                                        <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
                                         <%=
                                         HtmlUtils.interpolateHtml(
                                             // Translators: Any text between {screen_reader_start} and {screen_reader_end} is only read by screen readers and never shown in the browser.

lms/templates/instructor/instructor_dashboard_2/cohorts.underscore

@@ -18,7 +18,7 @@
         </form>
 
         <button class="button action-primary action-create">
-            <i class="icon fa fa-plus" aria-hidden="true"></i>
+            <span class="icon fa fa-plus" aria-hidden="true"></span>
             <%- gettext('Add Cohort') %>
         </button>
     </div>
@@ -39,7 +39,7 @@
 
         <div class="cohort-management-supplemental">
             <p class="">
-                <i class="icon fa fa-info-circle" aria-hidden="true"></i>
+                <span class="icon fa fa-info-circle" aria-hidden="true"></span>
                 <%= HtmlUtils.interpolateHtml(
                     gettext('To review student cohort assignments or see the results of uploading a CSV file, download course profile information or cohort results on {link_start} the Data Download page. {link_end}'),
                     {

lms/templates/instructor/instructor_dashboard_2/edit_coupon_modal.html

@@ -6,7 +6,7 @@ from django.core.urlresolvers import reverse
 <section id="edit-coupon-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Edit Coupon Code')}">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/instructor/instructor_dashboard_2/generate_registarion_codes_modal.html

@@ -6,7 +6,7 @@ from django.core.urlresolvers import reverse
 <section id="registration_code_generation_modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Generate Registration Code Modal')}">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/instructor/instructor_dashboard_2/invalidate_registration_code_modal.html

@@ -4,7 +4,7 @@
 <section id="invalidate_registration_code_modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Enrollment Code Status')}">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/instructor/instructor_dashboard_2/metrics.html

@@ -57,7 +57,7 @@ from django.template.defaultfilters import escapejs
           </div>
           <input class="download-csv metrics-student-opened" type="button" name="dump_student_opened" value="${_("Download Student Opened as a CSV")}" data-endpoint="${section_data['get_students_opened_subsection_url']}" data-csv="true">
           <input class="download-csv metrics-student-grades" type="button" name="dump_student_grades" value="${_("Download Student Grades as a CSV")}" data-endpoint="${section_data['get_students_problem_grades_url']}" data-csv="true">
-          <a class="close-button" href="#"><i class="icon fa fa-remove"></i><span class="sr">${_("Close")}</span></a>
+          <a class="close-button" href="#"><span class="icon fa fa-remove" aria-hidden="true"></span><span class="sr">${_("Close")}</span></a>
       </div>
       </div>
     </div>
@@ -154,7 +154,7 @@ from django.template.defaultfilters import escapejs
         var nothingText = "${_('There are no problems in this section.')}";
         var loadingText = "${_('Loading')}";
         var nothingP = '<p class="nothing">' + nothingText  + '</p>';
-        var loading = '<p class="loading"><i class="icon fa fa-spinner fa-spin fa-large"></i>' + loadingText + '</p>';
+        var loading = '<p class="loading"><span class="icon fa fa-spinner fa-spin fa-large" aria-hidden="true"></span>' + loadingText + '</p>';
 
         // Display spinners or "There are no problems in this section" message
         $('.metrics-left').each(function() {

lms/templates/instructor/instructor_dashboard_2/notification.underscore

@@ -22,7 +22,7 @@
         <div class="message-actions">
             <button class="action-primary <%- actionClass %>">
                 <% if (actionIconClass) { %>
-                    <i class="icon fa <%- actionIconClass %>"></i>
+                    <span class="icon fa <%- actionIconClass %>" aria-hidden="true"></span>
                 <% } %>
                 <%- actionText %>
             </button>

lms/templates/instructor/instructor_dashboard_2/set_course_mode_price_modal.html

@@ -6,7 +6,7 @@ from django.core.urlresolvers import reverse
 <section id="set-course-mode-price-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Set Course Mode Price')}">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/learner_dashboard/explore_new_programs.underscore

@@ -3,7 +3,7 @@
 </div>
 <div class="ad-link">
     <a href="<%- xseriesUrl %>" class="btn-neutral">
-        <i class="icon fa fa-search" aria-hidden="true"></i> 
+        <span class="icon fa fa-search" aria-hidden="true"></span>
         <span><%- gettext('Explore New XSeries') %></span>
     </a>
 </div>

lms/templates/lti.html

@@ -35,7 +35,7 @@ from django.utils.translation import ugettext as _
             % endif
             <p class="lti-link external"><a target="_blank" class="link_lti_new_window" href="${form_url}">
                 ${button_text or _('View resource in a new window')}
-                 <i class="icon fa fa-external-link"></i>
+                 <span class="icon fa fa-external-link" aria-hidden="true"></span>
             </a></p>
         </div>
     % else:

lms/templates/modal/_modal-settings-language.html

@@ -7,7 +7,7 @@ from django.core.urlresolvers import reverse
 <section id="change_language" class="modal modal-settings-language" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change_language_title">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/modal/accessible_confirm.html

@@ -2,7 +2,7 @@
 <div id="accessibile-confirm-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="accessibile-confirm-title">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/navigation.html

@@ -114,7 +114,7 @@ site_status_msg = get_site_status_msg(course_id)
         <ol class="user">
           <li class="primary">
             <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
-              <i class="icon fa fa-shopping-cart"></i> ${_("Shopping Cart")}
+              <span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
             </a>
           </li>
         </ol>

lms/templates/search/course_search_item.underscore

 <div class="result-excerpt"><%= excerpt %></div>
-<a class="result-link" href="<%- url %>"><%= gettext("View") %> <i class="icon fa fa-arrow-right"></i></a>
+<a class="result-link" href="<%- url %>"><%= gettext("View") %> <span class="icon fa fa-arrow-right" aria-hidden="true"></span></a>
 <span class="result-location"><%- location.join(' ▸ ') %></span>
 <span class="result-type"><%- content_type %></span>

lms/templates/search/course_search_results.underscore

@@ -14,7 +14,7 @@
                 { num_items: pageSize },
                 true
             ) %>
-            <i class="icon fa fa-spinner fa-spin"></i>
+            <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
         </a>
     <% } %>
 

lms/templates/search/dashboard_search_item.underscore

 <div class="result-excerpt"><%= excerpt %></div>
-<a class="result-link" href="<%- url %>"><%= gettext("View") %> <i class="icon fa fa-arrow-right"></i></a>
+<a class="result-link" href="<%- url %>"><%= gettext("View") %> <span class="icon fa fa-arrow-right" aria-hidden="true"></span></a>
 <span class="result-course-name"><%- course_name %>:</span>
 <span class="result-location"><%- location.join(' ▸ ') %></span>
 <span class="result-type"><%- content_type %></span>

lms/templates/search/dashboard_search_results.underscore

@@ -15,7 +15,7 @@
                 { num_items: pageSize },
                 true
             ) %>
-            <i class="icon fa fa-spinner fa-spin"></i>
+            <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
         </a>
     <% } %>
 

lms/templates/search/search_loading.underscore

-<i class="icon fa fa-spinner fa-spin"></i> <%= gettext("Loading") %>
+<span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span> <%= gettext("Loading") %>
 

lms/templates/seq_module.html

@@ -21,8 +21,8 @@
            data-page-title="${item['page_title']}"
            data-path="${item['path']}"
            id="tab_${idx}">
-            <i class="icon fa seq_${item['type']}" aria-hidden="true"></i>
-            <i class="fa fa-fw fa-bookmark bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}" aria-hidden="true"></i>
+            <span class="icon fa seq_${item['type']}" aria-hidden="true"></span>
+            <span class="fa fa-fw fa-bookmark bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}" aria-hidden="true"></span>
             <div class="sequence-tooltip sr"><span class="sr">${item['type']}&nbsp;</span>${item['page_title']}<span class="sr bookmark-icon-sr">&nbsp;${_("Bookmarked") if item['bookmarked'] else ""}</span></div>
           </button>
         </li>

lms/templates/shoppingcart/cybersource_form.html

@@ -4,5 +4,5 @@
             <input type="hidden" name="${pk}" value="${pv}" />
         % endfor
 
-        <button type="submit">${_('Payment')}<i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
+        <button type="submit">${_('Payment')}<span class="icon fa fa-caret-right" aria-hidden="true"></span></button>
     </form>

lms/templates/shoppingcart/receipt.html

@@ -32,7 +32,7 @@ from openedx.core.lib.courses import course_image_url
            ## in case of multiple courses in single self purchase scenario,
            ## we will show the button View Dashboard
           <% dashboard_url = reverse('dashboard') %>
-          <a href="${dashboard_url}" class="blue pull-right">${_("View Dashboard")} <i class="icon fa fa-caret-right"></i></a>
+          <a href="${dashboard_url}" class="blue pull-right">${_("View Dashboard")} <span class="icon fa fa-caret-right" aria-hidden="true"></span></a>
           <span class="mt-7">
             ${_(u"You have successfully been enrolled for {course_names}. "
                 u"The following receipt has been emailed to {receipient_emails}").format(
@@ -99,7 +99,7 @@ from openedx.core.lib.courses import course_image_url
     %endif
     <div class="bordered-bar">
       <h2>${_('Invoice')} #${order.id}<span>${_('Date of purchase')}: ${order_purchase_date} </span><span
-          class="pull-right"><a href="" onclick="window.print();" class="blue-link"><i class="icon fa fa-print"></i> ${_('Print Receipt')}</a></span>
+          class="pull-right"><a href="" onclick="window.print();" class="blue-link"><span class="icon fa fa-print" aria-hidden="true"></span> ${_('Print Receipt')}</a></span>
       </h2>
     </div>
     % if order.total_cost > 0:

lms/templates/shoppingcart/registration_code_receipt.html

@@ -80,12 +80,12 @@ from openedx.core.lib.courses import course_image_url
       % if not reg_code_already_redeemed:
         %if redemption_success:
           <% course_url = reverse('info', args=[course.id.to_deprecated_string()]) %>
-          <a href="${course_url}" class="link-button course-link-bg-color">${_("View Course")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></a>
+          <a href="${course_url}" class="link-button course-link-bg-color">${_("View Course")} <span class="icon fa fa-caret-right" aria-hidden="true"></span></a>
         %elif not registered_for_course:
           <form method="post">
             <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
             <button type="submit" id="id_active_course_enrollment"
-               name="active_course_enrollment">${_("Activate Course Enrollment")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
+               name="active_course_enrollment">${_("Activate Course Enrollment")} <span class="icon fa fa-caret-right" aria-hidden="true"></span></button>
           </form>
         %endif
       %endif

lms/templates/shoppingcart/registration_code_redemption.html

@@ -87,13 +87,13 @@ from openedx.core.lib.courses import course_image_url
       </div>
       % if not reg_code_already_redeemed:
         %if redemption_success:
-          <a href="${reverse('dashboard')}" class="link-button course-link-bg-color">${_("View Dashboard")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></a>
+          <a href="${reverse('dashboard')}" class="link-button course-link-bg-color">${_("View Dashboard")} <span class="icon fa fa-caret-right" aria-hidden="true"></span></a>
         %elif not registered_for_course:
           <form method="post">
             <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }" aria-hidden="true">
             <button type="submit"
                id="id_active_course_enrollment"
-               name="active_course_enrollment">${_("Activate Course Enrollment")} <i class="icon fa fa-caret-right" aria-hidden="true"></i></button>
+               name="active_course_enrollment">${_("Activate Course Enrollment")} <span class="icon fa fa-caret-right" aria-hidden="true"></span></button>
           </form>
         %endif
       %endif

lms/templates/shoppingcart/shopping_cart.html

@@ -107,11 +107,11 @@ from openedx.core.lib.courses import course_image_url
                       <input maxlength="3" class="spin-counter" title="${_('Input quantity and press enter.')}" max="999" type="text" name="students" value="${item.qty}" id="field_${item.id}" data-unit-cost="${item.unit_cost}" data-qty="${item.qty}" data-item-id="${item.id}" aria-describedby="students-${item.id}">
                   </div>
                   <button class="inc button" data-operation="inc">
-                    <i class="icon fa fa-caret-up" aria-hidden="true"><span>+</span></i>
+                    <span class="icon fa fa-caret-up" aria-hidden="true"><span>+</span></span>
                     <span class="sr">${_('Increase')}</span>
                   </button>
                   <button class="dec button" data-operation="dec">
-                    <i class="icon fa fa-caret-down"></i>
+                    <span class="icon fa fa-caret-down" aria-hidden="true"></span>
                     <span class="sr">${_('Decrease')}</span>
                   </button>
                       <!--<a name="updateBtn" class="updateBtn hidden" id="updateBtn-${item.id}" href="#">update</a>-->
@@ -121,7 +121,7 @@ from openedx.core.lib.courses import course_image_url
 
               <div class="col-3">
                  <button href="#" class="btn-remove" data-item-id="${item.id}">
-                  <i class="icon fa fa-times-circle" aria-hidden="true"></i>
+                  <span class="icon fa fa-times-circle" aria-hidden="true"></span>
                   <span class="sr">${_('Remove')}</span>
                 </button>
               </div>
@@ -143,7 +143,7 @@ from openedx.core.lib.courses import course_image_url
               </div>
             % else:
               <div class="code-applied">
-                <span class="green"><i class="icon fa fa-check-square-o" aria-hidden="true"></i>${_('code has been applied')}</span>
+                <span class="green"><span class="icon fa fa-check-square-o" aria-hidden="true"></span>${_('code has been applied')}</span>
                 <button type="submit" class="blue-border" id="submit-reset-redemption">${_('Reset')}</button>
               </div>
             % endif
@@ -163,7 +163,7 @@ from openedx.core.lib.courses import course_image_url
                   <div name="billing">
                       <button type="submit" name="billing-details" aria-describedby="billing_business_helper_text">
                         ${_('Billing Details')}
-                        <i class="icon fa fa-caret-right" aria-hidden="true"></i>
+                        <span class="icon fa fa-caret-right" aria-hidden="true"></span>
                       </button>
                       <p id="billing_business_helper_text">
                           ${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}
@@ -187,7 +187,7 @@ from openedx.core.lib.courses import course_image_url
                   <div name="billing" class="hidden">
                       <button type="submit" name="billing-details" aria-describedby="billing_helper_text">
                         ${_('Billing Details')}
-                        <i class="icon fa fa-caret-right" aria-hidden="true"></i>
+                        <span class="icon fa fa-caret-right" aria-hidden="true"></span>
                       </button>
                       <p id="billing_helper_text">
                           ${_('After this purchase is complete, a receipt is generated with relative billing details and registration codes for students.')}

lms/templates/signup_modal.html

@@ -11,7 +11,7 @@ import calendar
 <section id="signup-modal" class="modal signup-modal">
   <div class="inner-wrapper">
     <button class="close-modal">
-      <i class="icon fa fa-remove"></i>
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close')}

lms/templates/student_account/account_settings_section.underscore

@@ -6,11 +6,11 @@
         <h3 class="section-header"><%- gettext(section.title) %></h3>
         <div class="account-settings-section-body">
             <div class="ui-loading-indicator">
-                <span class="spin"><span class="icon fa fa-refresh" aria-hidden=true></span></span>
+                <span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span>
                 <span class="copy"><%- gettext("Loading") %></span>
             </div>
             <div class="ui-loading-error is-hidden">
-                <span class="fa fa-exclamation-triangle message-error" aria-hidden=true></span>
+                <span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
                 <span class="copy"><%- gettext("An error occurred. Please reload the page.") %></span>
             </div>
         </div>

lms/templates/student_profile/learner_profile.html

@@ -17,7 +17,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json
 <main id="main" aria-label="Content" tabindex="-1">
     <div class="wrapper-profile">
         <div class="ui-loading-indicator">
-            <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>
     </div>
 </main>

lms/templates/student_profile/learner_profile.underscore

@@ -8,7 +8,7 @@
             </div>
         </div>
         <div class="ui-loading-error is-hidden">
-            <i class="fa fa-exclamation-triangle message-error" aria-hidden=true></i>
+            <span class="fa fa-exclamation-triangle message-error" aria-hidden="true"></span>
             <span class="copy"><%- gettext("An error occurred. Try loading the page again.") %></span>
         </div>
     </div>

lms/templates/student_profile/share_modal.underscore

 <div class="focusguard focusguard-start" tabindex="0"></div>
 <div class="badges-modal" tabindex="0">
-        <button class="close"><i class="fa fa-close" aria-hidden="true"></i><span class="sr"><%- gettext("Close") %></span></button>
+        <button class="close"><span class="fa fa-close" aria-hidden="true"></span><span class="sr"><%- gettext("Close") %></span></button>
     <h1 class="modal-header"><%- gettext("Share on Mozilla Backpack") %></h1>
     <p class="explanation"><%- gettext("To share your certificate on Mozilla Backpack, you must first have a Backpack account. Complete the following steps to add your certificate to Backpack.") %>
     </p>