From 009ebe40920d4563e62dbef6d168f0fa0ba3bc92 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 31 May 2023 17:18:56 -0500
Subject: [PATCH 1/5] fix: DES-2482 cms icons, role as none, only `i.fa`

---
 .../apps/accounts/js/new_institution.js       |   4 +-
 .../apps/accounts/manage_licenses.html        |   2 +-
 .../apps/accounts/notifications.html          |   2 +-
 .../designsafe/apps/accounts/profile.html     |   2 +-
 .../designsafe/apps/api/agave/preview.html    |   8 +-
 .../apps/api/data/agave/preview.html          |   2 +-
 .../designsafe/apps/dashboard/index.j2        |   2 +-
 .../templates/djangoRT/attachment.html        |   2 +-
 .../templates/djangoRT/navigation.html        |   4 +-
 .../djangoRT/templates/djangoRT/reply.html    |   6 +-
 .../djangoRT/templates/djangoRT/ticket.html   |   4 +-
 .../templates/djangoRT/ticketDetail.html      |  12 +-
 .../templates/djangoRT/ticketList.html        |   4 +-
 .../apps/licenses/ls-dyna_details.html        |   2 +-
 .../apps/licenses/matlab_details.html         |   2 +-
 .../designsafe/apps/nco/nco_index.j2          |   2 +-
 .../designsafe/apps/nco/ttc_grants.j2         |   2 +-
 .../designsafe/apps/rapid/admin.html          |   8 +-
 .../apps/rapid/admin_create_event.html        |   2 +-
 .../apps/rapid/admin_edit_event.html          |   2 +-
 .../apps/rapid/admin_event_add_dataset.html   |   2 +-
 .../apps/rapid/admin_event_datasets.html      |   2 +-
 .../apps/rapid/admin_event_edit_dataset.html  |   2 +-
 .../designsafe/apps/workspace/index.j2        |   2 +-
 .../controllers/application-edit.js           |   6 +-
 .../html/application-add-admin.html           |   2 +-
 .../applications/html/application-add.html    |   2 +-
 .../applications/html/application-clone.html  |   2 +-
 .../html/application-confirm.html             |   2 +-
 .../html/application-details.html             | 272 +++++++++---------
 .../applications/html/application-edit.html   |  80 +++++-
 .../applications/html/application-pems.html   |   2 +-
 .../html/application-systems-details.html     |   2 +-
 .../html/application-systems-role.html        |   2 +-
 .../html/application-tray-delete.html         |   2 +-
 .../applications/html/application-tray.html   |  40 +--
 .../dashboard/dashboard.component.html        |  12 +-
 .../files-listing.template.html               |  28 +-
 ...ion-advanced-search-checkbox.template.html |  10 +-
 .../publication-advanced-search.template.html |   4 +-
 .../publication-description.component.html    |   4 +-
 .../publications-legacy-listing.template.html |   6 +-
 .../publications-listing.template.html        |   8 +-
 .../data-depot-nav.component.html             |   8 +-
 .../data-depot-new.component.html             |  18 +-
 .../data-depot-toolbar.component.html         |  20 +-
 .../hazmapper-maps.component.html             |   4 +-
 .../curation-directory.component.html         |   2 +-
 .../amend-citation.template.html              |  16 +-
 .../amend-experimental.template.html          |  10 +-
 .../amend-field-recon.template.html           |  10 +-
 .../pipeline-amend/amend-other.template.html  |  10 +-
 .../pipeline-authors.component.html           |  30 +-
 .../pipeline-licenses.component.html          |  20 +-
 .../pipeline-other.component.html             |  16 +-
 .../pipeline-experiment.template.html         |  18 +-
 .../pipeline-field-recon.template.html        |  16 +-
 .../pipeline-hybrid.template.html             |  18 +-
 .../pipeline-simulation.template.html         |  18 +-
 .../pipeline-project.component.html           |  16 +-
 .../pipeline-publish/pipeline-agreement.html  |   8 +-
 .../pipeline-privacy-agreement.html           |  10 +-
 .../pipeline-selection-exp.template.html      |  24 +-
 .../pipeline-selection-field.template.html    |  22 +-
 .../pipeline-selection-hyb-sim.template.html  |  32 +--
 .../pipeline-selection-other.component.html   |  18 +-
 .../pipeline-selection-sim.template.html      |  24 +-
 .../pipeline-start.template.html              |   8 +-
 .../pipeline-sub-entity-exp.template.html     |  22 +-
 .../pipeline-sub-entity-field.template.html   |  16 +-
 .../pipeline-sub-entity-hyb-sim.template.html |  30 +-
 .../pipeline-sub-entity-sim.template.html     |  22 +-
 .../pipeline-team/pipeline-team.template.html |  20 +-
 .../version-changes.template.html             |  14 +-
 .../version-citation.template.html            |  12 +-
 .../version-experiment-citation.template.html |  12 +-
 ...version-experiment-selection.template.html |  14 +-
 ...ersion-field-recon-selection.template.html |  14 +-
 .../version-other-citation.template.html      |   8 +-
 .../version-other-selection.template.html     |   8 +-
 .../project-listing.component.html            |   6 +-
 .../project-view/project-view.component.html  |   2 +-
 .../author-information-modal.template.html    |   4 +-
 .../publication-popup.html                    |   6 +-
 ...ication-preview-field-recon.component.html |   6 +-
 ...publication-preview-hyb-sim.component.html |  16 +-
 .../publication-preview-other.component.html  |   4 +-
 .../publication-preview-sim.component.html    |   8 +-
 .../publication-preview.component.html        |   8 +-
 .../data-depot/components/published/fmt.html  |   8 +-
 .../published/published.component.html        |  28 +-
 .../components/published/published.html       |   2 +-
 .../data-depot/templates/view-project.html    |   8 +-
 designsafe/static/scripts/geo/html/help.html  |   8 +-
 designsafe/static/scripts/geo/html/index.html |   8 +-
 designsafe/static/scripts/geo/html/map.html   |  32 +--
 .../nco-scheduler-filters.template.html       |   8 +-
 .../nco-scheduler/nco-scheduler.template.html |   2 +-
 .../nco-ttc-grants.template.html              |   2 +-
 .../image-preview.template.html               |  12 +-
 ...ata-browser-service-preview.component.html |  16 +-
 .../data-browser-service-upload.template.html |  14 +-
 .../prj-pub-preview-metadata-template.html    |   4 +-
 .../scripts/notifications/html/badge.html     |   2 +-
 .../notifications/html/notification_list.html |   2 +-
 .../amend-entity.template.html                |   2 +-
 .../confirm-message.template.html             |   4 +-
 .../file-categories.template.html             |   2 +-
 .../file-category-selector.template.html      |   2 +-
 .../leave-feedback-modal.template.html        |   6 +-
 .../manage-authors.template.html              |  10 +-
 .../manage-categories.component.html          |   8 +-
 .../manage-experiments.template.html          |  12 +-
 ...age-field-recon-collections.component.html |   4 +-
 ...manage-field-recon-documents.template.html |  10 +-
 .../manage-field-recon-missions.template.html |  10 +-
 .../manage-hybrid-simulations.template.html   |  10 +-
 .../manage-project-type.template.html         |  54 ++--
 .../amend-project.template.html               |  10 +-
 .../manage-project.template.html              |  22 +-
 .../manage-simulations.template.html          |  10 +-
 .../project-tree/project-tree.template.html   |   8 +-
 .../publication-citation.template.html        |   2 +-
 .../publication-download.template.html        |   6 +-
 .../entity-metrics.template.html              |   8 +-
 .../publication-metrics.template.html         |  10 +-
 .../published-data-modal.template.html        |   4 +-
 .../static/scripts/rapid/html/index.html      |   8 +-
 .../scripts/rapid/html/rapid-admin-users.html |   2 +-
 .../components/search/search.component.html   |  10 +-
 .../application-tray.component.html           |   2 +-
 ...ce-data-browser-file-listing.template.html |   4 +-
 ...ce-data-browser-nees-listing.template.html |   6 +-
 ...data-browser-project-listing.template.html |   6 +-
 ...-browser-publication-listing.template.html |   6 +-
 .../workspace-data-browser.template.html      |   2 +-
 .../workspace/html/application-form.html      |   6 +-
 .../scripts/workspace/html/jobs-status.html   |   6 +-
 .../js-custom-select/js/customSelect.js       |   2 +-
 .../templates/includes/ef_navigation.html     |   4 +-
 designsafe/templates/includes/header.html     |   2 +-
 designsafe/templates/includes/navigation.html |   2 +-
 142 files changed, 866 insertions(+), 788 deletions(-)

diff --git a/designsafe/apps/accounts/static/designsafe/apps/accounts/js/new_institution.js b/designsafe/apps/accounts/static/designsafe/apps/accounts/js/new_institution.js
index 35489023c..10052ea8f 100644
--- a/designsafe/apps/accounts/static/designsafe/apps/accounts/js/new_institution.js
+++ b/designsafe/apps/accounts/static/designsafe/apps/accounts/js/new_institution.js
@@ -13,11 +13,11 @@ jQuery(function($) {
   updateNewInstitutionFieldStatus();
 
   $('#id_institutionId').children().last().wrap('<optgroup label="Not Listed"></optgroup>');
-  $('#id_institutionId').parent().after('<p><a tabindex="-1" href="#" id="id_institutionNotListed"><i class="fa fa-question-circle"></i> My Institution is not listed</a></p>')
+  $('#id_institutionId').parent().after('<p><a tabindex="-1" href="#" id="id_institutionNotListed"><i role="none" class="fa fa-question-circle"></i> My Institution is not listed</a></p>')
 
   $('#id_institutionNotListed').on('click', function(e) {
     e.preventDefault();
     $('#id_institutionId').val(-1).trigger('change');
   });
 
-});
\ No newline at end of file
+});
diff --git a/designsafe/apps/accounts/templates/designsafe/apps/accounts/manage_licenses.html b/designsafe/apps/accounts/templates/designsafe/apps/accounts/manage_licenses.html
index 0f05a1a6b..6a2cc2381 100644
--- a/designsafe/apps/accounts/templates/designsafe/apps/accounts/manage_licenses.html
+++ b/designsafe/apps/accounts/templates/designsafe/apps/accounts/manage_licenses.html
@@ -17,7 +17,7 @@ <h2>Software Licenses</h2>
                 <h3>
                     {{license.license_type}}
                     {% if license.current_user_license %}
-                        <span class="label label-success"><i class="fa fa-check-circle"></i> ACTIVE </span>
+                        <span class="label label-success"><i role="none" class="fa fa-check-circle"></i> ACTIVE </span>
                     {% else %}
                         <span class="label label-danger"> NOT ACTIVE </span>
                     {% endif %}
diff --git a/designsafe/apps/accounts/templates/designsafe/apps/accounts/notifications.html b/designsafe/apps/accounts/templates/designsafe/apps/accounts/notifications.html
index ccca6bb6d..fb5daab2d 100644
--- a/designsafe/apps/accounts/templates/designsafe/apps/accounts/notifications.html
+++ b/designsafe/apps/accounts/templates/designsafe/apps/accounts/notifications.html
@@ -54,7 +54,7 @@ <h4>Coming soon!</h4>
 
   {% else %}
     <div class="jumbotron text-center">
-      <i class="fa fa-bell fa-2x text-muted"></i>
+      <i role="none" class="fa fa-bell fa-2x text-muted"></i>
       <h2>No unread notifications.</h2>
       <p>
         You have no unread notifications.
diff --git a/designsafe/apps/accounts/templates/designsafe/apps/accounts/profile.html b/designsafe/apps/accounts/templates/designsafe/apps/accounts/profile.html
index dfd2e9900..5c0558e28 100644
--- a/designsafe/apps/accounts/templates/designsafe/apps/accounts/profile.html
+++ b/designsafe/apps/accounts/templates/designsafe/apps/accounts/profile.html
@@ -107,7 +107,7 @@ <h3>Research Interests</h3>
 
         <hr>
 
-        <a href="{% url 'designsafe_accounts:profile_edit' %}" class="btn btn-default"><i class="fa fa-edit"></i> Edit profile
+        <a href="{% url 'designsafe_accounts:profile_edit' %}" class="btn btn-default"><i role="none" class="fa fa-edit"></i> Edit profile
         </a>
 
     </div>
diff --git a/designsafe/apps/api/templates/designsafe/apps/api/agave/preview.html b/designsafe/apps/api/templates/designsafe/apps/api/agave/preview.html
index a40bb8748..4a43450c2 100644
--- a/designsafe/apps/api/templates/designsafe/apps/api/agave/preview.html
+++ b/designsafe/apps/api/templates/designsafe/apps/api/agave/preview.html
@@ -31,7 +31,7 @@
     {% if image_preview %}
         <div class="text-center">
             <img src="{{ image_preview }}" id="preview" style="max-width:100%;">
-            <!-- <div><i class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
+            <!-- <div><i role="none" class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
         </div>
         <!-- {% addtoblock 'js' %}
         <script type="text/javascript">
@@ -46,7 +46,7 @@
     {% elif text_preview %}
         <div class="embed-responsive embed-responsive-4by3">
             <pre class="embed-responsive-item">{{ text_preview }}</pre>
-            <!-- <div><i class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
+            <!-- <div><i role="none" class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
         </div>
     {% elif object_preview %}
         <!--
@@ -54,7 +54,7 @@
             <object data="{{ object_preview }}" width="100%" height="100%"></object>
         </div>
         -->
-        <!-- <div><i class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
+        <!-- <div><i role="none" class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
         <iframe class="embed-responsive-item"
                 src="https://docs.google.com/gview?url={{object_preview}}&embedded=true"
                 frameborder="0"
@@ -69,7 +69,7 @@
             })(jQuery);
         </script>
     {% elif iframe_preview %}
-        <!-- <div><i class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
+        <!-- <div><i role="none" class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div> -->
         <iframe class="embed-responsive-item"
                 src="{{iframe_preview}}"
                 frameborder="0"
diff --git a/designsafe/apps/api/templates/designsafe/apps/api/data/agave/preview.html b/designsafe/apps/api/templates/designsafe/apps/api/data/agave/preview.html
index fab300679..ee41500df 100644
--- a/designsafe/apps/api/templates/designsafe/apps/api/data/agave/preview.html
+++ b/designsafe/apps/api/templates/designsafe/apps/api/data/agave/preview.html
@@ -32,7 +32,7 @@
     {% if image_preview %}
         <div class="text-center">
             <img src="{{ image_preview }}" id="preview" style="max-width:100%;">
-            <div><i class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div>
+            <div><i role="none" class="fa fa-spinner fa-spin" style="font-size: 150px" id="loading_ind"></i></div>
         </div>
         {% addtoblock 'js' %}
         <script type="text/javascript">
diff --git a/designsafe/apps/dashboard/templates/designsafe/apps/dashboard/index.j2 b/designsafe/apps/dashboard/templates/designsafe/apps/dashboard/index.j2
index 676ea2d1d..b7feab885 100644
--- a/designsafe/apps/dashboard/templates/designsafe/apps/dashboard/index.j2
+++ b/designsafe/apps/dashboard/templates/designsafe/apps/dashboard/index.j2
@@ -14,7 +14,7 @@
     <div class="row">
       <div class="col-sm-12">
         <h1 class="headline headline-research">
-          <i class="fa fa-dashboard"></i>
+          <i role="none" class="fa fa-dashboard"></i>
           My Dashboard
         </h1>
       </div>
diff --git a/designsafe/apps/djangoRT/templates/djangoRT/attachment.html b/designsafe/apps/djangoRT/templates/djangoRT/attachment.html
index 0b186a0ee..a214c79d5 100755
--- a/designsafe/apps/djangoRT/templates/djangoRT/attachment.html
+++ b/designsafe/apps/djangoRT/templates/djangoRT/attachment.html
@@ -6,6 +6,6 @@
 <div class="container">
     <h2>Attachment : {{ title }} </h2>
     <pre>{{ attachment }}</pre>
-    <a href="{% url 'djangoRT:ticketdetail' ticketId %}"><i class="fa fa-reply"></i> Back to ticket</a>
+    <a href="{% url 'djangoRT:ticketdetail' ticketId %}"><i role="none" class="fa fa-reply"></i> Back to ticket</a>
 </div>
 {% endblock %}
diff --git a/designsafe/apps/djangoRT/templates/djangoRT/navigation.html b/designsafe/apps/djangoRT/templates/djangoRT/navigation.html
index 3aafa04c8..03ebc4aca 100755
--- a/designsafe/apps/djangoRT/templates/djangoRT/navigation.html
+++ b/designsafe/apps/djangoRT/templates/djangoRT/navigation.html
@@ -1,9 +1,9 @@
 <a class="btn btn-default btn-sm" href="{% url 'djangoRT:mytickets' %}">
-  <i class="fa fa-long-arrow-left"></i> Back to ticket listing
+  <i role="none" class="fa fa-long-arrow-left"></i> Back to ticket listing
 </a>
 
 {% if ticket_id %}
   <a class="btn btn-default btn-sm" href="{% url 'djangoRT:ticketdetail' ticket_id %}">
-    <i class="fa fa-long-arrow-left"></i> Back to ticket
+    <i role="none" class="fa fa-long-arrow-left"></i> Back to ticket
   </a>
 {% endif %}
diff --git a/designsafe/apps/djangoRT/templates/djangoRT/reply.html b/designsafe/apps/djangoRT/templates/djangoRT/reply.html
index d3d0f8fae..df6ad09fb 100755
--- a/designsafe/apps/djangoRT/templates/djangoRT/reply.html
+++ b/designsafe/apps/djangoRT/templates/djangoRT/reply.html
@@ -1,5 +1,5 @@
 <a class="btn btn-default btn-sm" href="{% url 'djangoRT:ticketreply' ticket.id %}">
-  <i class="fa fa-reply"></i>
+  <i role="none" class="fa fa-reply"></i>
   {% if ticket.Status == 'resolved' or ticket.Status == 'closed' %}
     Reopen this ticket
   {% else %}
@@ -8,11 +8,11 @@
 </a>
 {% if ticket.Status != 'resolved' and ticket.Status != 'closed' %}
 <a class="btn btn-default btn-sm" href="{% url 'djangoRT:ticketclose' ticket.id %}">
-  <i class="fa fa-times"></i>
+  <i role="none" class="fa fa-times"></i>
     Close this ticket
 </a>
  {% endif %}
 <a class="btn btn-default btn-sm" href="{% url 'djangoRT:mytickets' %}">
-  <i class="fa fa-home"></i>
+  <i role="none" class="fa fa-home"></i>
   Return to ticket listing
 </a>
diff --git a/designsafe/apps/djangoRT/templates/djangoRT/ticket.html b/designsafe/apps/djangoRT/templates/djangoRT/ticket.html
index ce5b95081..756d3424c 100755
--- a/designsafe/apps/djangoRT/templates/djangoRT/ticket.html
+++ b/designsafe/apps/djangoRT/templates/djangoRT/ticket.html
@@ -15,7 +15,7 @@
     <a class="btn btn-info"
        title="{% if ticket.Status == 'resolved' or ticket.Status == 'closed' %}Reopen this ticket{% else %}Reply to this ticket{% endif %}"
        href="{% url 'djangoRT:ticketreply' ticket.id %}">
-      <i class="fa fa-reply"></i>
+      <i role="none" class="fa fa-reply"></i>
       <span class="sr-only">
         {% if ticket.Status == 'resolved' or ticket.Status == 'closed' %}Reopen this ticket{% else %}Reply to this ticket{% endif %}
       </span>
@@ -24,7 +24,7 @@
       <a class="btn btn-danger"
          title="Close this ticket"
          href="{% url 'djangoRT:ticketclose' ticket.id %}">
-        <i class="fa fa-times"></i>
+        <i role="none" class="fa fa-times"></i>
         <span class="sr-only">Close this ticket</span>
       </a>
     {% endif %}
diff --git a/designsafe/apps/djangoRT/templates/djangoRT/ticketDetail.html b/designsafe/apps/djangoRT/templates/djangoRT/ticketDetail.html
index d0bb80ec5..519f109b8 100755
--- a/designsafe/apps/djangoRT/templates/djangoRT/ticketDetail.html
+++ b/designsafe/apps/djangoRT/templates/djangoRT/ticketDetail.html
@@ -20,12 +20,12 @@ <h1>{{ ticket.Subject }}<br><small>Ticket #{{ ticket_id }}</small></h1>
     <div>
         <b>Actions:</b>
         <a class="btn btn-info" href="{% url 'djangoRT:ticketreply' ticket.id %}">
-            <i class="fa fa-reply"></i>
+            <i role="none" class="fa fa-reply"></i>
             {% if ticket.Status == 'resolved' or ticket.Status == 'closed' %}Reopen this ticket{% else %}Reply to this ticket{% endif %}
         </a>
         {% if ticket.Status != 'resolved' and ticket.Status != 'closed' %}
         <a class="btn btn-danger" href="{% url 'djangoRT:ticketclose' ticket.id %}">
-            <i class="fa fa-times"></i> Close this ticket
+            <i role="none" class="fa fa-times"></i> Close this ticket
         </a>
         {% endif %}
     </div>
@@ -36,7 +36,7 @@ <h1>{{ ticket.Subject }}<br><small>Ticket #{{ ticket_id }}</small></h1>
             {% if history.Type == "Correspond" or history.Type == "Create" %}
             <div class="history-item history-item-{{history.Type|lower}}">
                 <h4>
-                    <i class="fa fa-{% if history.Type == "Correspond" %}comment{% elif history.Type == 'Create' %}plus-circle{% endif %}"></i>
+                    <i role="none" class="fa fa-{% if history.Type == "Correspond" %}comment{% elif history.Type == 'Create' %}plus-circle{% endif %}"></i>
                     {% localtime off %}
                         {{history.Created|date:"M j Y P"}}
                     {% endlocaltime %}
@@ -55,7 +55,7 @@ <h5>Attachments:</h5>
             {% elif history.Type == "Status" %}
             <div class="history-item history-item-{{history.Type|lower}}">
                 <blockquote>
-                    <i class="fa fa-bell"></i>
+                    <i role="none" class="fa fa-bell"></i>
                     {{history.Description }}<br>
                     {% localtime off %}
                         {{history.Created|date:"M j Y P"}}
@@ -70,12 +70,12 @@ <h5>Attachments:</h5>
     <div>
         <b>Actions:</b>
         <a class="btn btn-info" href="{% url 'djangoRT:ticketreply' ticket.id %}">
-            <i class="fa fa-reply"></i>
+            <i role="none" class="fa fa-reply"></i>
             {% if ticket.Status == 'resolved' or ticket.Status == 'closed' %}Reopen this ticket{% else %}Reply to this ticket{% endif %}
         </a>
         {% if ticket.Status != 'resolved' and ticket.Status != 'closed' %}
         <a class="btn btn-danger" href="{% url 'djangoRT:ticketclose' ticket.id %}">
-            <i class="fa fa-times"></i> Close this ticket
+            <i role="none" class="fa fa-times"></i> Close this ticket
         </a>
         {% endif %}
     </div>
diff --git a/designsafe/apps/djangoRT/templates/djangoRT/ticketList.html b/designsafe/apps/djangoRT/templates/djangoRT/ticketList.html
index c34e88e5b..49669b16c 100755
--- a/designsafe/apps/djangoRT/templates/djangoRT/ticketList.html
+++ b/designsafe/apps/djangoRT/templates/djangoRT/ticketList.html
@@ -16,7 +16,7 @@
   <h1>My Tickets</h1>
 
   <a class="btn btn-primary" href="{% url 'djangoRT:ticketcreate' %}">
-    <i class="fa fa-plus-circle"></i>
+    <i role="none" class="fa fa-plus-circle"></i>
     Create a new ticket
   </a>
 
@@ -43,7 +43,7 @@ <h3>
   <form action="">
     <div class="form-group">
       <div class="input-group">
-        <span class="input-group-addon"><i class="fa fa-filter"></i></span>
+        <span class="input-group-addon"><i role="none" class="fa fa-filter"></i></span>
         <input class="form-control search" type="text" id="search" placeholder="Filter tickets">
       </div>
     </div>
diff --git a/designsafe/apps/licenses/templates/designsafe/apps/licenses/ls-dyna_details.html b/designsafe/apps/licenses/templates/designsafe/apps/licenses/ls-dyna_details.html
index 56994f57e..4273cd8c2 100644
--- a/designsafe/apps/licenses/templates/designsafe/apps/licenses/ls-dyna_details.html
+++ b/designsafe/apps/licenses/templates/designsafe/apps/licenses/ls-dyna_details.html
@@ -1,5 +1,5 @@
 <p>
-    Access to <a href="http://www.lstc.com/products/ls-dyna" target="_blank">LS-DYNA <i class="fa fa-external-link"></i></a> requires
+    Access to <a href="http://www.lstc.com/products/ls-dyna" target="_blank">LS-DYNA <i role="none" class="fa fa-external-link"></i></a> requires
     that we verify with LSTC that you have a valid Academic Department License. You can acquire such a license from
     <a href="http://www.lstc.com/sales" target="_blank">LSTC Sales</a>.
 </p>
diff --git a/designsafe/apps/licenses/templates/designsafe/apps/licenses/matlab_details.html b/designsafe/apps/licenses/templates/designsafe/apps/licenses/matlab_details.html
index d49936689..adf4461c3 100644
--- a/designsafe/apps/licenses/templates/designsafe/apps/licenses/matlab_details.html
+++ b/designsafe/apps/licenses/templates/designsafe/apps/licenses/matlab_details.html
@@ -1,5 +1,5 @@
 <p>
-    <a href="http://www.mathworks.com/" target="_blank">Mathworks' MATLAB <i class="fa fa-external-link"></i></a>
+    <a href="http://www.mathworks.com/" target="_blank">Mathworks' MATLAB <i role="none" class="fa fa-external-link"></i></a>
     is available to Academic users in Tools & Applications but requires activation.
 </p>
 <p>
diff --git a/designsafe/apps/nco/templates/designsafe/apps/nco/nco_index.j2 b/designsafe/apps/nco/templates/designsafe/apps/nco/nco_index.j2
index 6129d1229..1939980ad 100644
--- a/designsafe/apps/nco/templates/designsafe/apps/nco/nco_index.j2
+++ b/designsafe/apps/nco/templates/designsafe/apps/nco/nco_index.j2
@@ -59,7 +59,7 @@ NHERI Facilities Scheduling Dashbaord
     <!-- SCHEDULER VIEW -->
     <nco-scheduler>
       <div class="bg-info text-info" data-ng-if="!$ctrl.initialized">
-        <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
       </div>
     </nco-scheduler>
 
diff --git a/designsafe/apps/nco/templates/designsafe/apps/nco/ttc_grants.j2 b/designsafe/apps/nco/templates/designsafe/apps/nco/ttc_grants.j2
index f6d17f8cb..0c88a5410 100644
--- a/designsafe/apps/nco/templates/designsafe/apps/nco/ttc_grants.j2
+++ b/designsafe/apps/nco/templates/designsafe/apps/nco/ttc_grants.j2
@@ -22,7 +22,7 @@ NHERI Facilities Scheduling Dashbaord
         <!-- Grants VIEW -->
         <nco-ttc-grants>
             <div class="bg-info text-info" data-ng-if="!$ctrl.initialized">
-                <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
             </div>
         </nco-ttc-grants>
     </div>
diff --git a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin.html b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin.html
index 2d2095bb1..25ecb9f7b 100644
--- a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin.html
+++ b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin.html
@@ -9,7 +9,7 @@
       <div class="col-md-12">
         <h1> Recon Admin </h1>
         <a class="btn btn-success" href="{% url 'designsafe_rapid:admin_create_event' %}" target="_self">
-          <i class="fa fa-plus"> Create New Recon Event </i>
+          <i role="none" class="fa fa-plus"> Create New Recon Event </i>
         </a>
         <a class="btn btn-default pull-right" href="{% url 'designsafe_rapid:admin_users' %}" target="_self"> Recon User Admin </a>
         <hr>
@@ -37,18 +37,18 @@ <h1> Recon Admin </h1>
               <td> {{event.created_date}} </td>
               <td>
                 <a href="{% url 'designsafe_rapid:admin_edit_event' event.meta|private:'id' %}" class="btn btn-sm btn-info" target="_self">
-                  <i class="fa fa-file"> </i> Edit
+                  <i role="none" class="fa fa-file"> </i> Edit
                 </a>
               </td>
               <td>
                 <a href="{% url 'designsafe_rapid:admin_event_datasets' event.meta|private:'id' %}" class="btn btn-sm btn-info" target="_self">
-                  <i class="fa fa-database"> </i> Datasets
+                  <i role="none" class="fa fa-database"> </i> Datasets
                 </a>
               </td>
               <td>
                 <form action="{% url 'designsafe_rapid:admin_delete_event' event.meta|private:'id'  %}" method="POST">
                   {% csrf_token %}
-                  <button class="btn btn-sm btn-danger"> <i class="fa fa-trash"> </i> Delete Event </button>
+                  <button class="btn btn-sm btn-danger"> <i role="none" class="fa fa-trash"> </i> Delete Event </button>
               </td>
 
             </tr>
diff --git a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_create_event.html b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_create_event.html
index 92d4dd576..a5ba509d6 100644
--- a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_create_event.html
+++ b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_create_event.html
@@ -20,7 +20,7 @@ <h2> Create a Recon Natural Hazard Event </h2>
           {% csrf_token %}
           {% bootstrap_form form %}
           <div class="form-group">
-            <button type="submit" class="btn btn-success"> <i class="fa fa-file"></i> Save</button>
+            <button type="submit" class="btn btn-success"> <i role="none" class="fa fa-file"></i> Save</button>
           </div>
         </form>
       </div>
diff --git a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_edit_event.html b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_edit_event.html
index 2a0755f2d..bd45ee1a1 100644
--- a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_edit_event.html
+++ b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_edit_event.html
@@ -28,7 +28,7 @@ <h2> Edit Natural Hazard Event </h2>
             </div>
           {% endif %}
           <div class="form-group">
-            <button type="submit" class="btn btn-success"> <i class="fa fa-file"></i> Save</button>
+            <button type="submit" class="btn btn-success"> <i role="none" class="fa fa-file"></i> Save</button>
           </div>
         </form>
       </div>
diff --git a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_add_dataset.html b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_add_dataset.html
index 55ab3881e..7633639bf 100644
--- a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_add_dataset.html
+++ b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_add_dataset.html
@@ -21,7 +21,7 @@ <h2> Add dataset to event: {{event.title}}</h2>
           {% csrf_token %}
           {% bootstrap_form form %}
           <div class="form-group">
-            <button type="submit" class="btn btn-success"> <i class="fa fa-file"></i> Save</button>
+            <button type="submit" class="btn btn-success"> <i role="none" class="fa fa-file"></i> Save</button>
           </div>
         </form>
       </div>
diff --git a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_datasets.html b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_datasets.html
index ca6943f42..9c83f8d77 100644
--- a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_datasets.html
+++ b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_datasets.html
@@ -16,7 +16,7 @@
       <div class="col-md-12">
         <h2> Datasets for event: "{{event.title}}" </h2>
         <a class="btn btn-success" href="{% url 'designsafe_rapid:admin_event_add_dataset' event.meta|private:'id' %}" target="_self">
-          <i class="fa fa-plus"> Create New Dataset </i>
+          <i role="none" class="fa fa-plus"> Create New Dataset </i>
         </a>
       </div>
     </div>
diff --git a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_edit_dataset.html b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_edit_dataset.html
index b5e77563c..383023b35 100644
--- a/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_edit_dataset.html
+++ b/designsafe/apps/rapid/templates/designsafe/apps/rapid/admin_event_edit_dataset.html
@@ -21,7 +21,7 @@ <h2> Modify dataset to Recon Hazard Event </h2>
           {% csrf_token %}
           {% bootstrap_form form %}
           <div class="form-group">
-            <button type="submit" class="btn btn-success"> <i class="fa fa-file"></i> Save</button>
+            <button type="submit" class="btn btn-success"> <i role="none" class="fa fa-file"></i> Save</button>
           </div>
         </form>
       </div>
diff --git a/designsafe/apps/workspace/templates/designsafe/apps/workspace/index.j2 b/designsafe/apps/workspace/templates/designsafe/apps/workspace/index.j2
index 4215ed1e7..8228cd8dc 100644
--- a/designsafe/apps/workspace/templates/designsafe/apps/workspace/index.j2
+++ b/designsafe/apps/workspace/templates/designsafe/apps/workspace/index.j2
@@ -8,7 +8,7 @@
         <span class="hl hl-research">Tools & Applications</span>
     </h1>
     <div>
-        <a href="{% url 'pages-details-by-slug' slug='rw/user-guide/workspace' %}"><i class="fa fa-question-circle"></i> Learn About <b>Tools & Applications.</b></a>
+        <a href="{% url 'pages-details-by-slug' slug='rw/user-guide/workspace' %}"><i role="none" class="fa fa-question-circle"></i> Learn About <b>Tools & Applications.</b></a>
     </div>
 </div>
 
diff --git a/designsafe/static/scripts/applications/controllers/application-edit.js b/designsafe/static/scripts/applications/controllers/application-edit.js
index b1c351ae6..9c61f5be0 100644
--- a/designsafe/static/scripts/applications/controllers/application-edit.js
+++ b/designsafe/static/scripts/applications/controllers/application-edit.js
@@ -716,7 +716,7 @@ export function applicationEditCtrl(window, angular, $, _) {
                                 {
                                     "key": "deploymentPath",
                                     "type": "template",
-                                    "template": '<div class="form-group has-success has-feedback"><label for="input" class="control-label">{{form.title}}</label><div class="input-group"><input type="text" class="form-control" id="input" ng-model="model.deploymentPath" ng-change="form.validate(form)"><a href="#" class="input-group-addon" ng-click="form.validatePath($event, form)"><span ng-show="form.requesting"><i class="fa fa-circle-o-notch fa-spin"></i></span><span ng-show="!form.requesting">Check File</span></a></div> <span class="help-block">{{form.description}}</span></div>',
+                                    "template": '<div class="form-group has-success has-feedback"><label for="input" class="control-label">{{form.title}}</label><div class="input-group"><input type="text" class="form-control" id="input" ng-model="model.deploymentPath" ng-change="form.validate(form)"><a href="#" class="input-group-addon" ng-click="form.validatePath($event, form)"><span ng-show="form.requesting"><i role="none" class="fa fa-circle-o-notch fa-spin"></i></span><span ng-show="!form.requesting">Check File</span></a></div> <span class="help-block">{{form.description}}</span></div>',
                                     validate: function(form) {
                                         if (!$scope.model.deploymentPath) {
                                             form.description = 'Missing required'
@@ -768,7 +768,7 @@ export function applicationEditCtrl(window, angular, $, _) {
                                 {
                                     "key": "templatePath",
                                     "type": "template",
-                                    "template": '<div class="form-group has-success has-feedback"><label for="input" class="control-label">{{form.title}}</label><div class="input-group"><input type="text" class="form-control" id="input" ng-model="model.templatePath" ng-change="form.validate(form)"><a href="#" class="input-group-addon" ng-click="form.validatePath($event, form)"><span ng-show="form.requesting"><i class="fa fa-circle-o-notch fa-spin"></i></span><span ng-show="!form.requesting">Check File</span></a></div> <span class="help-block">{{form.description}}</span></div>',
+                                    "template": '<div class="form-group has-success has-feedback"><label for="input" class="control-label">{{form.title}}</label><div class="input-group"><input type="text" class="form-control" id="input" ng-model="model.templatePath" ng-change="form.validate(form)"><a href="#" class="input-group-addon" ng-click="form.validatePath($event, form)"><span ng-show="form.requesting"><i role="none" class="fa fa-circle-o-notch fa-spin"></i></span><span ng-show="!form.requesting">Check File</span></a></div> <span class="help-block">{{form.description}}</span></div>',
                                     validate: function(form) {
                                         if (!$scope.model.templatePath) {
                                             form.description = 'Missing required'
@@ -803,7 +803,7 @@ export function applicationEditCtrl(window, angular, $, _) {
                                 {
                                     "key": "testPath",
                                     "type": "template",
-                                    "template": '<div class="form-group has-success has-feedback"><label for="input" class="control-label">{{form.title}}</label><div class="input-group"><input type="text" class="form-control" id="input" ng-model="model.testPath" ng-change="form.validate(form)"><a href="#" class="input-group-addon" ng-click="form.validatePath($event, form)"><span ng-show="form.requesting"><i class="fa fa-circle-o-notch fa-spin"></i></span><span ng-show="!form.requesting">Check File</span></a></div> <span class="help-block">{{form.description}}</span></div>',
+                                    "template": '<div class="form-group has-success has-feedback"><label for="input" class="control-label">{{form.title}}</label><div class="input-group"><input type="text" class="form-control" id="input" ng-model="model.testPath" ng-change="form.validate(form)"><a href="#" class="input-group-addon" ng-click="form.validatePath($event, form)"><span ng-show="form.requesting"><i role="none" class="fa fa-circle-o-notch fa-spin"></i></span><span ng-show="!form.requesting">Check File</span></a></div> <span class="help-block">{{form.description}}</span></div>',
                                     validate: function(form) {
                                         if (!$scope.model.testPath) {
                                             form.description = 'Missing required'
diff --git a/designsafe/static/scripts/applications/html/application-add-admin.html b/designsafe/static/scripts/applications/html/application-add-admin.html
index 7e6f6bd3c..43b612178 100644
--- a/designsafe/static/scripts/applications/html/application-add-admin.html
+++ b/designsafe/static/scripts/applications/html/application-add-admin.html
@@ -8,7 +8,7 @@
   </form>
 </div>
 <div class="text-center" ng-show="requesting">
-  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+  <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
   <div>Loading...</div>
 </div>
 <div ng-show="addModel.select === 'Custom' && !requesting">
diff --git a/designsafe/static/scripts/applications/html/application-add.html b/designsafe/static/scripts/applications/html/application-add.html
index ed2d5ea54..8bf479d58 100644
--- a/designsafe/static/scripts/applications/html/application-add.html
+++ b/designsafe/static/scripts/applications/html/application-add.html
@@ -1,6 +1,6 @@
 <p ng-show="error" class="alert alert-danger">{{error}}</p>
 <div class="text-center" ng-show="requesting">
-  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+  <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
   <div>Loading...</div>
 </div>
 <div ng-show="!requesting">
diff --git a/designsafe/static/scripts/applications/html/application-clone.html b/designsafe/static/scripts/applications/html/application-clone.html
index 374d88f3b..9a3f49506 100644
--- a/designsafe/static/scripts/applications/html/application-clone.html
+++ b/designsafe/static/scripts/applications/html/application-clone.html
@@ -20,7 +20,7 @@ <h3>DesignSafe-CI Apps Developer</h3>
 <div class="modal-body" ng-show="clone">
     <p ng-show="error" class="alert alert-danger top-buffer">{{error}}</p>
     <div class="text-center" ng-show="requesting">
-        <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+        <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
         <div>Loading...</div>
     </div>
     <div ng-show="!requesting">
diff --git a/designsafe/static/scripts/applications/html/application-confirm.html b/designsafe/static/scripts/applications/html/application-confirm.html
index 4d7a71b13..98ce46ee8 100644
--- a/designsafe/static/scripts/applications/html/application-confirm.html
+++ b/designsafe/static/scripts/applications/html/application-confirm.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">Confirm {{action}}</h3>
     <div class="modal-body">
       <p ng-show="error" class="alert alert-danger">{{error}}</p>
       <p class="text-center" ng-show="requesting">
-        <i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
+        <i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i>
       </p>
       <p ng-show="!requesting">
         Are you sure you want to {{action}} <strong>{{appMeta.value.definition.id}}</strong>?
diff --git a/designsafe/static/scripts/applications/html/application-details.html b/designsafe/static/scripts/applications/html/application-details.html
index dcf25fbef..7632d2839 100644
--- a/designsafe/static/scripts/applications/html/application-details.html
+++ b/designsafe/static/scripts/applications/html/application-details.html
@@ -1,136 +1,136 @@
-<div modal="appDetailsModal">
-    <div class="modal-header">
-      <h3 class="modal-title">Application Details</h3>
-    </div>
-    <div class="modal-body">
-      <p ng-show="error" class="alert alert-danger">{{error}}</p>
-      <div class="text-center" ng-show="requesting">
-          <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
-      </div>
-      <div ng-if="appMeta && !requesting">
-        <div ng-switch="appMeta.value.type">
-          <div ng-switch-when="html">
-
-            <div class="table-responsive">
-              <table class="table table-bordered">
-                <tbody>
-                  <tr ng-if="appMeta.value.definition.id">
-                    <td>ID</td>
-                    <td><strong>{{appMeta.value.definition.id}}</strong></td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.owner">
-                    <td>Owner</td>
-                    <td>{{appMeta.value.definition.owner}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.label">
-                    <td>Name</td>
-                    <td>{{appMeta.value.definition.label}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.appCategory">
-                    <td>Category</td>
-                    <td>{{appMeta.value.definition.appCategory}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.appIcon">
-                    <td>Icon</td>
-                    <td>{{appMeta.value.definition.appIcon}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.shortDescription">
-                    <td>Description</td>
-                    <td>{{appMeta.value.definition.shortDescription}}</td>
-                  </tr>
-                  <tr>
-                    <td>Public</td>
-                    <td>{{appMeta.value.definition.isPublic}}</td>
-                  </tr>
-                  <tr>
-                    <td>Available</td>
-                    <td>{{appMeta.value.definition.available}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.html">
-                    <td>HTML</td>
-                    <td><div ng-bind-html="appMeta.value.definition.html | toTrusted"></div></td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div ng-switch-when="agave">
-            <div ng-if="appMeta" class="table-responsive">
-              <table class="table table-bordered">
-                <tbody>
-                 <tr ng-if="appMeta.value.definition.id">
-                   <td>ID</td>
-                   <td><strong>{{appMeta.value.definition.id}}</strong></td>
-                 </tr>
-                  <tr ng-if="appMeta.value.definition.owner">
-                    <td>Owner</td>
-                    <td>{{appMeta.value.definition.owner}}</td>
-                  </tr>
-                 <tr ng-if="appMeta.value.definition.name">
-                   <td>Name</td>
-                   <td>{{appMeta.value.definition.name}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.shortDescription">
-                   <td>Description</td>
-                   <td>{{appMeta.value.definition.shortDescription}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.label">
-                   <td>Label</td>
-                   <td>{{appMeta.value.definition.label}}</td>
-                 </tr>
-                <tr ng-if="appMeta.value.definition.appCategory">
-                  <td>Category</td>
-                  <td>{{appMeta.value.definition.appCategory}}</td>
-                </tr>
-                <tr ng-if="appMeta.value.definition.appIcon">
-                  <td>Icon</td>
-                  <td>{{appMeta.value.definition.appIcon}}</td>
-                </tr>
-                 <tr>
-                   <td>Public</td>
-                   <td>{{appMeta.value.definition.isPublic}}</td>
-                 </tr>
-                 <tr>
-                   <td>Available</td>
-                   <td>{{appMeta.value.definition.available}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.deploymentSystem">
-                   <td>Deployment System</td>
-                   <td>{{appMeta.value.definition.deploymentSystem}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.deploymentPath">
-                   <td>Deployment Path</td>
-                   <td>{{appMeta.value.definition.deploymentPath}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.executionSystem">
-                   <td>Execution System</td>
-                   <td>{{appMeta.value.definition.executionSystem}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.executionType">
-                   <td>Execution Type</td>
-                   <td>{{appMeta.value.definition.executionType}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.parallelism">
-                   <td>Parallelism</td>
-                   <td>{{appMeta.value.definition.parallelism}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.revision">
-                   <td>Revision</td>
-                   <td>{{appMeta.value.definition.revision}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.lastModified">
-                   <td>Last Modified</td>
-                   <td>{{appMeta.value.definition.lastModified}}</td>
-                 </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    <div class="modal-footer top-buffer">
-      <div class="text-center">
-        <button class="btn btn-default" ng-click="cancel()">Exit</button>
-      </div>
-    </div>
-</div>
+<div modal="appDetailsModal">
+    <div class="modal-header">
+      <h3 class="modal-title">Application Details</h3>
+    </div>
+    <div class="modal-body">
+      <p ng-show="error" class="alert alert-danger">{{error}}</p>
+      <div class="text-center" ng-show="requesting">
+          <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+      </div>
+      <div ng-if="appMeta && !requesting">
+        <div ng-switch="appMeta.value.type">
+          <div ng-switch-when="html">
+
+            <div class="table-responsive">
+              <table class="table table-bordered">
+                <tbody>
+                  <tr ng-if="appMeta.value.definition.id">
+                    <td>ID</td>
+                    <td><strong>{{appMeta.value.definition.id}}</strong></td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.owner">
+                    <td>Owner</td>
+                    <td>{{appMeta.value.definition.owner}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.label">
+                    <td>Name</td>
+                    <td>{{appMeta.value.definition.label}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.appCategory">
+                    <td>Category</td>
+                    <td>{{appMeta.value.definition.appCategory}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.appIcon">
+                    <td>Icon</td>
+                    <td>{{appMeta.value.definition.appIcon}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.shortDescription">
+                    <td>Description</td>
+                    <td>{{appMeta.value.definition.shortDescription}}</td>
+                  </tr>
+                  <tr>
+                    <td>Public</td>
+                    <td>{{appMeta.value.definition.isPublic}}</td>
+                  </tr>
+                  <tr>
+                    <td>Available</td>
+                    <td>{{appMeta.value.definition.available}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.html">
+                    <td>HTML</td>
+                    <td><div ng-bind-html="appMeta.value.definition.html | toTrusted"></div></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div ng-switch-when="agave">
+            <div ng-if="appMeta" class="table-responsive">
+              <table class="table table-bordered">
+                <tbody>
+                 <tr ng-if="appMeta.value.definition.id">
+                   <td>ID</td>
+                   <td><strong>{{appMeta.value.definition.id}}</strong></td>
+                 </tr>
+                  <tr ng-if="appMeta.value.definition.owner">
+                    <td>Owner</td>
+                    <td>{{appMeta.value.definition.owner}}</td>
+                  </tr>
+                 <tr ng-if="appMeta.value.definition.name">
+                   <td>Name</td>
+                   <td>{{appMeta.value.definition.name}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.shortDescription">
+                   <td>Description</td>
+                   <td>{{appMeta.value.definition.shortDescription}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.label">
+                   <td>Label</td>
+                   <td>{{appMeta.value.definition.label}}</td>
+                 </tr>
+                <tr ng-if="appMeta.value.definition.appCategory">
+                  <td>Category</td>
+                  <td>{{appMeta.value.definition.appCategory}}</td>
+                </tr>
+                <tr ng-if="appMeta.value.definition.appIcon">
+                  <td>Icon</td>
+                  <td>{{appMeta.value.definition.appIcon}}</td>
+                </tr>
+                 <tr>
+                   <td>Public</td>
+                   <td>{{appMeta.value.definition.isPublic}}</td>
+                 </tr>
+                 <tr>
+                   <td>Available</td>
+                   <td>{{appMeta.value.definition.available}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.deploymentSystem">
+                   <td>Deployment System</td>
+                   <td>{{appMeta.value.definition.deploymentSystem}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.deploymentPath">
+                   <td>Deployment Path</td>
+                   <td>{{appMeta.value.definition.deploymentPath}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.executionSystem">
+                   <td>Execution System</td>
+                   <td>{{appMeta.value.definition.executionSystem}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.executionType">
+                   <td>Execution Type</td>
+                   <td>{{appMeta.value.definition.executionType}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.parallelism">
+                   <td>Parallelism</td>
+                   <td>{{appMeta.value.definition.parallelism}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.revision">
+                   <td>Revision</td>
+                   <td>{{appMeta.value.definition.revision}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.lastModified">
+                   <td>Last Modified</td>
+                   <td>{{appMeta.value.definition.lastModified}}</td>
+                 </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    <div class="modal-footer top-buffer">
+      <div class="text-center">
+        <button class="btn btn-default" ng-click="cancel()">Exit</button>
+      </div>
+    </div>
+</div>
diff --git a/designsafe/static/scripts/applications/html/application-edit.html b/designsafe/static/scripts/applications/html/application-edit.html
index faa70d3fc..535a822f3 100644
--- a/designsafe/static/scripts/applications/html/application-edit.html
+++ b/designsafe/static/scripts/applications/html/application-edit.html
@@ -1 +1,79 @@
-<p ng-show="error" class="alert alert-danger">{{error}}</p>
<div class="text-center" ng-show="requesting">
  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
  <div>Loading...</div>
</div>
<div ng-show="editModel.type === 'html' && !requesting">
  <div class="row">
    <div class="col-md-6">
      <form
        name="myCustomForm"
        sf-schema="customSchema"
        sf-form="customForm"
        sf-model="customModel"
        >
      </form>
    </div>
    <div class="col-md-6">
      <b>HTML Content Preview</b>
      <div ng-bind-html="customModel.html | toTrusted"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="schema-form-actions">
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div ng-show="editModel.type === 'agave' && !requesting">
  <div class="row">
      <div class="col-md-6">
        <div class="text-center">
            <i class=" icon-layers font-red"></i>
            <span>
                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>
            </span>
        </div>
      </div>
      <div class="col-md-6">
          <div class="">
              <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <form
                    name="myForm"
                    class="form-wizard"
                    sf-schema="schema"
                    sf-form="form"
                    sf-model="model"
                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"
                    ng-submit="submit()"
                    no-validate>
            </form>
            <div class="col-md-12 schema-form-actions top-buffer">
              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>

              <div class="btn-group pull-right">
                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>
                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
              </div>
            </div>
        </div>
        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>
        </div>
      </div>
  </div>
</div>
\ No newline at end of file
+<p ng-show="error" class="alert alert-danger">{{error}}</p> role="none" class="fa 
+<div class="text-center" ng-show="requesting">
+  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+  <div>Loading...</div>
+</div>
+<div ng-show="editModel.type === 'html' && !requesting">
+  <div class="row">
+    <div class="col-md-6">
+      <form
+        name="myCustomForm"
+        sf-schema="customSchema"
+        sf-form="customForm"
+        sf-model="customModel"
+        >
+      </form>
+    </div>
+    <div class="col-md-6">
+      <b>HTML Content Preview</b>
+      <div ng-bind-html="customModel.html | toTrusted"></div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6">
+      <div class="schema-form-actions">
+        <div class="btn-group pull-right">
+          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div ng-show="editModel.type === 'agave' && !requesting">
+  <div class="row">
+      <div class="col-md-6">
+        <div class="text-center">
+            <i class=" icon-layers font-red"></i>
+            <span>
+                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>
+            </span>
+        </div>
+      </div>
+      <div class="col-md-6">
+          <div class="">
+              <div class="btn-group" data-toggle="buttons">
+                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>
+                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>
+                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>
+              </div>
+          </div>
+      </div>
+  </div>
+  <div class="row">
+      <div class="col-md-12">
+        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
+            <form
+                    name="myForm"
+                    class="form-wizard"
+                    sf-schema="schema"
+                    sf-form="form"
+                    sf-model="model"
+                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"
+                    ng-submit="submit()"
+                    no-validate>
+            </form>
+            <div class="col-md-12 schema-form-actions top-buffer">
+              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>
+
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>
+                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
+              </div>
+            </div>
+        </div>
+        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
+            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>
+        </div>
+      </div>
+  </div>
+</div>
diff --git a/designsafe/static/scripts/applications/html/application-pems.html b/designsafe/static/scripts/applications/html/application-pems.html
index d2b06993a..0aaeaea7c 100644
--- a/designsafe/static/scripts/applications/html/application-pems.html
+++ b/designsafe/static/scripts/applications/html/application-pems.html
@@ -7,7 +7,7 @@ <h4 class="modal-title">App Permissions</h4>
   <p> The current permissions are listed below. You may add, updated, or delete them as needed </p>
 
     <div class="row text-center" ng-show="requesting">
-        <i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
+        <i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i>
     </div>
     <div class="row" ng-if="!requesting">
         <div class="col-md-12">
diff --git a/designsafe/static/scripts/applications/html/application-systems-details.html b/designsafe/static/scripts/applications/html/application-systems-details.html
index 63ac51391..755eafbb7 100644
--- a/designsafe/static/scripts/applications/html/application-systems-details.html
+++ b/designsafe/static/scripts/applications/html/application-systems-details.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">System Details</h3>
     <div class="modal-body">
       <p ng-show="error" class="alert alert-danger">{{error}}</p>
       <div class="text-center" ng-show="requesting">
-          <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+          <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
       </div>
       <div ng-if="systemDetails">
         <div ng-switch="systemDetails.value.type">
diff --git a/designsafe/static/scripts/applications/html/application-systems-role.html b/designsafe/static/scripts/applications/html/application-systems-role.html
index 17fff40a9..9dfa02bb7 100644
--- a/designsafe/static/scripts/applications/html/application-systems-role.html
+++ b/designsafe/static/scripts/applications/html/application-systems-role.html
@@ -23,7 +23,7 @@ <h3 class="modal-title">Apps Developer Permissions</h3>
 </div>
 <div class="row text-center" ng-show="$ctrl.requesting">
   <div class="col-md-12">
-    <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+    <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
     <div>Loading...</div>
   </div>
 </div>
diff --git a/designsafe/static/scripts/applications/html/application-tray-delete.html b/designsafe/static/scripts/applications/html/application-tray-delete.html
index 6ca6409ef..8843a294a 100644
--- a/designsafe/static/scripts/applications/html/application-tray-delete.html
+++ b/designsafe/static/scripts/applications/html/application-tray-delete.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">Remove App Tray</h3>
     <div class="modal-body">
       <p ng-show="error" class="alert alert-danger">{{error}}</p>
       <p class="text-center" ng-show="requesting">
-        <i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
+        <i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i>
       </p>
       <p ng-show="!requesting">
         Are you sure you want to delete <strong>{{tab.title}}</strong> tray?
diff --git a/designsafe/static/scripts/applications/html/application-tray.html b/designsafe/static/scripts/applications/html/application-tray.html
index d684c369d..c02bf5a4a 100644
--- a/designsafe/static/scripts/applications/html/application-tray.html
+++ b/designsafe/static/scripts/applications/html/application-tray.html
@@ -5,7 +5,7 @@
 
     <div ng-show="!data.apps">
         <div class="text-center" ng-show="requesting">
-            <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+            <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
             <div>Loading...</div>
         </div>
     </div>
@@ -14,7 +14,7 @@
       <div class="col-lg-12">
         <div class="input-group">
           <span class="input-group-btn">
-            <span class="btn btn-default"><i class="fa fa-filter"></i></span>
+            <span class="btn btn-default"><i role="none" class="fa fa-filter"></i></span>
           </span>
           <input type="text" class="form-control" placeholder="Search" ng-model="query">
         </div>
@@ -22,7 +22,7 @@
     </div>
 
     <div class="pull-right" ng-if="!requesting">
-      <button class="btn btn-default btn-tab ng-scope" ng-click="syncApps()"><i class="fa fa-refresh fa-lg"></i></button>
+      <button class="btn btn-default btn-tab ng-scope" ng-click="syncApps()"><i role="none" class="fa fa-refresh fa-lg"></i></button>
     </div>
 
     <uib-tabset ng-show="!requesting" class="top-buffer" active="activeTab">
@@ -36,22 +36,22 @@
               <span>{{tab.title}} </span>
             </div>
             <div ng-switch-default>
-              <span>{{tab.title}} <i class="fa fa-times" aria-hidden="true" ng-click="removeTab($event, $index, tab)"></i></span>
+              <span>{{tab.title}} <i role="none" class="fa fa-times" aria-hidden="true" ng-click="removeTab($event, $index, tab)"></i></span>
             </div>
           </div>
         </uib-tab-heading>
 
         <div class="top-buffer">
-          <span class="text-left"><i class="fa fa-cube fa-2x enabled"></i> Enabled &nbsp;&nbsp;</span>
-          <span class="text-left"><i class="fa fa-cube fa-2x disabled"></i> Disabled</span>
+          <span class="text-left"><i role="none" class="fa fa-cube fa-2x enabled"></i> Enabled &nbsp;&nbsp;</span>
+          <span class="text-left"><i role="none" class="fa fa-cube fa-2x disabled"></i> Disabled</span>
           <button ng-show="tab.title !== 'Public' && tab.title !== 'Private' && !tab.edit" class="btn btn-default pull-right " ng-click="editTab(tab); tab.edit = !tab.edit">Edit</button>
-          <a ui-sref="applications-systems" ng-show="tab.title === 'Private' && !tab.edit" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Add</a>
+          <a ui-sref="applications-systems" ng-show="tab.title === 'Private' && !tab.edit" class="btn btn-primary pull-right"><i role="none" class="fa fa-plus"></i> Add</a>
         </div>
         <div ng-if="!tab.edit && !requesting" class="row top-buffer">
           <div ng-repeat="appMeta in paginate(tab.content | filter: query)[currentPage] | orderBy: 'id' track by $index">
             <div class="col-md-3 text-center">
               <div class="material-card">
-                <i class="fa fa-remove-sign text-right"></i>
+                <i role="none" class="fa fa-remove-sign text-right"></i>
                 <div class="card-body">
                   <i ng-if="appMeta.value.definition.appIcon" class="icon-{{appMeta.value.definition.appIcon | lowercase}}" ng-class="{'enabled': appMeta.value.definition.available, 'disabled': !appMeta.value.definition.available}"></i>
                   <span ng-if="!appMeta.value.definition.appIcon" class="icon-letter" ng-class="{'enabled': appMeta.value.definition.available, 'disabled': !appMeta.value.definition.available}">{{appMeta.value.definition.label[0] | uppercase}}</span>
@@ -63,51 +63,51 @@ <h3>{{appMeta.value.definition.id}}</h3>
                     <div class="btn-group dropdown text-center">
                       <span class="btn btn-primary" href="#" data-toggle="dropdown">
                           Actions
-                          <i class="fa fa-angle-down"></i>
+                          <i role="none" class="fa fa-angle-down"></i>
                       </span>
                       <ul class="dropdown-menu" role="menu">
                           <li ng-show="appMeta.value.type === 'agave' && appMeta.value.definition.available">
-                              <a href="/rw/workspace/#/{{appMeta.value.definition.id}}" target="_blank" role="button"> <i class="fa fa-play"></i> Run </a>
+                              <a href="/rw/workspace/#/{{appMeta.value.definition.id}}" target="_blank" role="button"> <i role="none" class="fa fa-play"></i> Run </a>
                           </li>
                           <hr ng-show="appMeta.value.type === 'agave' && appMeta.value.definition.available">
 
                           <li ng-if="!appMeta.value.definition.isPublic || appMeta.value.type === 'html'">
-                              <a ng-click="editApp(appMeta)" role="button"> <i class="fa fa-pencil"></i> Edit </a>
+                              <a ng-click="editApp(appMeta)" role="button"> <i role="none" class="fa fa-pencil"></i> Edit </a>
                           </li>
                           <hr ng-if="!appMeta.value.definition.isPublic|| appMeta.value.type === 'html'">
 
                           <li ng-if="!appMeta.value.definition.isPublic || appMeta.value.type === 'html'">
-                              <a ng-click="editPermissions(appMeta)" role="button"> <i class="fa fa-share"></i> Share </a>
+                              <a ng-click="editPermissions(appMeta)" role="button"> <i role="none" class="fa fa-share"></i> Share </a>
                           </li>
                           <hr ng-if="!appMeta.value.definition.isPublic || appMeta.value.type === 'html'">
 
                           <li ng-if="appMeta.value.definition.isPublic && appMeta.value.type === 'html'">
-                            <a ng-click="confirmAction(appMeta, 'private')" role="button"> <i class="fa fa-eye-slash"></i> Make Private </a>
+                            <a ng-click="confirmAction(appMeta, 'private')" role="button"> <i role="none" class="fa fa-eye-slash"></i> Make Private </a>
                           </li>
                           <hr ng-if="appMeta.value.definition.isPublic && appMeta.value.type === 'html'">
 
                           <li>
-                              <a ng-click="cloneApp(appMeta)" role="button"> <i class="fa fa-clone"></i> Clone </a>
+                              <a ng-click="cloneApp(appMeta)" role="button"> <i role="none" class="fa fa-clone"></i> Clone </a>
                           </li>
                           <hr>
 
                           <li ng-if="!appMeta.value.definition.isPublic">
-                              <a ng-click="confirmAction(appMeta, 'publish')" role="button"> <i class="fa fa-eye"></i> Publish </a>
+                              <a ng-click="confirmAction(appMeta, 'publish')" role="button"> <i role="none" class="fa fa-eye"></i> Publish </a>
                           </li>
                           <hr ng-if="!appMeta.value.definition.isPublic">
 
                           <li ng-if="!appMeta.value.definition.available">
-                              <a ng-click="confirmAction(appMeta, 'enable')" role="button"> <i class="fa fa-check"></i> Enable </a>
+                              <a ng-click="confirmAction(appMeta, 'enable')" role="button"> <i role="none" class="fa fa-check"></i> Enable </a>
                           </li>
                           <hr ng-if="!appMeta.value.definition.available">
 
                           <li ng-if="appMeta.value.definition.available">
-                              <a ng-click="confirmAction(appMeta, 'disable')" role="button"> <i class="fa fa-remove"></i> Disable </a>
+                              <a ng-click="confirmAction(appMeta, 'disable')" role="button"> <i role="none" class="fa fa-remove"></i> Disable </a>
                           </li>
                           <hr ng-if="appMeta.value.definition.available">
 
                           <li>
-                             <a ng-click="confirmAction(appMeta, 'delete')" role="button"> <i class="fa fa-trash-o"></i> Delete </a>
+                             <a ng-click="confirmAction(appMeta, 'delete')" role="button"> <i role="none" class="fa fa-trash-o"></i> Delete </a>
                          </li>
                       </ul>
                     </div>
@@ -175,7 +175,7 @@ <h3 class="panel-title">
                         class="app-wrapper"
                         >
                           <div class="app text-center">
-                            <div class="app-icon"><i class="fa fa-cube fa-3x" ng-class="{'enabled': item.value.definition.available, 'disabled': !item.value.definition.available}"></i></div>
+                            <div class="app-icon"><i role="none" class="fa fa-cube fa-3x" ng-class="{'enabled': item.value.definition.available, 'disabled': !item.value.definition.available}"></i></div>
                             <div class="app-title">{{item.value.definition.id}}</div>
                             <div class="app-version">{{item.value.definition.label}}</div>
                             <div class="app-version">{{item.value.definition.version}}</div>
@@ -196,6 +196,6 @@ <h3 class="panel-title">
           <a ui-sref="applications-add" ng-show="tab.title === 'Private' && !tab.edit" class="btn btn-primary">Add</a>
         </div> -->
       </uib-tab>
-      <!-- <button class="btn btn-default btn-tab" ng-click="addTab()" ><i class="fa fa-plus"></i></button> -->
+      <!-- <button class="btn btn-default btn-tab" ng-click="addTab()" ><i role="none" class="fa fa-plus"></i></button> -->
     </uib-tabset>
 </div>
diff --git a/designsafe/static/scripts/dashboard/components/dashboard/dashboard.component.html b/designsafe/static/scripts/dashboard/components/dashboard/dashboard.component.html
index c78fa38d6..26e0d6cc2 100644
--- a/designsafe/static/scripts/dashboard/components/dashboard/dashboard.component.html
+++ b/designsafe/static/scripts/dashboard/components/dashboard/dashboard.component.html
@@ -2,7 +2,7 @@
     <div class="col-sm-3">
         <div class="dashboard-stat blue">
             <div class="visual">
-                <i class="fa fa-rocket"></i>
+                <i role="none" class="fa fa-rocket"></i>
             </div>
             <div class="details">
                 <div class="number"> {{$ctrl.jobs.length}} </div>
@@ -13,7 +13,7 @@
     <div class="col-sm-3">
         <div class="dashboard-stat green">
             <div class="visual">
-                <i class="fa fa-cogs"></i>
+                <i role="none" class="fa fa-cogs"></i>
             </div>
             <div class="details">
                 <div class="number"> {{$ctrl.apps.length}} </div>
@@ -24,7 +24,7 @@
     <div class="col-sm-3">
         <div class="dashboard-stat red">
             <div class="visual">
-                <i class="fa fa-database"></i>
+                <i role="none" class="fa fa-database"></i>
             </div>
             <div class="details">
                 <div class="number"> {{$ctrl.usage.total_storage_bytes | bytes}} </div>
@@ -58,7 +58,7 @@ <h3 ng-show="!$ctrl.loading_jobs">
                     <a href="/rw/workspace"> Tools & Applications </a>
                 </h3>
                 <div class="text-center" ng-show="$ctrl.loading_jobs">
-                    <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+                    <i role="none" class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
                 </div>
             </div>
             <div id="ds_jobs_chart" class="ds-chart" ng-show="$ctrl.jobs.length"></div>
@@ -116,7 +116,7 @@ <h3 class="panel-title pull-left">My Tickets</h3>
             </ul>
 
             <div ng-show="$ctrl.loading_tickets" class="text-center">
-                <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+                <i role="none" class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
             </div>
         </div>
 
@@ -139,4 +139,4 @@ <h3 class="panel-title">Recent Apps</h3>
 
 <div class="row">
 
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-listing/files-listing.template.html b/designsafe/static/scripts/data-depot/components/data-depot-listing/files-listing.template.html
index a95fd112f..5bd50d70f 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-listing/files-listing.template.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-listing/files-listing.template.html
@@ -14,7 +14,7 @@
                 <tr>
                     <th>
                         <span ng-if="$ctrl.showSelect">
-                            <i class="fa fa-lg fa-check-square" style="color:#337ab7;" ng-click="$ctrl.FileListingService.selectAll($ctrl.listing.params.section)"></i>
+                            <i role="none" class="fa fa-lg fa-check-square" style="color:#337ab7;" ng-click="$ctrl.FileListingService.selectAll($ctrl.listing.params.section)"></i>
                             <span>Name</span>
                         </span>
                         <span ng-if="!$ctrl.showSelect">Name</span>
@@ -32,15 +32,15 @@
                     <td class="unselectable">
                         <span ng-if="$ctrl.showSelect">
                             <span class="fa-stack fa-lg" style="margin: -8px;" ng-if="item.selected" data-ng-click="$ctrl.onSelect($index)">
-                                <i class="fa fa-square fa-stack-1x" style="color: white;"></i>
-                                <i class="fa fa-check-square fa-stack-1x" style="color:#1CB500;"></i>
+                                <i role="none" class="fa fa-square fa-stack-1x" style="color: white;"></i>
+                                <i role="none" class="fa fa-check-square fa-stack-1x" style="color:#1CB500;"></i>
                             </span>
                             <span class="fa-stack fa-lg" style="margin: -8px;" ng-if="!item.selected" data-ng-click="$ctrl.onSelect($index)">
-                                <i class="fa fa-square fa-stack-1x" style="color: white;"></i>
-                                <i class="fa fa-square-o fa-stack-1x" style="color:lightgray;"></i>
+                                <i role="none" class="fa fa-square fa-stack-1x" style="color: white;"></i>
+                                <i role="none" class="fa fa-square-o fa-stack-1x" style="color:lightgray;"></i>
                             </span>
                         </span>
-                        <i class="fa {{ $ctrl.icon(item.name, item.type) }} test-file-icon">&nbsp;</i>
+                        <i role="none" class="fa {{ $ctrl.icon(item.name, item.type) }} test-file-icon">&nbsp;</i>
                         <a data-ng-href="{{$ctrl.href(item.system, item.path)}}" data-ng-click="$ctrl.browse($event, item)" class="test-file-name">
                             {{ item.name }}
                         </a>
@@ -69,7 +69,7 @@
           
                             </div>
                             <div data-ng-if="$ctrl.browser.loadingEntities">
-                                <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading ...
+                                <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading ...
                             </div>
                         </div>
                     </td>
@@ -85,7 +85,7 @@
                 <tr >
                     <td ng-if="$ctrl.listing.loadingScroll" colspan="4" style="height: 37px;">
                         <span class="bg-info text-info" >
-                            <i class="fa fa-spinner fa-spin">&nbsp;</i>
+                            <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i>
                             Loading...
                         </span>
                     </td>
@@ -107,7 +107,7 @@
                      class="bg-info"
                  >
                     <span>
-                        <i class="fa fa-spinner fa-spin">&nbsp;</i>
+                        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i>
                         Loading...
                     </span>
                 </div>
@@ -131,12 +131,12 @@
                     <p class="lead" style="margin-top:20px" ng-if="(!($ctrl.listing.params.system.includes('project-') && $ctrl.editTags)
                                                                     && $ctrl.listing.params.query_string == null)">
                         This folder is empty! <br />
-                        <i class="fa fa-folder-open-o">&nbsp;</i><br/>
+                        <i role="none" class="fa fa-folder-open-o">&nbsp;</i><br/>
                         <a data-ng-if="$ctrl.listing.params.system.includes('project-')"
                         href="https://www.youtube.com/watch?v=ITf4hlBamGU&list=PL2GxvrdFrBlkwHBgQ47pZO-77ZLrJKYHV"
                         target="_blank"
                         > 
-                            <i class="fa fa-question-circle" style="font-size: 18px;">&nbsp;</i>
+                            <i role="none" class="fa fa-question-circle" style="font-size: 18px;">&nbsp;</i>
                             Learn how to move files to a project
                         </a>
                     </p>
@@ -146,14 +146,14 @@
                         href="https://www.youtube.com/watch?v=ITf4hlBamGU&list=PL2GxvrdFrBlkwHBgQ47pZO-77ZLrJKYHV"
                         target="_blank"
                         >
-                         <i class="fa fa-question-circle" style="font-size: 18px;">&nbsp;</i>
+                         <i role="none" class="fa fa-question-circle" style="font-size: 18px;">&nbsp;</i>
                          Learn how to move files to a project
                         </a>
                     </p>
                     <p class="lead" style="margin-top:20px" ng-if="$ctrl.editTags">
-                        <i class="fa fa-file-text-o">&nbsp;</i><br/>
+                        <i role="none" class="fa fa-file-text-o">&nbsp;</i><br/>
                         <a href="https://www.youtube.com/watch?v=lfBe04ihQUs&list=PL2GxvrdFrBlkwHBgQ47pZO-77ZLrJKYHV" target="_blank">
-                            <i class="fa fa-question-circle" style="font-size: 18px;">&nbsp;</i>
+                            <i role="none" class="fa fa-question-circle" style="font-size: 18px;">&nbsp;</i>
                             Learn how to assign files to categories<br/>
                         </a>
                     </p>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search-checkbox.template.html b/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search-checkbox.template.html
index dbc34ce9e..cc048637f 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search-checkbox.template.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search-checkbox.template.html
@@ -1,8 +1,8 @@
 <span class="fa-stack fa-lg" style="margin: -8px;" ng-if="$ctrl.selected" ng-click="$ctrl.onSelect()">
-    <i class="fa fa-square fa-stack-1x" style="color: white;"></i>
-    <i class="fa fa-check-square fa-stack-1x" style="color:#1CB500;"></i>
+    <i role="none" class="fa fa-square fa-stack-1x" style="color: white;"></i>
+    <i role="none" class="fa fa-check-square fa-stack-1x" style="color:#1CB500;"></i>
 </span>
 <span class="fa-stack fa-lg" style="margin: -8px;" ng-if="!$ctrl.selected" ng-click="$ctrl.onSelect()">
-    <i class="fa fa-square fa-stack-1x" style="color: white;"></i>
-    <i class="fa fa-square-o fa-stack-1x" style="color:lightgray;"></i>
-</span>
\ No newline at end of file
+    <i role="none" class="fa fa-square fa-stack-1x" style="color: white;"></i>
+    <i role="none" class="fa fa-square-o fa-stack-1x" style="color:lightgray;"></i>
+</span>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search.template.html b/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search.template.html
index 825057a63..829b506a8 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search.template.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-advanced-search/publication-advanced-search.template.html
@@ -167,8 +167,8 @@
             <div class="col-xs-2" style="height: 50px; display: flex; justify-content: center; align-items: center;">
                 <div style="text-align: center;">
                     <a href="#" ng-click="$ctrl.toggleSearchPanel($event)">
-                        <span ng-if="$ctrl.isCollapsed"> More Options <span class="fa fa-chevron-down"></span> </span>
-                        <span ng-if="!$ctrl.isCollapsed"> Less Options <span class="fa fa-chevron-up"></span> </span>
+                        <span ng-if="$ctrl.isCollapsed"> More Options <span role="none" class="fa fa-chevron-down"></span> </span>
+                        <span ng-if="!$ctrl.isCollapsed"> Less Options <span role="none" class="fa fa-chevron-up"></span> </span>
                     </a>
                 </div>
             </div>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-description-modal/publication-description.component.html b/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-description-modal/publication-description.component.html
index 8a4b72ace..5a460287f 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-description-modal/publication-description.component.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-listing/publication-description-modal/publication-description.component.html
@@ -5,10 +5,10 @@ <h3 class="modal-title">View Description | {{$ctrl.resolve.title}}</h3>
         <div data-ng-if="$ctrl.PublicationService.description.loading"
                      style="padding:10px; font-size:large; width:100%;"
                      class="bg-info">
-                    <span> <i class="fa fa-spinner fa-spin"></i> Loading... </span>
+                    <span> <i role="none" class="fa fa-spinner fa-spin"></i> Loading... </span>
                 </div>
         <div data-ng-if="!$ctrl.PublicationService.description.loading" ng-bind-html="$ctrl.PublicationService.description.value"></div>
     </div>
     <div class="modal-footer">
         <button class="btn btn-primary" type="button" ng-click="$ctrl.dismiss()">Close</button>
-    </div>
\ No newline at end of file
+    </div>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-legacy-listing.template.html b/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-legacy-listing.template.html
index 6d7bda7eb..2160e49fc 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-legacy-listing.template.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-legacy-listing.template.html
@@ -40,7 +40,7 @@
                 <tr ng-if="$ctrl.listing.loadingScroll">
                     <td>
                         <span class="bg-info text-info">
-                            <i class="fa fa-spinner fa-spin"></i> Loading...
+                            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                         </span>
                     </td>
                 </tr>
@@ -49,7 +49,7 @@
                 <div data-ng-if="$ctrl.listing.loading"
                      style="padding:10px; font-size:large; width:100%;"
                      class="bg-info">
-                    <span> <i class="fa fa-spinner fa-spin"></i> Loading... </span>
+                    <span> <i role="none" class="fa fa-spinner fa-spin"></i> Loading... </span>
                 </div>
 
                 <div ng-if="! $ctrl.listing.loading && $ctrl.listing.error"
@@ -61,4 +61,4 @@
             </caption>
         </table>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-listing.template.html b/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-listing.template.html
index 78d38b203..c817a894f 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-listing.template.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-listing/publications-listing.template.html
@@ -7,7 +7,7 @@
                 <div class="input-group" style="display:inline-flex; flex:1; align-items: center; min-width:200px;">
                     
                     <button class="btn btn-success" ng-click="$ctrl.browse()" style="width:fit-content; white-space: nowrap; text-align: center; height: 34px;">
-                        <i class="fa fa-search">&nbsp;</i>Search
+                        <i role="none" class="fa fa-search">&nbsp;</i>Search
                     </button>
                     <input type="text" placeholder="Author, Title, Keyword, Description, Natural Hazard Event, Project ID, or DOI" 
                     data-toggle="tooltip" data-placement="top" title="Author, Title, Keyword, Description, Natural Hazard Event, Project ID, or DOI"
@@ -84,7 +84,7 @@
                             <tr ng-if="$ctrl.listing.loadingScroll">
                                 <td>
                                     <span class="bg-info text-info">
-                                        <i class="fa fa-spinner fa-spin"></i> Loading...
+                                        <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                                     </span>
                                 </td>
                             </tr>
@@ -93,7 +93,7 @@
                             <div data-ng-if="$ctrl.listing.loading"
                                  style="padding:10px; font-size:large; width:100%;"
                                  class="bg-info">
-                                <span> <i class="fa fa-spinner fa-spin"></i> Loading... </span>
+                                <span> <i role="none" class="fa fa-spinner fa-spin"></i> Loading... </span>
                             </div>
             
                             <div ng-if="! $ctrl.listing.loading && $ctrl.listing.error"
@@ -112,7 +112,7 @@
                             >
                                 <p class="lead">
                                     This folder is empty!
-                                    <br /><i class="fa fa-folder-open-o"></i>
+                                    <br /><i role="none" class="fa fa-folder-open-o"></i>
                                 </p>
                             </div>
                         </caption>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-nav/data-depot-nav.component.html b/designsafe/static/scripts/data-depot/components/data-depot-nav/data-depot-nav.component.html
index 577f4e0bd..9c09ddfad 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-nav/data-depot-nav.component.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-nav/data-depot-nav.component.html
@@ -64,20 +64,20 @@
 <!-- <div style="text-align:center;">
   <div>
     <a class="" href="https://www.youtube.com/playlist?list=PL2GxvrdFrBlkwHBgQ47pZO-77ZLrJKYHV" target="_blank">
-      <i class="fa fa-youtube-play"></i> Curation Tutorials
+      <i role="none" class="fa fa-youtube-play"></i> Curation Tutorials
     </a>
   </div>
   <div>
     <a class="" href="/rw/user-guides/data-publication-guidelines/" target="_blank">
-      <i class="fa fa-info-circle"></i> Curation Guidelines
+      <i role="none" class="fa fa-info-circle"></i> Curation Guidelines
     </a>
   </div>
   <div>
-      <a href="/rw/user-guide/data-depot" target="_blank"><i class="fa fa-info-circle"></i> Learn About the <br/>Data Depot</a>
+      <a href="/rw/user-guide/data-depot" target="_blank"><i role="none" class="fa fa-info-circle"></i> Learn About the <br/>Data Depot</a>
   </div>
   <div>
     <a href="/faq" target="_blank">
-      <i class="fa fa-question-circle" aria-hidden="true"></i>FAQ
+      <i role="none" class="fa fa-question-circle" aria-hidden="true"></i>FAQ
     </a>
   </div>
 </div> -->
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-new/data-depot-new.component.html b/designsafe/static/scripts/data-depot/components/data-depot-new/data-depot-new.component.html
index c48f1d099..7443469e7 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-new/data-depot-new.component.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-new/data-depot-new.component.html
@@ -2,14 +2,14 @@
     <div class="btn-group btn-block">
         <button class="btn btn-block btn-primary dropdown-toggle"
                 data-toggle="dropdown" ng-disabled="! $ctrl.test.enabled">
-        <i class="fa fa-plus-circle"></i> Add
+        <i role="none" class="fa fa-plus-circle"></i> Add
         </button>
         <ul class="dropdown-menu">
             <li ng-class="{'disabled': ! $ctrl.test.createFiles}">
                 <a href="#" ng-click="$ctrl.createFolder($event)">
                     <span class="fa-stack fa-lg">
-                        <i class="fa fa-folder fa-stack-2x"></i>
-                        <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
+                        <i role="none" class="fa fa-folder fa-stack-2x"></i>
+                        <i role="none" class="fa fa-plus fa-stack-1x fa-inverse"></i>
                     </span>
                     <span class="">New Folder</span>
                 </a>
@@ -17,7 +17,7 @@
             <li ng-class="{'disabled': ! $ctrl.test.createProject}">
                 <a href="#" ng-click="$ctrl.createProject($event)">
                     <span class="fa-stack fa-lg">
-                        <i class="fa fa-briefcase fa-2x"></i>
+                        <i role="none" class="fa fa-briefcase fa-2x"></i>
                     </span>
                     <span>New Project</span>
                 </a>
@@ -26,8 +26,8 @@
             <li ng-class="{'disabled': ! $ctrl.test.createFiles}">
                 <a href="#" ng-click="$ctrl.uploadFiles($event)">
                     <span class="fa-stack fa-lg">
-                        <i class="fa fa-file-o fa-stack-2x"></i>
-                        <i class="fa fa-cloud-upload fa-stack-1x"></i>
+                        <i role="none" class="fa fa-file-o fa-stack-2x"></i>
+                        <i role="none" class="fa fa-cloud-upload fa-stack-1x"></i>
                     </span>
                     <span>File upload: max 2GB</span>
                 </a>
@@ -35,8 +35,8 @@
             <li ng-class="{'disabled': ! $ctrl.test.createFiles}">
                 <a href="#" ng-click="$ctrl.uploadFolders($event)">
                     <span class="fa-stack fa-lg">
-                        <i class="fa fa-folder-o fa-stack-2x"></i>
-                        <i class="fa fa-cloud-upload fa-stack-1x"></i>
+                        <i role="none" class="fa fa-folder-o fa-stack-2x"></i>
+                        <i role="none" class="fa fa-cloud-upload fa-stack-1x"></i>
                     </span>
                     <span>Folder upload: max 25 files</span>
                 </a>
@@ -44,7 +44,7 @@
             <li ng-class="{'disabled': ! $ctrl.test.createFiles}" ng-init="popoverOpened=false" ng-mouseover="popoverOpened=true" ng-mouseleave="popoverOpened=false">
                 <a href='https://www.designsafe-ci.org/rw/user-guides/data-transfer-guide/' uib-popover-html="popoverHTML" popover-placement="right" popover-trigger="none" popover-is-open="popoverOpened">
                     <span class="fa-stack fa-lg">
-                        <i class="fa fa-hdd-o fa-stack-2x"></i>
+                        <i role="none" class="fa fa-hdd-o fa-stack-2x"></i>
                     </span>
                     <span>Bulk Data Transfer</span>
                 </a>
diff --git a/designsafe/static/scripts/data-depot/components/data-depot-toolbar/data-depot-toolbar.component.html b/designsafe/static/scripts/data-depot/components/data-depot-toolbar/data-depot-toolbar.component.html
index 3d3d85090..d78a341db 100644
--- a/designsafe/static/scripts/data-depot/components/data-depot-toolbar/data-depot-toolbar.component.html
+++ b/designsafe/static/scripts/data-depot/components/data-depot-toolbar/data-depot-toolbar.component.html
@@ -9,7 +9,7 @@
             <form class="navbar-form navbar-left" ng-submit="$ctrl.ddSearch()" style="display:flex"
             ng-hide="['Dropbox', 'Box', 'Google Drive', 'NEES Published'].includes($ctrl.placeholder())">
             <input class="form-control" style="width:240px;" placeholder="Find in {{ $ctrl.placeholder() }}" ng-model="$ctrl.search.queryString">
-                <button class="btn btn-default" style="clear: right;"> <i class="fa fa-search"></i> </button>
+                <button class="btn btn-default" style="clear: right;"> <i role="none" class="fa fa-search"></i> </button>
             </form>
             <div class="btn-toolbar-right">
                 <div class="btn-group-data-depot-toolbar btn-group">
@@ -17,7 +17,7 @@
                             ng-hide="$ctrl.$state.current.name === 'publishedData' || $ctrl.$state.current.name === 'publicDataLegacy'"
                             ng-disabled="!$ctrl.FileOperationService.tests.rename ||
                                         $ctrl.browser.project.publicationStatus === 'publishing'">
-                        <i class="fa fa-pencil"></i><span style="display:block;">Rename</span>
+                        <i role="none" class="fa fa-pencil"></i><span style="display:block;">Rename</span>
                     </button>
                 </div>
                 <div class="btn-group-data-depot-toolbar btn-group">
@@ -25,31 +25,31 @@
                             ng-hide="$ctrl.$state.current.name === 'publishedData' || $ctrl.$state.current.name === 'publicDataLegacy'"
                             ng-disabled="!$ctrl.FileOperationService.tests.move ||
                                         $ctrl.browser.project.publicationStatus === 'publishing'">
-                        <i class="fa fa-arrows"></i><span style="display:block;">Move</span>
+                        <i role="none" class="fa fa-arrows"></i><span style="display:block;">Move</span>
                     </button>
                     <button class="btn btn-sm btn-default" title="Copy" ng-click="$ctrl.copy()" style="text-align: center;"
                             ng-disabled="!$ctrl.FileOperationService.tests.copy||
                                         $ctrl.browser.project.publicationStatus === 'publishing'">
-                        <i class="fa fa-copy"></i><span style="display:block;">Copy</span>
+                        <i role="none" class="fa fa-copy"></i><span style="display:block;">Copy</span>
                     </button>
                     <button class="btn btn-sm btn-default" title="Preview" ng-click="$ctrl.preview()" style="text-align: center;"
                             ng-disabled="!$ctrl.FileOperationService.tests.preview ||
                                         $ctrl.browser.project.publicationStatus === 'publishing'">
-                        <i class="fa fa-binoculars"></i><span style="display:block;">Preview</span>
+                        <i role="none" class="fa fa-binoculars"></i><span style="display:block;">Preview</span>
                     </button>
                     <button class="btn btn-sm btn-default" title="Preview Images" style="text-align: center;"
                             ng-click="$ctrl.previewImages()"
                             ng-disabled="!$ctrl.FileOperationService.tests.previewImages">
-                        <i class="fa fa-photo"></i><span style="display:block;">Preview Images</span>
+                        <i role="none" class="fa fa-photo"></i><span style="display:block;">Preview Images</span>
                     </button>
                     <!-- <button class="btn btn-sm btn-default" title="Preview Citation" ng-if="$ctrl.browser.listing.system.startsWith('nees')" ng-click="$ctrl.showCitation()" ng-disabled="!$ctrl.browser.tests.canViewCitation || $ctrl.browser.selected[0].name.includes('NEES')">
-                        <i class="fa fa-book" style="color:#5bc0de;"></i><span style="display:block;">Citation</span>
+                        <i role="none" class="fa fa-book" style="color:#5bc0de;"></i><span style="display:block;">Citation</span>
                     </button> -->
                 </div>
                 <div class="btn-group-data-depot-toolbar btn-group">
                     <button class="btn btn-sm btn-default" title="Download" ng-click="$ctrl.download()" style="text-align: center;"
                             ng-disabled="!$ctrl.FileOperationService.tests.download">
-                        <i class="fa fa-cloud-download"></i><span style="display:block;">Download</span>
+                        <i role="none" class="fa fa-cloud-download"></i><span style="display:block;">Download</span>
                     </button>
                 </div>
                 <div class="btn-group-data-depot-toolbar btn-group">
@@ -58,10 +58,10 @@
                             ng-disabled="!$ctrl.FileOperationService.tests.trash ||
                                         $ctrl.browser.project.publicationStatus === 'publishing'"
                             ng-if="!$ctrl.browser.tests.canDelete">
-                        <i class="fa fa-trash"></i><span style="display:block;">Move to Trash</span>
+                        <i role="none" class="fa fa-trash"></i><span style="display:block;">Move to Trash</span>
                     </button>
                     <button class="btn btn-sm btn-danger" title="Delete selected files" ng-click="$ctrl.rm()" style="text-align: center;" ng-disabled="!$ctrl.browser.tests.canDelete" ng-if="$ctrl.browser.tests.canDelete">
-                        <i class="fa fa-trash"></i><span style="display:block;">Delete selected files</span>
+                        <i role="none" class="fa fa-trash"></i><span style="display:block;">Delete selected files</span>
                     </button>
                 </div>
             </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/_common/hazmapper-maps/hazmapper-maps.component.html b/designsafe/static/scripts/data-depot/components/projects/_common/hazmapper-maps/hazmapper-maps.component.html
index c135afd44..115bf0b2c 100644
--- a/designsafe/static/scripts/data-depot/components/projects/_common/hazmapper-maps/hazmapper-maps.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/_common/hazmapper-maps/hazmapper-maps.component.html
@@ -1,7 +1,7 @@
 <div ng-repeat="map in $ctrl.filteredHazmapperMaps($ctrl.readOnly)">
   <span><b>{{ map.name }}</b></span>
-  <i ng-if="$ctrl.onBrowse && !$ctrl.readOnly" class="fa fa-folder" data-ng-click="$ctrl.browse($event, map.path)" uib-tooltip="Open Linked Path"></i>
+  <i ng-if="$ctrl.onBrowse && !$ctrl.readOnly" role="none" class="fa fa-folder" data-ng-click="$ctrl.browse($event, map.path)" uib-tooltip="Open Linked Path"></i>
   <a href="{{ map.href }}" rel="noopener noreferrer" target="_blank" uib-tooltip="Open in Hazmapper">
-    <i class="fa fa-external-link"></i>
+    <i role="none" class="fa fa-external-link"></i>
   </a>
 </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/curation-directory/curation-directory.component.html b/designsafe/static/scripts/data-depot/components/projects/curation-directory/curation-directory.component.html
index f2e884f43..65793ef2e 100644
--- a/designsafe/static/scripts/data-depot/components/projects/curation-directory/curation-directory.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/curation-directory/curation-directory.component.html
@@ -78,7 +78,7 @@
     <br>
     <div ng-if="$ctrl.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="!$ctrl.loading">
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-citation.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-citation.template.html
index 9503b9cc1..dbb164351 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-citation.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-citation.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goAmend()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.submitAmend()"
@@ -15,14 +15,14 @@ <h3>Confirm Author Order</h3>
         Your citation(s) will be updated to match what is shown in the preview.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <!-- Notifications -->
     <div class="pipeline-notification">
         <div class="alert alert-success flex-container" ng-if="$ctrl.ui.success">
-            <i class="fa fa-check notification-icon"></i>
+            <i role="none" class="fa fa-check notification-icon"></i>
             <div>
                 Your publication amendment has been submitted.
                 <strong>Do not attempt to amend your publication again.</strong>
@@ -38,7 +38,7 @@ <h3 class="text-center">
             Return to Project
         </button>
         <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-            <i class="fa fa-times notification-icon"></i>
+            <i role="none" class="fa fa-times notification-icon"></i>
             <div>
                 There was an issue when attempting to submit your project
                 for revision.
@@ -62,7 +62,7 @@ <h4>Success</h4>
                 </div>
                 <div ng-show="$ctrl.ui.loading">
                     <h3 class="text-center">
-                        <i class="fa fa-spinner fa-spin"></i> Loading...
+                        <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                     </h3>
                 </div>
                 <!-- Citation Preview -->
@@ -100,8 +100,8 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                     </tr>
                     <tr>
                         <td>
-                            <i class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, pubEnt)"></i>
-                            <i class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, pubEnt)"></i>
+                            <i role="none" class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, pubEnt)"></i>
+                            <i role="none" class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, pubEnt)"></i>
                             <a class="sort-arrows" ng-click="$ctrl.saveAuthors(pubEnt, true)">Save</a>
                         </td>
                     </tr>
@@ -109,4 +109,4 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-experimental.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-experimental.template.html
index e285f6a96..797be182a 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-experimental.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-experimental.template.html
@@ -2,7 +2,7 @@
     <a ng-class="{'btn disabled': $ctrl.ui.loading || $ctrl.ui.submitted}"
        ng-click="$ctrl.goStart()"
     >
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goCitation()"
@@ -17,14 +17,14 @@ <h3>Amend Metadata</h3>
         If you need help, attend <a href="/facilities/virtual-office-hours/" target="_blank">curation office hours</a>.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <!-- Notifications -->
     <div class="pipeline-notification">
         <div class="alert alert-danger flex-container" ng-if="!$ctrl.isEmpty($ctrl.ui.missing)">
-            <i class="fa fa-exclamation notification-icon"></i>
+            <i role="none" class="fa fa-exclamation notification-icon"></i>
             <div>
                 Some of your project's amendments were not able to be imported. Please review and amend
                 the the highlighted categories below.
@@ -329,7 +329,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px;" valign="top">
                                                         <span style="font-size: 20px; color: #1568C9">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -371,7 +371,7 @@ <h3 class="text-center">
                                                         <tr>
                                                             <td style="padding-right: 10px" valign="top">
                                                                 <span style="font-size: 20px; color: #43A59D">
-                                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                                 </span>
                                                             </td>
                                                             <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-field-recon.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-field-recon.template.html
index 8b3182ad2..d513c7c3b 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-field-recon.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-field-recon.template.html
@@ -2,7 +2,7 @@
     <a ng-class="{'btn disabled': $ctrl.ui.loading || $ctrl.ui.submitted}"
        ng-click="$ctrl.goStart()"
     >
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goCitation()"
@@ -17,14 +17,14 @@ <h3>Amend Metadata</h3>
         If you need help, attend <a href="/facilities/virtual-office-hours/" target="_blank">curation office hours</a>.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <!-- Notifications -->
     <div class="pipeline-notification">
         <div class="alert alert-danger flex-container" ng-if="!$ctrl.isEmpty($ctrl.ui.missing)">
-            <i class="fa fa-exclamation notification-icon"></i>
+            <i role="none" class="fa fa-exclamation notification-icon"></i>
             <div>
                 Some of your project's amendments were not able to be imported. Please review and amend
                 the the highlighted categories below.
@@ -160,7 +160,7 @@ <h3 class="text-center">
                             <div class="well">
                                 <!-- Tombstone Banner -->
                                 <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(mainEntity.uuid)">
-                                    <i class="fa fa-warning notification-icon"></i>
+                                    <i role="none" class="fa fa-warning notification-icon"></i>
                                     <div>
                                         <strong>The following Dataset does not exist anymore</strong><br>
                                         The Dataset with DOI:
@@ -265,7 +265,7 @@ <h3 class="text-center">
                             <div class="well">
                                 <!-- Tombstone Banner -->
                                 <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(mainEntity.uuid)">
-                                    <i class="fa fa-warning notification-icon"></i>
+                                    <i role="none" class="fa fa-warning notification-icon"></i>
                                     <div>
                                         <strong>The following Dataset does not exist anymore</strong><br>
                                         The Dataset with DOI:
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-other.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-other.template.html
index 42be975de..a86a6db70 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-other.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-amend/amend-other.template.html
@@ -2,7 +2,7 @@
     <a ng-class="{'btn disabled': $ctrl.ui.loading || $ctrl.ui.submitted}"
        ng-click="$ctrl.goStart()"
     >
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.submitAmend()"
@@ -17,14 +17,14 @@ <h3>Amend Metadata</h3>
         If you need help, attend <a href="/facilities/virtual-office-hours/" target="_blank">curation office hours</a>.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <!-- Notifications -->
     <div class="pipeline-notification">
         <div class="alert alert-success flex-container" ng-if="$ctrl.ui.success">
-            <i class="fa fa-check notification-icon"></i>
+            <i role="none" class="fa fa-check notification-icon"></i>
             <div>
                 Your publication amendment has been submitted.
                 <strong>Do not attempt to amend your publication again.</strong>
@@ -34,13 +34,13 @@ <h3 class="text-center">
             </div>
         </div>
         <div class="alert alert-success flex-container" ng-if="$ctrl.ui.confirmed && !$ctrl.ui.success">
-            <i class="fa fa-check notification-icon"></i>
+            <i role="none" class="fa fa-check notification-icon"></i>
             <div>
                 Your authors have been confirmed. Click the "Amend Publication" button to finalize your changes.
             </div>
         </div>
         <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-            <i class="fa fa-times notification-icon"></i>
+            <i role="none" class="fa fa-times notification-icon"></i>
             <div>
                 There was an issue when attempting to amend your publication.
                 <strong>Do not attempt to amend your publication again.</strong> Please
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-authors/pipeline-authors.component.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-authors/pipeline-authors.component.html
index 939757ebe..feb544513 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-authors/pipeline-authors.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-authors/pipeline-authors.component.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,38 +18,38 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread {{$ctrl.placeholder}}</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong ng-if="$ctrl.projType != 'field_recon'">Proofread Categories</strong>
                 <strong ng-if="$ctrl.projType === 'field_recon'">Proofread Collections</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -57,7 +57,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goCategories()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Categories
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Categories
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goLicenses()" ng-disabled="!$ctrl.validAuths || $ctrl.loading">Continue</button>
     </div>
@@ -99,7 +99,7 @@ <h4>Success</h4>
             </div>
             <div ng-show="$ctrl.loading">
                 <h3 class="text-center">
-                    <i class="fa fa-spinner fa-spin"></i> Loading...
+                    <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                 </h3>
             </div>
             <!-- Citation Preview -->
@@ -136,8 +136,8 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                 </tr>
                 <tr>
                     <td>
-                        <i class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, primEnt)"></i>
-                        <i class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, primEnt)"></i>
+                        <i role="none" class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, primEnt)"></i>
+                        <i role="none" class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, primEnt)"></i>
                         <a class="sort-arrows" ng-click="$ctrl.saveAuthors(primEnt)">Save</a>
                     </td>
                 </tr>
@@ -160,7 +160,7 @@ <h4>Success</h4>
             </div>
             <div ng-show="$ctrl.loading">
                 <h3 class="text-center">
-                    <i class="fa fa-spinner fa-spin"></i> Loading...
+                    <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                 </h3>
             </div>
             <!-- Citation Preview -->
@@ -197,12 +197,12 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                 </tr>
                 <tr>
                     <td>
-                        <i class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, secEnt)"></i>
-                        <i class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, secEnt)"></i>
+                        <i role="none" class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, secEnt)"></i>
+                        <i role="none" class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, secEnt)"></i>
                         <a class="sort-arrows" ng-click="$ctrl.saveAuthors(secEnt)">Save</a>
                     </td>
                 </tr>
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-licenses/pipeline-licenses.component.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-licenses/pipeline-licenses.component.html
index 2b529690a..21bb09e6d 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-licenses/pipeline-licenses.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-licenses/pipeline-licenses.component.html
@@ -2,7 +2,7 @@
         <!-- progression map -->
         <div class="pull-right" style="padding-bottom: 20px;">
             <a ng-click="$ctrl.goWork()">
-                <i class="fa fa-times"></i> Exit Prepare to Publish
+                <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
             </a>
         </div>
         <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -10,19 +10,19 @@
                 <td class="tg-0lax">
                     <strong>Selection</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Proofread Project</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax" ng-hide="$ctrl.project.value.projectType === 'other'">
                     <strong>Proofread {{$ctrl.placeholder}}</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
@@ -30,19 +30,19 @@
                         <strong ng-if="$ctrl.project.value.projectType === 'field_recon'">Proofread Collections</strong>
                         <strong ng-if="$ctrl.project.value.projectType != 'other' && $ctrl.project.value.projectType != 'field_recon'">Proofread Categories</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Order Authors</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Licenses</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
             </tr>
@@ -50,13 +50,13 @@
         <br>
         <div>
             <a class="pull-left" ng-click="$ctrl.goAuthors()" ng-if="$ctrl.project.value.projectType !== 'other'">
-                <i class="fa fa-arrow-left"></i> Back to Order Authors
+                <i role="none" class="fa fa-arrow-left"></i> Back to Order Authors
             </a>
             <a class="pull-left" ng-click="$ctrl.goTeam()" ng-if="$ctrl.project.value.projectType === 'other'">
-                <i class="fa fa-arrow-left"></i> Back to Order Authors
+                <i role="none" class="fa fa-arrow-left"></i> Back to Order Authors
             </a>
             <button class="btn btn-small btn-add pull-right" ng-click="$ctrl.prepareModal()" ng-disabled="!$ctrl.validSelection()">
-                <i class="fa fa-globe"></i> Request DOI & Publish
+                <i role="none" class="fa fa-globe"></i> Request DOI & Publish
             </button>
         </div>
         <!-- progression map -->
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-other/pipeline-other.component.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-other/pipeline-other.component.html
index 5918c22ed..d187bfe85 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-other/pipeline-other.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-other/pipeline-other.component.html
@@ -2,7 +2,7 @@
         <!-- progression map -->
         <div class="pull-right" style="padding-bottom: 20px;">
             <a ng-click="$ctrl.goWork()">
-                <i class="fa fa-times"></i> Exit Prepare to Publish
+                <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
             </a>
         </div>
         <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -10,31 +10,31 @@
                 <td class="tg-0lax">
                     <strong>Selection</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Proofread Project</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Proofread Data</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Order Authors</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Licenses</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
             </tr>
@@ -42,7 +42,7 @@
         <br>
         <div>
             <a class="pull-left" ng-click="$ctrl.goProject()">
-                <i class="fa fa-arrow-left"></i> Back to Proofread Project
+                <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Project
             </a>
             <button class="btn btn-add pull-right" ng-click="$ctrl.goTeam()">Continue</button>
         </div>
@@ -64,4 +64,4 @@ <h3 style="text-align: center">Proofread your Data</h3>
             <files-listing listing="$ctrl.FileListingService.selectedListing" show-tags="true"></files-listing>
         </div>
         <!-- Other Header End -->
-    </div>
\ No newline at end of file
+    </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-experiment.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-experiment.template.html
index a53fa3e8a..0d13ce5cd 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-experiment.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-experiment.template.html
@@ -2,7 +2,7 @@
         <!-- progression map -->
         <div class="pull-right" style="padding-bottom: 20px;">
             <a ng-click="$ctrl.goWork()">
-                <i class="fa fa-times"></i> Exit Prepare to Publish
+                <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
             </a>
         </div>
         <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
                 <td>
                     <strong>Selection</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Proofread Project</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Proofread Experiment</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Proofread Categories</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Order Authors</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Licenses</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
             </tr>
@@ -56,7 +56,7 @@
         <br>
         <div>
             <a class="pull-left" ng-click="$ctrl.goProject()">
-                <i class="fa fa-arrow-left"></i> Back to Proofread Project
+                <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Project
             </a>
             <button class="btn btn-add pull-right" ng-click="$ctrl.goSubEntities()">Continue</button>
         </div>
@@ -149,4 +149,4 @@ <h3 style="text-align: center">Proofread your Experiment Metadata</h3>
             </div>
         </div>
         <!-- Experiment Header End -->
-    </div>
\ No newline at end of file
+    </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-field-recon.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-field-recon.template.html
index 76ef28841..68cda8d4a 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-field-recon.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-field-recon.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Mission</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Collections</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goProject()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Project
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Project
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goSubEntities()">Continue</button>
     </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-hybrid.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-hybrid.template.html
index 9b0c0dc97..59ece1f79 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-hybrid.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-hybrid.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Hybrid Simulation</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goProject()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Project
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Project
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goSubEntities()">Continue</button>
     </div>
@@ -118,4 +118,4 @@ <h3 style="text-align: center">Proofread your Hybrid Simulation Metadata</h3>
         </div>
     </div>
     <!-- Hybrid Simulation Header End -->
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-simulation.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-simulation.template.html
index 2ee482b14..08ab9bc15 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-simulation.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-primary-entity/pipeline-simulation.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Simulation</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goProject()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Project
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Project
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goSubEntities()">Continue</button>
     </div>
@@ -118,4 +118,4 @@ <h3 style="text-align: center">Proofread your Simulation Metadata</h3>
         </div>
     </div>
     <!-- Simulation Header End -->
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-project/pipeline-project.component.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-project/pipeline-project.component.html
index d0283fd0d..e32a6eeb5 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-project/pipeline-project.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-project/pipeline-project.component.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -10,19 +10,19 @@
             <td class="tg-0lax">
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td class="tg-0lax" ng-hide="$ctrl.projType === 'other'">
                 <strong>Proofread {{$ctrl.placeholder}}</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td class="tg-0lax">
@@ -30,19 +30,19 @@
                 <strong ng-if="$ctrl.projType === 'field_recon'">Proofread Collections</strong>
                 <strong ng-if="$ctrl.projType != 'other' && $ctrl.projType != 'field_recon'">Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -50,7 +50,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goSelection()">
-            <i class="fa fa-arrow-left"></i> Back to Selection
+            <i role="none" class="fa fa-arrow-left"></i> Back to Selection
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goExperiment()">Continue</button>
     </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-agreement.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-agreement.html
index 0bc5940fc..ae425efdb 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-agreement.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-agreement.html
@@ -2,14 +2,14 @@
     <h4 class="modal-title" style="border:none;">
         <span>Agreement</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
 <div class="modal-body" style="padding: 30px;">
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="!$ctrl.ui.loading">
@@ -37,11 +37,11 @@ <h3>
             <button class="btn btn-add"
                     ng-click="$ctrl.publish()"
                     ng-disabled="!$ctrl.agreed || $ctrl.busy">
-                <i class="fa fa-globe">&nbsp;</i> Request DOI & Publish
+                <i role="none" class="fa fa-globe">&nbsp;</i> Request DOI & Publish
             </button>
         </div>
         <div class="alert alert-danger" ng-if="$ctrl.ui.error">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
             There was an issue when attempting to submit your project
             for revision.
             <strong>Do not attempt to publish your project again.</strong> Please
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-privacy-agreement.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-privacy-agreement.html
index 9786136ac..c05aa2969 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-privacy-agreement.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-publish/pipeline-privacy-agreement.html
@@ -2,14 +2,14 @@
     <h4 class="modal-title" style="border:none;">
         <span>Agreement</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
 <div class="modal-body" style="padding: 30px;">
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="!$ctrl.ui.loading">
@@ -109,12 +109,12 @@ <h3>
                 <button class="btn btn-add"
                         ng-click="$ctrl.publish()"
                         ng-disabled="!$ctrl.agreed1 || !$ctrl.agreed2 || $ctrl.busy">
-                    <i class="fa fa-globe">&nbsp;</i> Request DOI & Publish
+                    <i role="none" class="fa fa-globe">&nbsp;</i> Request DOI & Publish
                 </button>
             </div>
         </div>
         <div class="alert alert-danger" ng-if="$ctrl.ui.error">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
             There was an issue when attempting to submit your project
             for revision.
             <strong>Do not attempt to publish your project again.</strong> Please
@@ -154,4 +154,4 @@ <h3>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-exp.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-exp.template.html
index 7a2302b8f..e6ca75ab5 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-exp.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-exp.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,44 +18,44 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Experiment</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
     </table>
     <br>
     <div>
-        <a class="pull-left" ng-click="$ctrl.goPreview()"><i class="fa fa-arrow-left"></i> Back to Publication
+        <a class="pull-left" ng-click="$ctrl.goPreview()"><i role="none" class="fa fa-arrow-left"></i> Back to Publication
             Preview</a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goProject()" ng-disabled="$ctrl.ui.loading || !$ctrl.selectedEnts.length">Continue</button>
     </div>
@@ -84,7 +84,7 @@ <h3 style="text-align: center">Select what you want to publish</h3>
     </div>
         <div ng-show="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <!-- Reports -->
@@ -115,7 +115,7 @@ <h3 class="text-center">
         <div ng-hide="$ctrl.ui.loading" ng-repeat="experiment in $ctrl.browser.project.experiment_set">
             <div class="dropdown dropdown-spacer-lg" id="details-{{experiment.uuid}}">
                 <a ng-click="$ctrl.selectEntity(experiment)">Select this Experiment and all of its files</a>
-                <span ng-if="$ctrl.selectedEnts.includes(experiment)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                <span ng-if="$ctrl.selectedEnts.includes(experiment)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                 <button class="btn tab-gray collapsed" data-toggle="collapse"
                         data-target="#data-{{experiment.uuid}}" style="width:100%;">
                     <div class="collapse-tab">
@@ -270,7 +270,7 @@ <h3 class="text-center">
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #1568C9">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -305,7 +305,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-field.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-field.template.html
index 81fe6f9e9..2211115e4 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-field.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-field.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg"
@@ -19,44 +19,44 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Mission</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Collections</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
     </table>
     <br>
     <div>
-        <a class="pull-left" ng-click="$ctrl.goPreview()"><i class="fa fa-arrow-left"></i> Back to Publication
+        <a class="pull-left" ng-click="$ctrl.goPreview()"><i role="none" class="fa fa-arrow-left"></i> Back to Publication
             Preview</a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goProject()" ng-disabled="!$ctrl.selectedEnts.length">Continue</button>
     </div>
@@ -86,14 +86,14 @@ <h3 style="text-align: center">Select what you want to publish</h3>
         <!-- Missions -->
         <div ng-show="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <!-- Reports Collection -->
         <div ng-repeat="mission in $ctrl.orderedPrimary" ng-hide="$ctrl.ui.loading">
             <div ng-if="mission.name == 'designsafe.project.field_recon.report'">
                 <a ng-click="$ctrl.selectEntity(mission)">Select this Report and all of its files</a>
-                <span ng-if="$ctrl.selectedEnts.includes(mission)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                <span ng-if="$ctrl.selectedEnts.includes(mission)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
 
                 <div class="dropdown dropdown-spacer-lg" id="details-{{mission.uuid}}">
                     <button class="btn collapsed tab-gray" data-toggle="collapse"
@@ -171,7 +171,7 @@ <h3 class="text-center">
             <div ng-if="!$ctrl.ui.fileNav && mission.name == 'designsafe.project.field_recon.mission'">
                 <div class="dropdown dropdown-spacer-lg" id="details-{{experiment.uuid}}">
                     <a ng-click="$ctrl.selectEntity(mission)">Select this Mission and all of its files</a>
-                    <span ng-if="$ctrl.selectedEnts.includes(mission)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                    <span ng-if="$ctrl.selectedEnts.includes(mission)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                     <button class="btn tab-gray collapsed" data-toggle="collapse"
                             data-target="#data-{{mission.uuid}}" style="width:100%;">
                         <div class="collapse-tab">
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-hyb-sim.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-hyb-sim.template.html
index dade205bd..15fc9ac04 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-hyb-sim.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-hyb-sim.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,44 +18,44 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Hybrid Simulation</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
     </table>
     <br>
     <div>
-        <a class="pull-left" ng-click="$ctrl.goPreview()"><i class="fa fa-arrow-left"></i> Back to Publication
+        <a class="pull-left" ng-click="$ctrl.goPreview()"><i role="none" class="fa fa-arrow-left"></i> Back to Publication
             Preview</a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goProject()" ng-disabled="!$ctrl.selectedEnts.length">Continue</button>
     </div>
@@ -85,7 +85,7 @@ <h3 style="text-align: center">Select what you want to publish</h3>
         <!-- Hybrid Simulations -->
         <div ng-show="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <!-- Hybrid Simulation Reports -->
@@ -115,7 +115,7 @@ <h3 class="text-center">
         <div ng-hide="$ctrl.ui.loading" ng-repeat="hybsim in $ctrl.browser.project.hybridsimulation_set">
             <div class="dropdown dropdown-spacer-lg" id="details-{{hybsim.uuid}}" style="margin-top: 15px">
                 <a ng-click="$ctrl.selectEntity(hybsim)">Select this Hybrid Simulation and all of its files</a>
-                <span ng-if="$ctrl.selectedEnts.includes(hybsim)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                <span ng-if="$ctrl.selectedEnts.includes(hybsim)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                 <button class="btn tab-gray collapsed" data-toggle="collapse"
                         data-target="#data-{{hybsim.uuid}}" style="width:100%;">
                     <div class="collapse-tab">
@@ -241,7 +241,7 @@ <h3 class="text-center">
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #1568C9">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -279,7 +279,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -318,7 +318,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px;" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -357,7 +357,7 @@ <h3 class="text-center">
                                                         <tr>
                                                             <td style="padding-right: 10px;" valign="top">
                                                                 <span style="font-size: 20px; color: #BD5717">
-                                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                                 </span>
                                                             </td>
                                                             <td style="width: 100%;">
@@ -399,7 +399,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px;" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -438,7 +438,7 @@ <h3 class="text-center">
                                                         <tr>
                                                             <td style="padding-right: 10px;" valign="top">
                                                                 <span style="font-size: 20px; color: #4B3181">
-                                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                                 </span>
                                                             </td>
                                                             <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-other.component.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-other.component.html
index 143694869..411e5c2de 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-other.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-other.component.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -10,38 +10,38 @@
             <td class="tg-0lax">
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Proofread Data</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td class="tg-0lax">
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
     </table>
     <br>
     <div>
-        <a class="pull-left" ng-click="$ctrl.goPreview()"><i class="fa fa-arrow-left"></i> Back to Publication
+        <a class="pull-left" ng-click="$ctrl.goPreview()"><i role="none" class="fa fa-arrow-left"></i> Back to Publication
             Preview</a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goProject()" ng-disabled="!$ctrl.selectedListing.listing.length">Continue</button>
     </div>
@@ -58,7 +58,7 @@ <h3 style="text-align: center">Select what you want to publish</h3>
         <!-- file selection -->
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <div ng-if="!$ctrl.ui.loading">
@@ -84,4 +84,4 @@ <h3>Select files</h3>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-sim.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-sim.template.html
index f121c4ac2..36d1a938a 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-sim.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-selection/pipeline-selection-sim.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,44 +18,44 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Simulation</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
     </table>
     <br>
     <div>
-        <a class="pull-left" ng-click="$ctrl.goPreview()"><i class="fa fa-arrow-left"></i> Back to Publication
+        <a class="pull-left" ng-click="$ctrl.goPreview()"><i role="none" class="fa fa-arrow-left"></i> Back to Publication
             Preview</a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goProject()" ng-disabled="!$ctrl.selectedEnts.length">Continue</button>
     </div>
@@ -85,7 +85,7 @@ <h3 style="text-align: center">Select what you want to publish</h3>
         <!-- Simulations -->
         <div ng-show="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <!-- Simulation Reports -->
@@ -114,7 +114,7 @@ <h3 class="text-center">
         <div ng-hide="$ctrl.ui.loading" ng-repeat="simulation in $ctrl.browser.project.simulation_set">
             <div class="dropdown dropdown-spacer-lg" id="details-{{simulation.uuid}}" style="margin-top: 15px">
                 <a ng-click="$ctrl.selectEntity(simulation)">Select this Simulation and all of its files</a>
-                <span ng-if="$ctrl.selectedEnts.includes(simulation)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                <span ng-if="$ctrl.selectedEnts.includes(simulation)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                 <button class="btn tab-gray collapsed" data-toggle="collapse" data-target="#data-{{simulation.uuid}}"
                     style="width:100%;">
                     <div class="collapse-tab">
@@ -238,7 +238,7 @@ <h3 class="text-center">
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #1568C9">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -273,7 +273,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-start/pipeline-start.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-start/pipeline-start.template.html
index 7a8d1bff4..1d7b6c8ef 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-start/pipeline-start.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-start/pipeline-start.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goBack()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
 </div>
 <div class="pipeline-page">
@@ -9,14 +9,14 @@ <h3>Publish, Amend, or Version</h3>
         If you need help, attend <a href="/facilities/virtual-office-hours/" target="_blank">curation office hours</a>.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <!-- Notifications -->
     <div class="pipeline-notification">
         <div class="alert alert-warning flex-container" ng-if="$ctrl.ui.isProcessing">
-            <i class="fa fa-exclamation-triangle notification-icon"></i>
+            <i role="none" class="fa fa-exclamation-triangle notification-icon"></i>
             <div>
                 Your publication request is processing. Please allow 24 hours for this process to complete.
                 If your publication does not appear in the "Published" section of the Data Depot or if you
@@ -92,4 +92,4 @@ <h3>Add/Remove Authors</h3>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-exp.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-exp.template.html
index 100408daf..5ee1a639b 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-exp.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-exp.template.html
@@ -2,7 +2,7 @@
         <!-- progression map -->
         <div class="pull-right" style="padding-bottom: 20px;">
             <a ng-click="$ctrl.goWork()">
-                <i class="fa fa-times"></i> Exit Prepare to Publish
+                <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
             </a>
         </div>
         <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
                 <td>
                     <strong>Selection</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Proofread Project</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Proofread Experiment</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Proofread Categories</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Order Authors</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
                 <td>
                     <strong>Licenses</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
             </tr>
@@ -56,7 +56,7 @@
         <br>
         <div>
             <a class="pull-left" ng-click="$ctrl.goPrimaryEntity()">
-                <i class="fa fa-arrow-left"></i> Back to Proofread Experiment
+                <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Experiment
             </a>
             <button class="btn btn-add pull-right" ng-click="$ctrl.goAuthors()">Continue</button>
         </div>
@@ -129,7 +129,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                 <tr>
                                     <td style="padding-right: 10px;" valign="top">
                                         <span style="font-size: 20px; color: #1568C9">
-                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                         </span>
                                     </td>
                                     <td style="width: 100%;">
@@ -161,7 +161,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                         <tr>
                                             <td style="padding-right: 10px" valign="top">
                                                 <span style="font-size: 20px; color: #43A59D">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -232,4 +232,4 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                 <!-- Categories End -->
             </div>
         </div>
-    </div>
\ No newline at end of file
+    </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-field.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-field.template.html
index dd7f81988..bbd3835ec 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-field.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-field.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Mission</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Collections</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goPrimaryEntity()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Field Research 
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Field Research 
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goAuthors()">Continue</button>
     </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-hyb-sim.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-hyb-sim.template.html
index b68ff09c6..cbff1b312 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-hyb-sim.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-hyb-sim.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Hybrid Simulation</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goPrimaryEntity()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Simulation
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Simulation
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goAuthors()">Continue</button>
     </div>
@@ -130,7 +130,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                         <tr>
                             <td style="padding-right: 10px;" valign="top">
                                 <span style="font-size: 20px; color: #1568C9">
-                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                 </span>
                             </td>
                             <td style="width: 100%;">
@@ -164,7 +164,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                 <tr>
                                     <td style="padding-right: 10px" valign="top">
                                         <span style="font-size: 20px; color: #43A59D">
-                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                         </span>
                                     </td>
                                     <td style="width: 100%;">
@@ -199,7 +199,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                 <tr>
                                     <td style="padding-right: 10px;" valign="top">
                                         <span style="font-size: 20px; color: #43A59D">
-                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                         </span>
                                     </td>
                                     <td style="width: 100%;">
@@ -241,7 +241,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #BD5717">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -287,7 +287,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                 <tr>
                                     <td style="padding-right: 10px;" valign="top">
                                         <span style="font-size: 20px; color: #43A59D">
-                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                         </span>
                                     </td>
                                     <td style="width: 100%;">
@@ -329,7 +329,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #4B3181">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -410,4 +410,4 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
         </div>
     </div>
     <!-- Categories End -->
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-sim.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-sim.template.html
index d09953dfc..c2f382108 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-sim.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-sub-entity/pipeline-sub-entity-sim.template.html
@@ -2,7 +2,7 @@
     <!-- progression map -->
     <div class="pull-right" style="padding-bottom: 20px;">
         <a ng-click="$ctrl.goWork()">
-            <i class="fa fa-times"></i> Exit Prepare to Publish
+            <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
         </a>
     </div>
     <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -18,37 +18,37 @@
             <td>
                 <strong>Selection</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Project</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Simulation</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Proofread Categories</strong>
                 <div>
-                    <i class="fa fa-circle" style="color:#1CB500;"></i>
+                    <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                 </div>
             </td>
             <td>
                 <strong>Order Authors</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
             <td>
                 <strong>Licenses</strong>
                 <div>
-                    <i class="fa fa-circle-thin"></i>
+                    <i role="none" class="fa fa-circle-thin"></i>
                 </div>
             </td>
         </tr>
@@ -56,7 +56,7 @@
     <br>
     <div>
         <a class="pull-left" ng-click="$ctrl.goPrimaryEntity()">
-            <i class="fa fa-arrow-left"></i> Back to Proofread Simulation
+            <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Simulation
         </a>
         <button class="btn btn-add pull-right" ng-click="$ctrl.goAuthors()">Continue</button>
     </div>
@@ -129,7 +129,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                         <tr>
                             <td style="padding-right: 10px;" valign="top">
                                 <span style="font-size: 20px; color: #1568C9">
-                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                 </span>
                             </td>
                             <td style="width: 100%;">
@@ -162,7 +162,7 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
                                 <tr>
                                     <td style="padding-right: 10px" valign="top">
                                         <span style="font-size: 20px; color: #43A59D">
-                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                         </span>
                                     </td>
                                     <td style="width: 100%;">
@@ -229,4 +229,4 @@ <h3 style="text-align: center">Proofread your Category Metadata</h3>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-team/pipeline-team.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-team/pipeline-team.template.html
index 0a7d9a80c..b308d1543 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-team/pipeline-team.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-team/pipeline-team.template.html
@@ -2,7 +2,7 @@
         <!-- progression map -->
         <div class="pull-right" style="padding-bottom: 20px;">
             <a ng-click="$ctrl.goWork()">
-                <i class="fa fa-times"></i> Exit Prepare to Publish
+                <i role="none" class="fa fa-times"></i> Exit Prepare to Publish
             </a>
         </div>
         <table class="tg" style="table-layout: fixed; width: 100%; padding-bottom: 15px;">
@@ -10,31 +10,31 @@
                 <td class="tg-0lax">
                     <strong>Selection</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Proofread Project</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Proofread Data</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Order Authors</strong>
                     <div>
-                        <i class="fa fa-circle" style="color:#1CB500;"></i>
+                        <i role="none" class="fa fa-circle" style="color:#1CB500;"></i>
                     </div>
                 </td>
                 <td class="tg-0lax">
                     <strong>Licenses</strong>
                     <div>
-                        <i class="fa fa-circle-thin"></i>
+                        <i role="none" class="fa fa-circle-thin"></i>
                     </div>
                 </td>
             </tr>
@@ -43,7 +43,7 @@
         <form>
             <div>
                 <a class="pull-left" ng-click="$ctrl.goData()">
-                    <i class="fa fa-arrow-left"></i> Back to Proofread Data
+                    <i role="none" class="fa fa-arrow-left"></i> Back to Proofread Data
                 </a>
                 <button class="btn btn-add pull-right" ng-click="$ctrl.goLicenses()" ng-disabled="!$ctrl.saved">Continue</button>
             </div>
@@ -92,8 +92,8 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                             </div>
                         </td>
                         <td class="tg-0lax">
-                            <i class="fa fa-arrow-circle-up fa-2x" ng-click="$ctrl.orderMembers(true)"></i>
-                            <i class="fa fa-arrow-circle-down fa-2x" ng-click="$ctrl.orderMembers(false)"></i>
+                            <i role="none" class="fa fa-arrow-circle-up fa-2x" ng-click="$ctrl.orderMembers(true)"></i>
+                            <i role="none" class="fa fa-arrow-circle-down fa-2x" ng-click="$ctrl.orderMembers(false)"></i>
                         </td>
                         <td>
                             <button class="btn btn-small btn-add" ng-click="$ctrl.saveTeam()">Save</button>
@@ -103,4 +103,4 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
             </div>
             <!-- Order Team End -->
         </form>
-    </div>
\ No newline at end of file
+    </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-changes.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-changes.template.html
index cc05dcf01..b9b60c93c 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-changes.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-changes.template.html
@@ -2,7 +2,7 @@
     <a ng-class="{'btn disabled': $ctrl.ui.loading || $ctrl.ui.submitted}"
        ng-click="$ctrl.goCitation()"
     >
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.submitVersion()"
@@ -17,13 +17,13 @@ <h3>Explain Version Changes</h3>
         If you need help, attend <a href="/facilities/virtual-office-hours/" target="_blank">curation office hours</a>.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <div class="pipeline-notification">
         <div class="alert alert-success flex-container" ng-if="$ctrl.ui.success">
-            <i class="fa fa-check notification-icon"></i>
+            <i role="none" class="fa fa-check notification-icon"></i>
             <div>
                 Your publication revision has been submitted.
                 <strong>Do not attempt to update your publication again.</strong>
@@ -33,21 +33,21 @@ <h3 class="text-center">
             </div>
         </div>
         <div class="alert alert-warning flex-container" ng-if="$ctrl.ui.warning && $ctrl.prjType === 'other'">
-            <i class="fa fa-exclamation-triangle notification-icon"></i>
+            <i role="none" class="fa fa-exclamation-triangle notification-icon"></i>
             <div>
                 You are required to provide a revision description. This
                 will be displayed in the publication.
             </div>
         </div>
         <div class="alert alert-warning flex-container" ng-if="$ctrl.ui.warning && $ctrl.prjType != 'other'">
-            <i class="fa fa-exclamation-triangle notification-icon"></i>
+            <i role="none" class="fa fa-exclamation-triangle notification-icon"></i>
             <div>
                 You are required to select the procedure that is
                 relevant to your versioning changes.
             </div>
         </div>
         <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-            <i class="fa fa-times notification-icon"></i>
+            <i role="none" class="fa fa-times notification-icon"></i>
             <div>
                 There was an issue when attempting to submit your project
                 for revision.
@@ -80,4 +80,4 @@ <h3 class="text-center">
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-citation.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-citation.template.html
index ac40faaf2..122bf51a4 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-citation.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-citation.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goSelection()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goChanges()"
@@ -15,7 +15,7 @@ <h3>Confirm Author Order</h3>
         Your citation(s) will be updated to match what is shown in the preview.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
@@ -51,7 +51,7 @@ <h4>Success</h4>
                 </div>
                 <div ng-show="$ctrl.ui.loading">
                     <h3 class="text-center">
-                        <i class="fa fa-spinner fa-spin"></i> Loading...
+                        <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                     </h3>
                 </div>
                 <!-- Citation Preview -->
@@ -88,8 +88,8 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                     </tr>
                     <tr>
                         <td>
-                            <i class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, primEnt)"></i>
-                            <i class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, primEnt)"></i>
+                            <i role="none" class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, primEnt)"></i>
+                            <i role="none" class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, primEnt)"></i>
                             <a class="sort-arrows" ng-click="$ctrl.saveAuthors(primEnt, true)">Save</a>
                         </td>
                     </tr>
@@ -97,4 +97,4 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-citation.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-citation.template.html
index bea6273b8..b92814fd1 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-citation.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-citation.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goSelection()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goChanges()"
@@ -15,7 +15,7 @@ <h3>Confirm Author Order</h3>
         Your citation(s) will be updated to match what is shown in the preview.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
@@ -36,7 +36,7 @@ <h4>Success</h4>
                 </div>
                 <div ng-show="$ctrl.ui.loading">
                     <h3 class="text-center">
-                        <i class="fa fa-spinner fa-spin"></i> Loading...
+                        <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                     </h3>
                 </div>
                 <!-- Citation Preview -->
@@ -74,8 +74,8 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                     </tr>
                     <tr>
                         <td>
-                            <i class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, primEnt)"></i>
-                            <i class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, primEnt)"></i>
+                            <i role="none" class="fa fa-arrow-up fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(true, primEnt)"></i>
+                            <i role="none" class="fa fa-arrow-down fa-lg sort-arrows" ng-click="$ctrl.orderAuthors(false, primEnt)"></i>
                             <a class="sort-arrows" ng-click="$ctrl.saveAuthors(primEnt, true)">Save</a>
                         </td>
                     </tr>
@@ -83,4 +83,4 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-selection.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-selection.template.html
index 5b854c4ec..2ac17d644 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-selection.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-experiment-selection.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goStart()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goCitation()"
@@ -36,7 +36,7 @@ <h3>Version Selection</h3>
     </div>
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="!$ctrl.ui.loading">
@@ -51,11 +51,11 @@ <h3 class="text-center">
                 <div class="pipeline-selection">
                     <div ng-if="!experiment.value.dois.length">
                         <a ng-click="$ctrl.selectEntity(experiment)">Select this Experiment and all of its files</a>
-                        <span ng-if="$ctrl.selectedEnts.includes(experiment)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                        <span ng-if="$ctrl.selectedEnts.includes(experiment)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                     </div>
                     <div ng-if="experiment.value.dois.length">
                         <span>This Experiment is Required</span>
-                        <span><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                        <span><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                     </div>
                 </div>
                 <button class="btn tab-gray collapsed" data-toggle="collapse" data-target="#data-{{experiment.uuid}}" style="width:100%;">
@@ -200,7 +200,7 @@ <h3 class="text-center">
                                             <tr>
                                                 <td style="padding-right: 10px;" valign="top">
                                                     <span style="font-size: 20px; color: #1568C9">
-                                                        <i class="fa fa-level-up fa-rotate-90"></i>
+                                                        <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                     </span>
                                                 </td>
                                                 <td style="width: 100%;">
@@ -240,7 +240,7 @@ <h3 class="text-center">
                                                     <tr>
                                                         <td style="padding-right: 10px" valign="top">
                                                             <span style="font-size: 20px; color: #43A59D">
-                                                                <i class="fa fa-level-up fa-rotate-90"></i>
+                                                                <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                             </span>
                                                         </td>
                                                         <td style="width: 100%;">
@@ -314,4 +314,4 @@ <h3 class="text-center">
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-field-recon-selection.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-field-recon-selection.template.html
index c9a37a757..a7a053e44 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-field-recon-selection.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-field-recon-selection.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goStart()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goCitation()"
@@ -36,7 +36,7 @@ <h3>Version Selection</h3>
     </div>
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="!$ctrl.ui.loading">
@@ -53,11 +53,11 @@ <h3 class="text-center">
                     <div class="pipeline-selection">
                         <div ng-if="!mission.value.dois.length">
                             <a ng-click="$ctrl.selectEntity(mission)">Select this Document and all of its files</a>
-                            <span ng-if="$ctrl.selectedEnts.includes(mission)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                            <span ng-if="$ctrl.selectedEnts.includes(mission)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                         </div>
                         <div ng-if="mission.value.dois.length">
                             <span>This Document is Required</span>
-                            <span><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                            <span><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                         </div>
                     </div>
                     <button ng-click="$ctrl.logEntity(mission, 'reportsList')" class="btn collapsed tab-gray" data-toggle="collapse" data-target="#files-{{mission.uuid}}"
@@ -124,11 +124,11 @@ <h3 class="text-center">
                     <div class="pipeline-selection">
                         <div ng-if="!mission.value.dois.length">
                             <a ng-click="$ctrl.selectEntity(mission)">Select this Mission and all of its files</a>
-                            <span ng-if="$ctrl.selectedEnts.includes(mission)"><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                            <span ng-if="$ctrl.selectedEnts.includes(mission)"><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                         </div>
                         <div ng-if="mission.value.dois.length">
                             <span>This Mission is Required</span>
-                            <span><i class="fa fa-check" style="color: #1CB500;"></i></span>
+                            <span><i role="none" class="fa fa-check" style="color: #1CB500;"></i></span>
                         </div>
                     </div>
                     <button ng-click="$ctrl.logEntity(mission, 'missionsList')" class="btn tab-gray collapsed" data-toggle="collapse" data-target="#data-{{mission.uuid}}" style="width:100%;">
@@ -542,4 +542,4 @@ <h3 class="text-center">
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-citation.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-citation.template.html
index bdc13ecf0..6e75281ae 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-citation.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-citation.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goSelection()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goChanges()"
@@ -16,14 +16,14 @@ <h3>Confirm Author Order</h3>
         Your citation will be updated to match what is shown in the preview.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <!-- Notifications -->
     <div class="pipeline-notification">
         <div class="alert alert-success flex-container" ng-if="$ctrl.ui.confirmed">
-            <i class="fa fa-check notification-icon"></i>
+            <i role="none" class="fa fa-check notification-icon"></i>
             <div>
                 Your authors have been saved. Click the "Continue" button to proceed to the next step.
             </div>
@@ -45,4 +45,4 @@ <h3 class="text-center">
             </manage-authors>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-selection.template.html b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-selection.template.html
index c3b866907..a5efd9cc4 100644
--- a/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-selection.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/pipeline-version/version-other-selection.template.html
@@ -1,6 +1,6 @@
 <div class="pipeline-nav">
     <a ng-click="$ctrl.goStart()">
-        <i class="fa fa-arrow-left"></i> Back
+        <i role="none" class="fa fa-arrow-left"></i> Back
     </a>
     <button class="btn btn-small btn-add"
             ng-click="$ctrl.goCitation()"
@@ -15,14 +15,14 @@ <h3>Version Selection</h3>
         If you need help, attend <a href="/facilities/virtual-office-hours/" target="_blank">curation office hours</a>.
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
     </div>
     <div ng-if="!$ctrl.ui.loading">
         <div class="pipeline-section">
             <div class="alert alert-warning">
-                <i class="fa fa-exclamation-triangle"></i>
+                <i role="none" class="fa fa-exclamation-triangle"></i>
                 The new version will only include the files selected here. Select any previously published files that you still want in
                 the new version.
             </div>
@@ -48,4 +48,4 @@ <h3>Select files</h3>
             <files-listing listing="$ctrl.FileListingService.listings.main" show-select="true" show-tags="true" on-browse="$ctrl.onBrowse(file)"></files-listing>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/project-listing/project-listing.component.html b/designsafe/static/scripts/data-depot/components/projects/project-listing/project-listing.component.html
index d767bbb7c..e5f0d564e 100644
--- a/designsafe/static/scripts/data-depot/components/projects/project-listing/project-listing.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/project-listing/project-listing.component.html
@@ -32,7 +32,7 @@
           <tr ng-if="$ctrl.getListing().loadingScroll">
               <td colspan="4" class="text-center">
                   <span class="bg-info text-info">
-                      <i class="fa fa-spinner fa-spin"></i> Loading...
+                      <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                   </span>
               </td>
           </tr>
@@ -42,7 +42,7 @@
                  style="padding:10px; font-size:large; width:100%;"
                  class="bg-info">
               <span>
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
              </span>
             </div>
           <div ng-if="! browser.busy && browser.error" class="text-center">
@@ -55,7 +55,7 @@
   </div>
   <div ng-if="! $ctrl.getListing().projects" class="jumbotron">
       <p class="text-center">
-          <i class="fa fa-spinner fa-spin"></i> Loading projects...
+          <i role="none" class="fa fa-spinner fa-spin"></i> Loading projects...
       </p>
     </div>
   </div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/project-view/project-view.component.html b/designsafe/static/scripts/data-depot/components/projects/project-view/project-view.component.html
index 8e599e101..768ac8331 100644
--- a/designsafe/static/scripts/data-depot/components/projects/project-view/project-view.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/project-view/project-view.component.html
@@ -30,7 +30,7 @@
   </div>
   <div ng-if="$ctrl.loading">
       <h3 class="text-center">
-          <i class="fa fa-spinner fa-spin"></i> Loading...
+          <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
       </h3>
   </div>
   <div ng-if="!$ctrl.loading">
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/modals/author-information-modal.template.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/modals/author-information-modal.template.html
index 748fc9417..3e03ad678 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/modals/author-information-modal.template.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/modals/author-information-modal.template.html
@@ -1,10 +1,10 @@
 <div class="modal-header" style="background-color: #c6c6c6; display: flex; justify-content: space-between;">
     <strong>{{ $ctrl.last }}, {{ $ctrl.first }}</strong>
-    <strong ng-click="$ctrl.close()" class="fa fa-times"></strong>
+    <strong ng-click="$ctrl.close()" role="none" class="fa fa-times"></strong>
 </div>
 <div class="modal-body">
     <div data-ng-if="$ctrl.loading">
-        <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading ...
+        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading ...
     </div>
     <table ng-if="!$ctrl.loading" style="width: 95%">
         <tbody>
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-popup.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-popup.html
index 253a6baaf..967edebf1 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-popup.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-popup.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Best Practices</span>
         <span class="pull-right" ng-click="$ctrl.cancel()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
@@ -20,8 +20,8 @@ <h4 class="modal-title" style="border:none;">
             <div class="btn-container">
                 Continue
                 &ensp;
-                <i class="fa fa-arrow-right"></i>
+                <i role="none" class="fa fa-arrow-right"></i>
             </div>
         </button>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-field-recon.component.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-field-recon.component.html
index d33900120..cb041fbf8 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-field-recon.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-field-recon.component.html
@@ -32,7 +32,7 @@
     </div>
     <div ng-show="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="$ctrl.ui.fileNav && !$ctrl.ui.loading">
@@ -150,7 +150,7 @@ <h3 class="text-center">
                         <div class="well">
                             <!-- Tombstone Banner -->
                             <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(mission.uuid)">
-                                <i class="fa fa-warning notification-icon"></i>
+                                <i role="none" class="fa fa-warning notification-icon"></i>
                                 <div>
                                     <strong>The following Dataset does not exist anymore</strong><br>
                                     The Dataset with DOI:
@@ -338,7 +338,7 @@ <h3 class="text-center">
                         <div class="well">
                         <!-- Tombstone Banner -->
                         <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(mission.uuid)">
-                            <i class="fa fa-warning notification-icon"></i>
+                            <i role="none" class="fa fa-warning notification-icon"></i>
                             <div>
                                 <strong>The following Dataset does not exist anymore</strong><br>
                                 The Dataset with DOI:
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-hyb-sim.component.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-hyb-sim.component.html
index e2978946e..4d98f9e1d 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-hyb-sim.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-hyb-sim.component.html
@@ -33,7 +33,7 @@
     <!-- Hybrid Sims -->
     <div ng-show="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <!-- Project Reports -->
@@ -169,7 +169,7 @@ <h3 class="text-center">
                 <div class="well">
                     <!-- Tombstone Banner -->
                     <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(hybsim.uuid)">
-                        <i class="fa fa-warning notification-icon"></i>
+                        <i role="none" class="fa fa-warning notification-icon"></i>
                         <div>
                             <strong>The following Dataset does not exist anymore</strong><br>
                             The Dataset with DOI:
@@ -321,7 +321,7 @@ <h3 class="text-center">
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #1568C9">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -361,7 +361,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -403,7 +403,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px;" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -449,7 +449,7 @@ <h3 class="text-center">
                                                         <tr>
                                                             <td style="padding-right: 10px;" valign="top">
                                                                 <span style="font-size: 20px; color: #BD5717">
-                                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                                 </span>
                                                             </td>
                                                             <td style="width: 100%;">
@@ -498,7 +498,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px;" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
@@ -544,7 +544,7 @@ <h3 class="text-center">
                                                         <tr>
                                                             <td style="padding-right: 10px;" valign="top">
                                                                 <span style="font-size: 20px; color: #4B3181">
-                                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                                 </span>
                                                             </td>
                                                             <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-other.component.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-other.component.html
index 3481b10b2..3d42c9722 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-other.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-other.component.html
@@ -28,13 +28,13 @@ <h3 style="text-align: center;">You will select the data to be published in the
     </div>
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <div ng-if="$ctrl.readOnly">
         <div ng-show="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <div ng-if="$ctrl.ui.fileNav && !$ctrl.publication.tombstone.includes($ctrl.project.uuid)">
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-sim.component.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-sim.component.html
index ff912c836..b429e761e 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-sim.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview-sim.component.html
@@ -33,7 +33,7 @@
     <!-- Simulations -->
     <div ng-show="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <!-- Project Reports -->
@@ -170,7 +170,7 @@ <h3 class="text-center">
                 <div class="well">
                     <!-- Tombstone Banner -->
                     <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(simulation.uuid)">
-                        <i class="fa fa-warning notification-icon"></i>
+                        <i role="none" class="fa fa-warning notification-icon"></i>
                         <div>
                             <strong>The following Dataset does not exist anymore</strong><br>
                             The Dataset with DOI:
@@ -320,7 +320,7 @@ <h3 class="text-center">
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #1568C9">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -362,7 +362,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview.component.html b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview.component.html
index 974fafa17..60c4a57e2 100644
--- a/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview.component.html
+++ b/designsafe/static/scripts/data-depot/components/projects/publication-preview/publication-preview.component.html
@@ -32,7 +32,7 @@
     </div>
     <div ng-show="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <!-- Project Reports -->
@@ -166,7 +166,7 @@ <h3 class="text-center">
                 <div class="well">
                     <!-- Tombstone Banner -->
                     <div class="alert alert-warning flex-container" ng-if="$ctrl.publication.tombstone.includes(experiment.uuid)">
-                        <i class="fa fa-warning notification-icon"></i>
+                        <i role="none" class="fa fa-warning notification-icon"></i>
                         <div>
                             <strong>The following Dataset does not exist anymore</strong><br>
                             The Dataset with DOI:
@@ -349,7 +349,7 @@ <h3 class="text-center">
                                         <tr>
                                             <td style="padding-right: 10px;" valign="top">
                                                 <span style="font-size: 20px; color: #1568C9">
-                                                    <i class="fa fa-level-up fa-rotate-90"></i>
+                                                    <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                 </span>
                                             </td>
                                             <td style="width: 100%;">
@@ -392,7 +392,7 @@ <h3 class="text-center">
                                                 <tr>
                                                     <td style="padding-right: 10px" valign="top">
                                                         <span style="font-size: 20px; color: #43A59D">
-                                                            <i class="fa fa-level-up fa-rotate-90"></i>
+                                                            <i role="none" class="fa fa-level-up fa-rotate-90"></i>
                                                         </span>
                                                     </td>
                                                     <td style="width: 100%;">
diff --git a/designsafe/static/scripts/data-depot/components/published/fmt.html b/designsafe/static/scripts/data-depot/components/published/fmt.html
index 207b73f67..655a4a950 100644
--- a/designsafe/static/scripts/data-depot/components/published/fmt.html
+++ b/designsafe/static/scripts/data-depot/components/published/fmt.html
@@ -5,7 +5,7 @@
     <div class="dropdown entity-preview-header" id="details-{{simulation.uuid}}">
       <button class="btn btn-default btn-sm" data-toggle="collapse" data-target="#data-{{simulation.uuid}}"
               style="width:100%">
-        Simulation {{simulation.value.title}} <i class="fa dropdown-caret"></i>
+        Simulation {{simulation.value.title}} <i role="none" class="fa dropdown-caret"></i>
       </button>
       <div id="data-{{simulation.uuid}}" class="collapse">
 
@@ -167,7 +167,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
               style="width:100%">
         <span ng-if="!analysis.value.simulations.length">Analysis {{analysis.value.title}} </span>
         <span ng-if="analysis.value.simulations.length">Simulation Analysis {{analysis.value.title}} </span>
-        <i class="fa dropdown-caret"></i>
+        <i role="none" class="fa dropdown-caret"></i>
       </button>
           <div id="data-{{analysis.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -187,7 +187,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
               style="width:100%" class="ds-text-black">
         <span ng-if="!report.value.simulations.length">Report {{report.value.title}} </span>
         <span ng-if="report.value.simulations.length">Simulation Report {{report.value.title}} </span>
-        <i class="fa dropdown-caret"></i>
+        <i role="none" class="fa dropdown-caret"></i>
       </button>
           <div id="data-{{report.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -197,4 +197,4 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
     </div>
   </div>
 
-</div> <!-- Simulation published view close -->
\ No newline at end of file
+</div> <!-- Simulation published view close -->
diff --git a/designsafe/static/scripts/data-depot/components/published/published.component.html b/designsafe/static/scripts/data-depot/components/published/published.component.html
index cb31dde6f..b58600521 100644
--- a/designsafe/static/scripts/data-depot/components/published/published.component.html
+++ b/designsafe/static/scripts/data-depot/components/published/published.component.html
@@ -139,7 +139,7 @@
     </div>
   </div>
   <div ng-if="$ctrl.ui.loadingProjectMeta">
-    Loading... <i class="fa fa-spinner fa-spin"></i>
+    Loading... <i role="none" class="fa fa-spinner fa-spin"></i>
   </div>
   <hr>
 
@@ -176,7 +176,7 @@
         <div class="dropdown entity-preview-header" id="details-{{experiment.uuid}}">
           <button class="btn btn-default btn-sm " data-toggle="collapse" data-target="#data-{{experiment.uuid}}"
                   style="width:100%;">
-            Experiment {{experiment.value.title}}  <i class="fa dropdown-caret"></i>
+            Experiment {{experiment.value.title}}  <i role="none" class="fa dropdown-caret"></i>
           </button>
           <div id="data-{{experiment.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; margin-bottom:15px;">
@@ -388,7 +388,7 @@ <h3 style="margin-top:0">{{experiment.value.title}}</h3>
       <div class="dropdown entity-preview-header" id="details-{{modelConfig.uuid}}">
         <button class="btn btn-sm btn-default collapsed ds-text-blue" data-toggle="collapse" data-target="#files-{{modelConfig.uuid}}"
                 style="width:100%;">
-          Model Config {{modelConfig.value.title}}  <i class="fa dropdown-caret"></i>
+          Model Config {{modelConfig.value.title}}  <i role="none" class="fa dropdown-caret"></i>
         </button>
         <div id="files-{{modelConfig.uuid}}" class="collapse">
           <files-listing show-select="true" on-browse="$ctrl.onBrowse(file)" listing="$ctrl.FileListingService.listings[modelConfig.uuid]"></files-listing>
@@ -399,7 +399,7 @@ <h3 style="margin-top:0">{{experiment.value.title}}</h3>
       <div class="dropdown entity-preview-header" id="details-{{sensorList.uuid}}">
         <button class="btn btn-sm btn-default collapsed ds-text-green" data-toggle="collapse" data-target="#files-{{sensorList.uuid}}"
                 style="width:100%;">
-          Sensor List {{sensorList.value.title}}  <i class="fa dropdown-caret"></i>
+          Sensor List {{sensorList.value.title}}  <i role="none" class="fa dropdown-caret"></i>
         </button>
         <div id="files-{{sensorList.uuid}}" class="collapse">
           <files-listing show-select="true" on-browse="$ctrl.onBrowse(file)" listing="$ctrl.FileListingService.listings[sensorList.uuid]"></files-listing>
@@ -412,7 +412,7 @@ <h3 style="margin-top:0">{{experiment.value.title}}</h3>
         <div class="dropdown entity-preview-header" id="details-{{analysis.uuid}}">
           <button class="btn btn-default btn-sm ds-text-light-blue" data-toggle="collapse" data-target="#files-{{analysis.uuid}}"
                   style="width:100%;">
-            Analysis {{analysis.value.title}}  <i class="fa dropdown-caret"></i>
+            Analysis {{analysis.value.title}}  <i role="none" class="fa dropdown-caret"></i>
           </button>
           <div id="files-{{analysis.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -421,7 +421,7 @@ <h3 style="margin-top:0;">{{analysis.value.title}}</h3>
                 <span style="font-weight:bold;">Description: </span>{{analysis.value.description}}</p>
                 <button class="btn btn-link btn-sm"
                         ng-click="$ctrl.showText(analysis.value.description)">
-                  <i class="fa fa-external-link"></i> Show
+                  <i role="none" class="fa fa-external-link"></i> Show
                 </button>
               </div>
             </div>
@@ -447,7 +447,7 @@ <h3 style="margin-top:0;">{{analysis.value.title}}</h3>
         <div class="dropdown entity-preview-header" id="details-{{report.uuid}}">
           <button class="btn btn-default btn-sm" data-toggle="collapse" data-target="#files-{{report.uuid}}"
                   style="width:100%;">
-            Report {{report.value.title}}  <i class="fa dropdown-caret"></i>
+            Report {{report.value.title}}  <i role="none" class="fa dropdown-caret"></i>
           </button>
           <div id="files-{{report.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -459,7 +459,7 @@ <h3 style="margin-top:0;">{{report.value.title}}</h3>
                 </p>
                 <button class="btn btn-link btn-sm"
                         ng-click="$ctrl.showText(analysis.value.description)">
-                  <i class="fa fa-external-link"></i> Show
+                  <i role="none" class="fa fa-external-link"></i> Show
                 </button>
               </div>
             <div style="padding:5px; margin:5px 0px; height:60px; overflow:hidden; word-wrap:overflow; display:inline-block; float:right;">
@@ -482,7 +482,7 @@ <h3 style="margin-top:0;">{{report.value.title}}</h3>
     <div class="dropdown entity-preview-header" id="details-{{simulation.uuid}}">
       <button class="btn btn-default btn-sm" data-toggle="collapse" data-target="#data-{{simulation.uuid}}"
               style="width:100%">
-        Simulation {{simulation.value.title}} <i class="fa dropdown-caret"></i>
+        Simulation {{simulation.value.title}} <i role="none" class="fa dropdown-caret"></i>
       </button>
       <div id="data-{{simulation.uuid}}" class="collapse">
 
@@ -644,7 +644,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
               style="width:100%">
         <span ng-if="!analysis.value.simulations.length">Analysis {{analysis.value.title}} </span>
         <span ng-if="analysis.value.simulations.length">Simulation Analysis {{analysis.value.title}} </span>
-        <i class="fa dropdown-caret"></i>
+        <i role="none" class="fa dropdown-caret"></i>
       </button>
           <div id="data-{{analysis.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -664,7 +664,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
               style="width:100%" class="ds-text-black">
         <span ng-if="!report.value.simulations.length">Report {{report.value.title}} </span>
         <span ng-if="report.value.simulations.length">Simulation Report {{report.value.title}} </span>
-        <i class="fa dropdown-caret"></i>
+        <i role="none" class="fa dropdown-caret"></i>
       </button>
           <div id="data-{{report.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -683,7 +683,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
     <div class="dropdown entity-preview-header" id="details-{{simulation.uuid}}">
       <button class="btn btn-default btn-sm" data-toggle="collapse" data-target="#data-{{simulation.uuid}}"
               style="width:100%">
-        Hybrid Simulation {{simulation.value.title}} <i class="fa dropdown-caret"></i>
+        Hybrid Simulation {{simulation.value.title}} <i role="none" class="fa dropdown-caret"></i>
       </button>
       <div id="data-{{simulation.uuid}}" class="collapse">
 
@@ -914,7 +914,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
               style="width:100%">
         <span ng-if="!analysis.value.simulations.length">Analysis {{analysis.value.title}} </span>
         <span ng-if="analysis.value.simulations.length">Simulation Analysis {{analysis.value.title}} </span>
-        <i class="fa dropdown-caret"></i>
+        <i role="none" class="fa dropdown-caret"></i>
       </button>
           <div id="data-{{analysis.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
@@ -933,7 +933,7 @@ <h3 style="margin-top:0">{{simulation.value.title}}</h3>
               style="width:100%">
         <span ng-if="!report.value.simulations.length">Report1 {{report.value.title}} </span>
         <span ng-if="report.value.simulations.length">Simulation Report {{report.value.title}} </span>
-        <i class="fa dropdown-caret"></i>
+        <i role="none" class="fa dropdown-caret"></i>
       </button>
           <div id="data-{{report.uuid}}" class="collapse">
             <div style="border:1px solid black; background:white; padding:5px; margin-bottom:15px;">
diff --git a/designsafe/static/scripts/data-depot/components/published/published.html b/designsafe/static/scripts/data-depot/components/published/published.html
index 479e717b8..e67e5dcae 100644
--- a/designsafe/static/scripts/data-depot/components/published/published.html
+++ b/designsafe/static/scripts/data-depot/components/published/published.html
@@ -1,5 +1,5 @@
 <div ng-if="$ctrl.ui.loading">
-Loading... <i class="fa fa-spinner fa-spin"></i>
+Loading... <i role="none" class="fa fa-spinner fa-spin"></i>
 </div>
 
 <div 
diff --git a/designsafe/static/scripts/data-depot/templates/view-project.html b/designsafe/static/scripts/data-depot/templates/view-project.html
index 5a4b306b0..f4d6cd4e2 100644
--- a/designsafe/static/scripts/data-depot/templates/view-project.html
+++ b/designsafe/static/scripts/data-depot/templates/view-project.html
@@ -8,7 +8,7 @@ <h3>{{$ctrl.data.publication.project.value.title}}</h3>
     <div class="modal-row">
       <div class="col-sm-3 det-label">
       <yamz-term term-id="h1551" data-toggle="tooltip">
-        <i class="fa fa-question-circle"></i>
+        <i role="none" class="fa fa-question-circle"></i>
       </yamz-term>
       <span style="font-weight:bold;">Project ID:</span>
       </div>
@@ -38,7 +38,7 @@ <h3>{{$ctrl.data.publication.project.value.title}}</h3>
     <div class="modal-row">
      <div class="col-sm-3 det-label">
       <yamz-term term-id="h1264" data-toggle="tooltip">
-        <i class="fa fa-question-circle"></i>
+        <i role="none" class="fa fa-question-circle"></i>
       </yamz-term>
       <span style="font-weight:bold;">Award Number:</span>
      </div>
@@ -50,7 +50,7 @@ <h3>{{$ctrl.data.publication.project.value.title}}</h3>
     <div class="modal-row">
      <div class="col-sm-3 det-label">
       <yamz-term term-id="h1550" data-toggle="tooltip">
-        <i class="fa fa-question-circle"></i>
+        <i role="none" class="fa fa-question-circle"></i>
       </yamz-term>
       <span style="font-weight:bold;">Project Type:</span>
     </div>
@@ -75,7 +75,7 @@ <h3>{{$ctrl.data.publication.project.value.title}}</h3>
     <div class="modal-row">
      <div class="col-sm-3 det-label">
       <yamz-term term-id="h1552" data-toggle="tooltip">
-        <i class="fa fa-question-circle"></i>
+        <i role="none" class="fa fa-question-circle"></i>
       </yamz-term>
       <span style="font-weight:bold;">Description:</span>
     </div>
diff --git a/designsafe/static/scripts/geo/html/help.html b/designsafe/static/scripts/geo/html/help.html
index cc06eb3d8..e6b5a0abd 100644
--- a/designsafe/static/scripts/geo/html/help.html
+++ b/designsafe/static/scripts/geo/html/help.html
@@ -9,10 +9,10 @@ <h3> Layers </h3>
         checkbox for that layer group will show/hide all features in the group.
       </p>
       <img class="image-responsive" src="/static/designsafe/apps/geo/images/help-layers.jpg"></img>
-      <p> <i class="fa fa-pencil"> </i> - Edit project name / details </p>
-      <p> <i class="fa fa-gear"> </i> - Show/hide the layer group tools. </p>
-      <p> <i class="fa fa-crosshairs"></i> - Zoom to feature. </p>
-      <p> <i class="fa fa-chevron-left"> </i> - Show/hide the individual features in the group. </p>
+      <p> <i role="none" class="fa fa-pencil"> </i> - Edit project name / details </p>
+      <p> <i role="none" class="fa fa-gear"> </i> - Show/hide the layer group tools. </p>
+      <p> <i role="none" class="fa fa-crosshairs"></i> - Zoom to feature. </p>
+      <p> <i role="none" class="fa fa-chevron-left"> </i> - Show/hide the individual features in the group. </p>
     </div>
     <div class="col-md-6">
       <div class="col-md-6">
diff --git a/designsafe/static/scripts/geo/html/index.html b/designsafe/static/scripts/geo/html/index.html
index bbcbda057..d8ec058a2 100644
--- a/designsafe/static/scripts/geo/html/index.html
+++ b/designsafe/static/scripts/geo/html/index.html
@@ -2,19 +2,19 @@
   <!-- <div id="navbar">
     <div class="nav-icon" tooltip="Designsafe Home" tooltip-placement="right">
       <a href="/">
-        <i class="fa fa-home"></i>
+        <i role="none" class="fa fa-home"></i>
       </a>
     </div>
     <div class="nav-icon" ui-sref="geo.map" ui-sref-active="active" tooltip="Hazmapper" tooltip-placement="right">
-      <i class="fa fa-map "></i>
+      <i role="none" class="fa fa-map "></i>
     </div>
     <div class="nav-icon" tooltip="DataDepot" tooltip-placement="right">
       <a href="/data/browser">
-        <i class="fa fa-database"></i>
+        <i role="none" class="fa fa-database"></i>
       </a>
     </div>
     <div class="nav-icon" ui-sref="geo.help" ui-sref-active="active" tooltip="Hazmapper Help" tooltip-placement="right">
-      <i class="fa fa-question-circle"></i>
+      <i role="none" class="fa fa-question-circle"></i>
     </div>
   </div>
 -->
diff --git a/designsafe/static/scripts/geo/html/map.html b/designsafe/static/scripts/geo/html/map.html
index a6abe1031..f93837c31 100644
--- a/designsafe/static/scripts/geo/html/map.html
+++ b/designsafe/static/scripts/geo/html/map.html
@@ -15,12 +15,12 @@
     ng-mouseleave="vm.title_hover=false">
   <span class="strong map-title"> {{vm.project.name}} </span>
 
-  <i class="fa fa-pencil pull-right" ng-click="vm.edit_title=!vm.edit_title"></i>
+  <i role="none" class="fa fa-pencil pull-right" ng-click="vm.edit_title=!vm.edit_title"></i>
 </li>
 
 <li class="list-group-item menu clearfix action" ng-click="vm.createLayerGroup()">
   <div uib-tooltip="Create a new Layer Group">
-    <i class="fa fa-plus"> </i> <span class="strong"> New Layer Group </span>
+    <i role="none" class="fa fa-plus"> </i> <span class="strong"> New Layer Group </span>
   </div>
 </li>
 
@@ -35,27 +35,27 @@
              ng-click="lg.show_contents= !lg.show_contents"></i>
     </div>
     <!-- <div>
-      <i class="fa fa-database"></i>
+      <i role="none" class="fa fa-database"></i>
     </div> -->
     <div ng-click="vm.selectActiveLayerGroup(lg)">
       <span class="pull-left" ng-hide="lg.show_edit_label"> {{lg.label}} </span>
       <div ng-show="lg.show_edit_label">
         <input type="text" ng-model="lg.label">
-        <i class="fa fa-check" ng-click="lg.show_edit_label=false"></i>
+        <i role="none" class="fa fa-check" ng-click="lg.show_edit_label=false"></i>
       </div>
       <span class="lg-count" ng-show="!lg.show_edit_label"> {{lg.numFeatures()}} features </span>
     </div>
     <div class="pull-right">
-      <i class="fa fa-pencil" ng-show="lg.show_edit_icon" ng-click="lg.show_edit_label=true"></i>
+      <i role="none" class="fa fa-pencil" ng-show="lg.show_edit_icon" ng-click="lg.show_edit_label=true"></i>
       <input type="checkbox" ng-model="lg.show" ng-change="vm.showHideLayerGroup(lg)"></input>
-      <i class="fa fa-gear" ng-click="lg.show_tools= !lg.show_tools" uib-tooltip="Show/Hide tools" tooltip-placement="left" tooltip-popup-delay="1000"></i>
+      <i role="none" class="fa fa-gear" ng-click="lg.show_tools= !lg.show_tools" uib-tooltip="Show/Hide tools" tooltip-placement="left" tooltip-popup-delay="1000"></i>
     </div>
   </li>
   <li class="list-group-item menu lg-tools clearfix" ng-show="lg.show_tools">
     <div>
       <span> Tools: </span>
-      <i class="fa fa-trash" ng-click="vm.deleteLayerGroup(lg, $index)" uib-tooltip="Delete this layer group" > </i>
-      <i class="fa fa-crosshairs" ng-click="vm.zoomTo(lg.feature_group)" uib-tooltip="Zoom to group"></i>
+      <i role="none" class="fa fa-trash" ng-click="vm.deleteLayerGroup(lg, $index)" uib-tooltip="Delete this layer group" > </i>
+      <i role="none" class="fa fa-crosshairs" ng-click="vm.zoomTo(lg.feature_group)" uib-tooltip="Zoom to group"></i>
     </div>
   </li>
   <li class="list-group-item menu clearfix subgroup"
@@ -81,10 +81,10 @@
       <div ng-if="feature.options.label"> {{ feature.options.label }} </div>
       <div class="pull-right">
         <div class="pull-left">
-          <i class="fa fa-trash" ng-show="feature.hover" ng-click="vm.delete_feature(lg, feature); $event.stopPropagation()"></i>
+          <i role="none" class="fa fa-trash" ng-show="feature.hover" ng-click="vm.delete_feature(lg, feature); $event.stopPropagation()"></i>
         </div>
         <div class="pull-right">
-          <i class="fa fa-crosshairs" ng-click="vm.zoomTo(feature); $event.stopPropagation()"> </i>
+          <i role="none" class="fa fa-crosshairs" ng-click="vm.zoomTo(feature); $event.stopPropagation()"> </i>
         </div>
       </div>
   </li>
@@ -95,7 +95,7 @@
 
 <div id="current_layer_details" ng-if="vm.current_layer">
   <div class="tools">
-    <i class="fa fa-close" ng-click="vm.current_layer=null"></i>
+    <i role="none" class="fa fa-close" ng-click="vm.current_layer=null"></i>
   </div>
   <li class="list-group-item menu clearfix">
     <div class="left">
@@ -191,7 +191,7 @@
       <textarea class="form-control input-sm kv-textarea" ng-model="meta.value"></textarea>
     </div>
     <div class="kv-buttons">
-      <i class="fa fa-trash" ng-click="vm.metadataDelete($index, vm.current_layer)"> </i>
+      <i role="none" class="fa fa-trash" ng-click="vm.metadataDelete($index, vm.current_layer)"> </i>
     </div>
   </li>
 
@@ -214,7 +214,7 @@
   </li>
 
   <li class="list-group-item menu clearfix action" ng-click="vm.adding_metadata = true">
-    <i class="fa fa-plus"> </i> Add record
+    <i role="none" class="fa fa-plus"> </i> Add record
   </li>
 
 </div> <!-- End of current layer details -->
@@ -276,11 +276,11 @@
         </div> -->
       </div>
       <!-- <div class="btn-group" role="group">
-        <button class="btn btn-xs btn-default" tooltip="undo" tooltip-placement="bottom"> <i class="fa fa-undo"></i></button>
-        <button class="btn btn-xs btn-default" tooltip="redo" tooltip-placement="bottom"> <i class="fa fa-repeat"></i></button>
+        <button class="btn btn-xs btn-default" tooltip="undo" tooltip-placement="bottom"> <i role="none" class="fa fa-undo"></i></button>
+        <button class="btn btn-xs btn-default" tooltip="redo" tooltip-placement="bottom"> <i role="none" class="fa fa-repeat"></i></button>
       </div> -->
 
-      <i class="fa fa-spin fa-refresh blue" ng-show="vm.loading"></i>
+      <i role="none" class="fa fa-spin fa-refresh blue" ng-show="vm.loading"></i>
 
       <div id="mouse_coordinates" class="pull-right">
         <span> Lat: {{vm.current_mouse_coordinates.lat | number:4}} Lon: {{vm.current_mouse_coordinates.lng| number:4 }} </span>
diff --git a/designsafe/static/scripts/nco/components/nco-scheduler-filters/nco-scheduler-filters.template.html b/designsafe/static/scripts/nco/components/nco-scheduler-filters/nco-scheduler-filters.template.html
index 4a3093952..1ea87e9a9 100644
--- a/designsafe/static/scripts/nco/components/nco-scheduler-filters/nco-scheduler-filters.template.html
+++ b/designsafe/static/scripts/nco/components/nco-scheduler-filters/nco-scheduler-filters.template.html
@@ -13,12 +13,12 @@ <h3 class="sort-title">Filters:</h3>
     </div>
     <div class="filter form-group">
         <span class="fa-stack fa-lg" style="margin: -8px;" ng-if="$ctrl.historyEnabled" data-ng-click="$ctrl.toggleHistory()">
-            <i class="fa fa-square fa-stack-1x" style="color: white;"></i>
-            <i class="fa fa-check-square fa-stack-1x" style="color: #1CB500;"></i>
+            <i role="none" class="fa fa-square fa-stack-1x" style="color: white;"></i>
+            <i role="none" class="fa fa-check-square fa-stack-1x" style="color: #1CB500;"></i>
         </span>
         <span class="fa-stack fa-lg" style="margin: -8px;" ng-if="!$ctrl.historyEnabled" data-ng-click="$ctrl.toggleHistory()">
-            <i class="fa fa-square fa-stack-1x" style="color: white;"></i>
-            <i class="fa fa-square-o fa-stack-1x" style="color: lightgray;"></i>
+            <i role="none" class="fa fa-square fa-stack-1x" style="color: white;"></i>
+            <i role="none" class="fa fa-square-o fa-stack-1x" style="color: lightgray;"></i>
         </span>
         <label date-ng-click="$ctrl.toggleHistory()">Show Past Events</label>
     </div>
diff --git a/designsafe/static/scripts/nco/components/nco-scheduler/nco-scheduler.template.html b/designsafe/static/scripts/nco/components/nco-scheduler/nco-scheduler.template.html
index 470a4c4b6..3c5bec265 100644
--- a/designsafe/static/scripts/nco/components/nco-scheduler/nco-scheduler.template.html
+++ b/designsafe/static/scripts/nco/components/nco-scheduler/nco-scheduler.template.html
@@ -1,6 +1,6 @@
 <div class="nco-scheduler-component">
     <span class="bg-info text-info" data-ng-if="$ctrl._ui.loading">
-        <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
     </span>
     <nco-scheduler-filters
         data-filter-and-sort="$ctrl.filterAndSort(filters, sort)">&nbsp;</nco-scheduler-filters>
diff --git a/designsafe/static/scripts/nco/components/nco-ttc-grants/nco-ttc-grants.template.html b/designsafe/static/scripts/nco/components/nco-ttc-grants/nco-ttc-grants.template.html
index a517c11aa..d9c9b0bcb 100644
--- a/designsafe/static/scripts/nco/components/nco-ttc-grants/nco-ttc-grants.template.html
+++ b/designsafe/static/scripts/nco/components/nco-ttc-grants/nco-ttc-grants.template.html
@@ -23,7 +23,7 @@
     <br />
 
     <span class="bg-info text-info" data-ng-if="$ctrl._ui.loading">
-        <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
     </span>
 
     <table class="nco-ttc-grants">
diff --git a/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-image-preview/image-preview.template.html b/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-image-preview/image-preview.template.html
index ed4cb6398..bf9828467 100644
--- a/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-image-preview/image-preview.template.html
+++ b/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-image-preview/image-preview.template.html
@@ -5,34 +5,34 @@ <h3 class="modal-title">
 </div>
 <div class="modal-body" ng-if="$ctrl.images.length > 0">
     <div ng-if="$ctrl.loading" style="text-align: center;">
-        <i style="font-size:150px;line-height:400px" class="fa fa-spinner fa-spin"></i>
+        <i style="font-size:150px;line-height:400px" role="none" class="fa fa-spinner fa-spin"></i>
     </div>
     <file-metadata ng-if="!$ctrl.loading" file="$ctrl.images[$ctrl.active]"></file-metadata>
     <div ng-if="!$ctrl.loading" class="table-preview actions text-center">
         <button class="btn btn-sm btn-default" 
                 ng-if="$ctrl.images[$ctrl.active].tests.canRename" 
                 ng-click="$ctrl.rename($ctrl.images[$ctrl.active])">
-            <i class="fa fa-pencil"></i> Rename
+            <i role="none" class="fa fa-pencil"></i> Rename
         </button>
         <button class="btn btn-sm btn-default" 
                 ng-if="$ctrl.images[$ctrl.active].tests.canMove" 
                 ng-click="$ctrl.move($ctrl.images[$ctrl.active])">
-            <i class="fa fa-arrows"></i> Move
+            <i role="none" class="fa fa-arrows"></i> Move
         </button>
         <button class="btn btn-sm btn-default" 
                 ng-if="$ctrl.images[$ctrl.active].tests.canCopy" 
                 ng-click="$ctrl.copy($ctrl.images[$ctrl.active])">
-            <i class="fa fa-copy"></i> Copy
+            <i role="none" class="fa fa-copy"></i> Copy
         </button>
         <button class="btn btn-sm btn-default" 
                 ng-if="$ctrl.images[$ctrl.active].tests.canDownload" 
                 ng-click="$ctrl.download($ctrl.images[$ctrl.active])">
-            <i class="fa fa-cloud-download"></i> Download
+            <i role="none" class="fa fa-cloud-download"></i> Download
         </button>
         <button class="btn btn-sm btn-danger" 
                 ng-if="$ctrl.images[$ctrl.active].tests.canDelete" 
                 ng-click="$ctrl.rm($ctrl.images[$ctrl.active])">
-            <i class="fa fa-trash"></i> Delete
+            <i role="none" class="fa fa-trash"></i> Delete
         </button>
     </div>
     <div ng-if="!$ctrl.loading" uib-carousel active="$ctrl.active">
diff --git a/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-preview/data-browser-service-preview.component.html b/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-preview/data-browser-service-preview.component.html
index f1e8a2f0d..61b6f1260 100644
--- a/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-preview/data-browser-service-preview.component.html
+++ b/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-preview/data-browser-service-preview.component.html
@@ -13,19 +13,19 @@ <h3 class="modal-title">File Preview: {{ $ctrl.resolve.file.name }}</h3>
     </div>
     <div ng-if="!$ctrl.isHazmapper()" class="table-preview actions text-center">
         <button class="btn btn-sm btn-default" ng-if="$ctrl.tests.rename" ng-click="$ctrl.rename()">
-            <i class="fa fa-pencil"></i> Rename
+            <i role="none" class="fa fa-pencil"></i> Rename
         </button>
 
         <button class="btn btn-sm btn-default" ng-if="$ctrl.tests.move" ng-click="$ctrl.move()">
-            <i class="fa fa-arrows"></i> Move
+            <i role="none" class="fa fa-arrows"></i> Move
         </button>
 
         <button class="btn btn-sm btn-default" ng-if="$ctrl.tests.copy" ng-click="$ctrl.copy()">
-            <i class="fa fa-copy"></i> Copy
+            <i role="none" class="fa fa-copy"></i> Copy
         </button>
 
         <button class="btn btn-sm btn-default" ng-if="$ctrl.tests.download" ng-click="$ctrl.download()">
-            <i class="fa fa-cloud-download"></i> Download
+            <i role="none" class="fa fa-cloud-download"></i> Download
         </button>
     </div>
 
@@ -56,7 +56,7 @@ <h3 class="modal-title">File Preview: {{ $ctrl.resolve.file.name }}</h3>
             <div ng-if="$ctrl.isHazmapper()" style="font-size:32px">
               Opening in Hazmapper
             </div>
-            <i class="fa fa-spinner fa-spin" style="font-size:150px;line-height:400px" ng-if="$ctrl.loading" id="loading_ind"></i>
+            <i role="none" class="fa fa-spinner fa-spin" style="font-size:150px;line-height:400px" ng-if="$ctrl.loading" id="loading_ind"></i>
         </div>
 
         </div>
@@ -98,16 +98,16 @@ <h3 class="modal-title">File Preview: {{ $ctrl.resolve.file.name }}</h3>
             </div>
         </div>
         <div ng-if="$ctrl.busy">
-            <i class="fa fa-spinner fa-spin" style="font-size:150px"></i>
+            <i role="none" class="fa fa-spinner fa-spin" style="font-size:150px"></i>
         </div>
         <div ng-if="! $ctrl.busy && $ctrl.previewError">
             <div class="alert alert-warning">
                 <p class="lead">{{ $ctrl.previewError }}</p>
             </div>
-            <i class="fa {{ $ctrl.file.icon() }}" style="font-size:150px"></i>
+            <i role="none" class="fa {{ $ctrl.file.icon() }}" style="font-size:150px"></i>
         </div>
         <div class="embed-responsive embed-responsive-4by3" ng-if="! $ctrl.busy && $ctrl.previewHref">
-            <i class="fa fa-spinner fa-spin" style="font-size:150px;line-height:400px" id="loading_ind"></i>
+            <i role="none" class="fa fa-spinner fa-spin" style="font-size:150px;line-height:400px" id="loading_ind"></i>
             <iframe class="embed-responsive-item" ng-src="{{ $ctrl.previewHref }}" id="framepreview"></iframe>
             <script type="text/javascript">
                 $('#framepreview').on('load', function () {
diff --git a/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-upload/data-browser-service-upload.template.html b/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-upload/data-browser-service-upload.template.html
index d8249773f..cf01f11bf 100644
--- a/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-upload/data-browser-service-upload.template.html
+++ b/designsafe/static/scripts/ng-designsafe/components/modals/data-browser-service-upload/data-browser-service-upload.template.html
@@ -3,11 +3,11 @@ <h3 class="modal-title">Upload {{ $ctrl.resolve.directory && $ctrl.directoryUplo
 </div>
 <div class="modal-body">
     <p ng-if="$ctrl.directory && ! $ctrl.directoryUploadSupported" class="alert alert-warning">
-        <i class="fa fa-warning"></i>
+        <i role="none" class="fa fa-warning"></i>
         This browser does not support folder upload. You can still upload multiple files.
     </p>
     <p>
-        Uploading to <code><i class="fa fa-folder"></i> {{ $ctrl.resolve.path }}</code>:
+        Uploading to <code><i role="none" class="fa fa-folder"></i> {{ $ctrl.resolve.path }}</code>:
     </p>
     <form>
         <div class="form-group">
@@ -28,17 +28,17 @@ <h3 class="modal-title">Upload {{ $ctrl.resolve.directory && $ctrl.directoryUplo
                         <div class="col-sm-3 hidden-xs">({{ upload.size|bytes }})</div>
                         <div class="col-sm-3 col-xs-3">
                             <span ng-if="$ctrl.FileOperationService.operations.upload.status[upload.key] === 'pending'" class="text-muted">
-                                <i class="fa fa-clock-o"></i> <span class="sr-only">Pending</span>
+                                <i role="none" class="fa fa-clock-o"></i> <span class="sr-only">Pending</span>
                                 <button ng-click="$ctrl.removeUpload($index)" class="btn btn-default btn-xs">Remove</button>
                             </span>
                             <span ng-if="$ctrl.FileOperationService.operations.upload.status[upload.key] === 'uploading'" class="text-info">
-                                <i class="fa fa-refresh fa-spin"></i> <span class="sr-only">Upload in progress</span>
+                                <i role="none" class="fa fa-refresh fa-spin"></i> <span class="sr-only">Upload in progress</span>
                             </span>
                             <span ng-if="$ctrl.FileOperationService.operations.upload.status[upload.key] === 'success'" class="text-success">
-                                <i class="fa fa-check-circle"></i> <span class="sr-only">Uploaded</span>
+                                <i role="none" class="fa fa-check-circle"></i> <span class="sr-only">Uploaded</span>
                             </span>
                             <span ng-if="$ctrl.FileOperationService.operations.upload.status[upload.key] === 'error'" class="text-danger">
-                                <i class="fa fa-times-circle"></i> <span>{{ upload.error }}</span>
+                                <i role="none" class="fa fa-times-circle"></i> <span>{{ upload.error }}</span>
                             </span>
                         </div>
                     </div>
@@ -52,7 +52,7 @@ <h3 class="modal-title">Upload {{ $ctrl.resolve.directory && $ctrl.directoryUplo
             <div class="pull-right">
                 <button class="btn btn-primary" ng-disabled="($ctrl.uploadInProgress() || state.retry || ($ctrl.uploads|length) === 0 ) || state.ui.tagFiles" type="button" ng-click="$ctrl.upload()">
                     <span ng-if="! $ctrl.uploadInProgress()">{{$ctrl.hasFailedUploads() ? 'Retry' : 'Begin upload'}}</span>
-                    <span ng-if="$ctrl.uploadInProgress()"><i class="fa fa-refresh fa-spin"></i> Uploading</span>
+                    <span ng-if="$ctrl.uploadInProgress()"><i role="none" class="fa fa-refresh fa-spin"></i> Uploading</span>
                 </button>
                 <button class="btn btn-default" ng-disabled="$ctrl.uploadInProgress()" type="button" ng-click="$ctrl.cancel()">Close</button>
             </div>
diff --git a/designsafe/static/scripts/ng-designsafe/directives/templates/prj-pub-preview-metadata-template.html b/designsafe/static/scripts/ng-designsafe/directives/templates/prj-pub-preview-metadata-template.html
index 066baf9c0..b32b28ac7 100644
--- a/designsafe/static/scripts/ng-designsafe/directives/templates/prj-pub-preview-metadata-template.html
+++ b/designsafe/static/scripts/ng-designsafe/directives/templates/prj-pub-preview-metadata-template.html
@@ -346,7 +346,7 @@
 <!-- tombstone banners can be displayed over publishable metadata -->
 <div class="alert alert-warning flex-container"
         ng-if="$ctrl.publication.tombstone.includes($ctrl.project.uuid) && $ctrl.project.projectType === 'other'">
-    <i class="fa fa-warning notification-icon"></i>
+    <i role="none" class="fa fa-warning notification-icon"></i>
     <div>
         <strong>The following Dataset does not exist anymore</strong><br>
         The Dataset with DOI:
@@ -354,4 +354,4 @@
         was incomplete and removed. The metadata is still available.
     </div>
 </div>
-<!-- end Tombstone -->
\ No newline at end of file
+<!-- end Tombstone -->
diff --git a/designsafe/static/scripts/notifications/html/badge.html b/designsafe/static/scripts/notifications/html/badge.html
index 1ba49bad8..592788205 100644
--- a/designsafe/static/scripts/notifications/html/badge.html
+++ b/designsafe/static/scripts/notifications/html/badge.html
@@ -1,6 +1,6 @@
 <div id="notification-container" class="dropdown btn btn-link" uib-dropdown auto-close="outsideClick">
   <a id="dLabel" class="dropdown-toggle" role="button" uib-dropdown-toggle ng-click="list()">
-    <i id="notification_bell" class="fa fa-bell fa-2x"></i>
+    <i id="notification_bell" role="none" class="fa fa-bell fa-2x"></i>
     <span id="notification_badge" class="label label-as-badge" ng-class="data.unread > 0 ? 'label-info' : 'label-default'" title="Notifications">
       {{data.unread}}
     </span>
diff --git a/designsafe/static/scripts/notifications/html/notification_list.html b/designsafe/static/scripts/notifications/html/notification_list.html
index 21b2d2991..95bcd5c93 100644
--- a/designsafe/static/scripts/notifications/html/notification_list.html
+++ b/designsafe/static/scripts/notifications/html/notification_list.html
@@ -89,7 +89,7 @@ <h4>Coming soon!</h4>
 </div>
 
 <div ng-if="data.notifications.length === 0" class="jumbotron text-center">
-  <i class="fa fa-bell fa-2x text-muted"></i>
+  <i role="none" class="fa fa-bell fa-2x text-muted"></i>
   <h2>No unread notifications.</h2>
   <p>
     You have no unread notifications.
diff --git a/designsafe/static/scripts/projects/components/amend-entity-modal/amend-entity.template.html b/designsafe/static/scripts/projects/components/amend-entity-modal/amend-entity.template.html
index 621e10644..24512f245 100644
--- a/designsafe/static/scripts/projects/components/amend-entity-modal/amend-entity.template.html
+++ b/designsafe/static/scripts/projects/components/amend-entity-modal/amend-entity.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Amend Metadata</span>
         <span class="pull-right" data-ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
diff --git a/designsafe/static/scripts/projects/components/confirm-message/confirm-message.template.html b/designsafe/static/scripts/projects/components/confirm-message/confirm-message.template.html
index acb165d4b..226f15b6f 100644
--- a/designsafe/static/scripts/projects/components/confirm-message/confirm-message.template.html
+++ b/designsafe/static/scripts/projects/components/confirm-message/confirm-message.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Delete</span>
         <span class="pull-right" ng-click="$ctrl.cancel()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
@@ -12,4 +12,4 @@ <h4 class="modal-title" style="border:none;">
     </div>
     <button class="btn btn-sm btn-add" style="width: 30%; margin-right: 10px;" ng-click="$ctrl.delete()">Yes</button>
     <button class="btn btn-sm btn-danger" style="width: 30%; margin-left: 10px;" ng-click="$ctrl.cancel()">No</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/projects/components/file-categories/file-categories.template.html b/designsafe/static/scripts/projects/components/file-categories/file-categories.template.html
index dffaa966a..5d94f69cb 100644
--- a/designsafe/static/scripts/projects/components/file-categories/file-categories.template.html
+++ b/designsafe/static/scripts/projects/components/file-categories/file-categories.template.html
@@ -1,7 +1,7 @@
 <div class="file-categories-content">
     <!--
     <div class="loading" data-ng-if="$ctrl._ui.busy">
-        <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
     </div>
     -->
     <div ng-if="!$ctrl._ui.isOther">
diff --git a/designsafe/static/scripts/projects/components/file-category-selector/file-category-selector.template.html b/designsafe/static/scripts/projects/components/file-category-selector/file-category-selector.template.html
index dfcd7e803..fc1827fcd 100644
--- a/designsafe/static/scripts/projects/components/file-category-selector/file-category-selector.template.html
+++ b/designsafe/static/scripts/projects/components/file-category-selector/file-category-selector.template.html
@@ -1,5 +1,5 @@
 <div class="loading" ng-if="$ctrl._ui.busy">
-    <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+    <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
 </div>
 <form ng-if="$ctrl.selectMultiple() && $ctrl.project.value.projectType !== 'other'" ng-disabled="$ctrl._ui.busy">
     <select name="project-category"
diff --git a/designsafe/static/scripts/projects/components/leave-feedback-modal/leave-feedback-modal.template.html b/designsafe/static/scripts/projects/components/leave-feedback-modal/leave-feedback-modal.template.html
index b415b8d40..2fdd1bd32 100644
--- a/designsafe/static/scripts/projects/components/leave-feedback-modal/leave-feedback-modal.template.html
+++ b/designsafe/static/scripts/projects/components/leave-feedback-modal/leave-feedback-modal.template.html
@@ -2,14 +2,14 @@
     <h4 class="modal-title">
         Leave Feedback
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
 <div class="modal-body feedback-container">
     <div class="feedback-item">
         <div class="loading bg-info" ng-if="$ctrl._ui.loading">
-            <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
         </div>
         <div class="alert alert-error" ng-if="$ctrl.error">
             <p>There was a problem submitting your feedback.</p>
@@ -53,7 +53,7 @@ <h4 class="modal-title">
 <div class="modal-footer">
     <button class="btn btn-primary" ng-disabled="feedback.$invalid || $ctrl.submitting" ng-click="$ctrl.onSubmit()">
         <span ng-if="$ctrl.submitting">
-            <i class="fa fa-spinner fa-spin"></i>
+            <i role="none" class="fa fa-spinner fa-spin"></i>
         </span>
         Submit
     </button>
diff --git a/designsafe/static/scripts/projects/components/manage-authors/manage-authors.template.html b/designsafe/static/scripts/projects/components/manage-authors/manage-authors.template.html
index f94c3add9..737313ec6 100644
--- a/designsafe/static/scripts/projects/components/manage-authors/manage-authors.template.html
+++ b/designsafe/static/scripts/projects/components/manage-authors/manage-authors.template.html
@@ -15,8 +15,8 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
     <div class="well">
         <div class="pipeline-authors">
             <div class="pipeline-authors-item">
-                <i class="fa fa-arrow-circle-up fa-2x" ng-click="$ctrl.orderMembers(true)"></i>
-                <i class="fa fa-arrow-circle-down fa-2x" ng-click="$ctrl.orderMembers(false)"></i>
+                <i role="none" class="fa fa-arrow-circle-up fa-2x" ng-click="$ctrl.orderMembers(true)"></i>
+                <i role="none" class="fa fa-arrow-circle-down fa-2x" ng-click="$ctrl.orderMembers(false)"></i>
             </div>
             <div class="pipeline-authors-item">
                 <div ng-repeat="member in $ctrl.authors | orderBy: 'order'">
@@ -49,10 +49,10 @@ <h5 style="font-family: Helvetica Neue">Citation Preview</h5>
                     {{ member.lname }}, {{ member.fname }}
                 </td>
                 <td class="order-col">
-                    <i class="fa fa-arrow-circle-up fa-2x" ng-click="$ctrl.orderMembers(true)"></i>
-                    <i class="fa fa-arrow-circle-down fa-2x" ng-click="$ctrl.orderMembers(false)"></i>
+                    <i role="none" class="fa fa-arrow-circle-up fa-2x" ng-click="$ctrl.orderMembers(true)"></i>
+                    <i role="none" class="fa fa-arrow-circle-down fa-2x" ng-click="$ctrl.orderMembers(false)"></i>
                 </td>
             </tr>
         </tbody>
     </table> -->
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/projects/components/manage-categories/manage-categories.component.html b/designsafe/static/scripts/projects/components/manage-categories/manage-categories.component.html
index 32a2bbbd9..b7c6a0fd4 100644
--- a/designsafe/static/scripts/projects/components/manage-categories/manage-categories.component.html
+++ b/designsafe/static/scripts/projects/components/manage-categories/manage-categories.component.html
@@ -2,13 +2,13 @@
     <h4 class="modal-title" style="border:none;">
         <span>Add Categories</span>
         <span class="pull-right" ng-click="$ctrl.cancel()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
 <div class="modal-body" ng-show="$ctrl.ui.loading">
     <h3 class="text-center">
-        <i class="fa fa-spinner fa-spin"></i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
     </h3>
 </div>
 <div class="modal-body" ng-hide="$ctrl.ui.loading">
@@ -184,7 +184,7 @@ <h3 class="text-center">
             <!-- Add Category Btn -->
             <div class="text-right">
                 <button class="btn btn-add" type="submit" ng-click="addForm.$valid && $ctrl.addCategory($event)">
-                    <i class="fa fa-plus"></i> Add Category
+                    <i role="none" class="fa fa-plus"></i> Add Category
                 </button>
             </div>
         </form>
@@ -827,4 +827,4 @@ <h3 class="text-center">
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/projects/components/manage-experiments/manage-experiments.template.html b/designsafe/static/scripts/projects/components/manage-experiments/manage-experiments.template.html
index 4f8089550..4c3119d9a 100644
--- a/designsafe/static/scripts/projects/components/manage-experiments/manage-experiments.template.html
+++ b/designsafe/static/scripts/projects/components/manage-experiments/manage-experiments.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Add Experiments</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
@@ -190,7 +190,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.referencedData"
                                     ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -290,7 +290,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.relatedWork"
                                     ng-click="$ctrl.dropObjField('relatedWork', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -361,7 +361,7 @@ <h4 class="modal-title" style="border:none;">
             </div>
             <!-- Notifications -->
             <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-                <i class="fa fa-exclamation notification-icon"></i>
+                <i role="none" class="fa fa-exclamation notification-icon"></i>
                 <div>
                     An error has occurred when attempting to save.
                 </div>
@@ -387,7 +387,7 @@ <h4 class="modal-title" style="border:none;">
                         ng-if="!$ctrl.ui.editing"
                         type="submit"
                 >
-                    <i class="fa fa-plus">&nbsp;</i>
+                    <i role="none" class="fa fa-plus">&nbsp;</i>
                     Add Experiment
                 </button>
             </div>
@@ -400,7 +400,7 @@ <h4 class="modal-title" style="border:none;">
         </div>
         <div ng-if="$ctrl.ui.loading">
             <h3 class="text-center">
-                <i class="fa fa-spinner fa-spin"></i> Loading...
+                <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
             </h3>
         </div>
         <div class="dropdown" ng-if="!$ctrl.ui.loading">
diff --git a/designsafe/static/scripts/projects/components/manage-field-recon/collections/manage-field-recon-collections.component.html b/designsafe/static/scripts/projects/components/manage-field-recon/collections/manage-field-recon-collections.component.html
index 14ac6a6de..918968560 100644
--- a/designsafe/static/scripts/projects/components/manage-field-recon/collections/manage-field-recon-collections.component.html
+++ b/designsafe/static/scripts/projects/components/manage-field-recon/collections/manage-field-recon-collections.component.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border: none;">
         <span>Add Collections</span>
         <span class="pull-right" data-ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
@@ -432,7 +432,7 @@ <h4 class="modal-title" style="border: none;">
                         data-ng-if="!$ctrl.data.editCollection"
                         type="submit"
                     >
-                        <i class="fa fa-plus">&nbsp;</i>
+                        <i role="none" class="fa fa-plus">&nbsp;</i>
                         Add Collection
                     </button>
                 </div>
diff --git a/designsafe/static/scripts/projects/components/manage-field-recon/documents/manage-field-recon-documents.template.html b/designsafe/static/scripts/projects/components/manage-field-recon/documents/manage-field-recon-documents.template.html
index ce3a8e230..d163d0dc3 100644
--- a/designsafe/static/scripts/projects/components/manage-field-recon/documents/manage-field-recon-documents.template.html
+++ b/designsafe/static/scripts/projects/components/manage-field-recon/documents/manage-field-recon-documents.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Add Documents</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
@@ -98,7 +98,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.referencedData"
                                     ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -199,7 +199,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.relatedWork"
                                     ng-click="$ctrl.dropObjField('relatedWork', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -271,7 +271,7 @@ <h4 class="modal-title" style="border:none;">
             </div>
             <!-- Notifications -->
             <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-                <i class="fa fa-exclamation notification-icon"></i>
+                <i role="none" class="fa fa-exclamation notification-icon"></i>
                 <div>
                     An error has occurred when attempting to save.
                 </div>
@@ -297,7 +297,7 @@ <h4 class="modal-title" style="border:none;">
                         ng-if="!$ctrl.ui.editing"
                         type="submit"
                 >
-                    <i class="fa fa-plus">&nbsp;</i>
+                    <i role="none" class="fa fa-plus">&nbsp;</i>
                     Add Document
                 </button>
             </div>
diff --git a/designsafe/static/scripts/projects/components/manage-field-recon/missions/manage-field-recon-missions.template.html b/designsafe/static/scripts/projects/components/manage-field-recon/missions/manage-field-recon-missions.template.html
index e628b88d7..9355bae08 100644
--- a/designsafe/static/scripts/projects/components/manage-field-recon/missions/manage-field-recon-missions.template.html
+++ b/designsafe/static/scripts/projects/components/manage-field-recon/missions/manage-field-recon-missions.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Add Missions</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
@@ -139,7 +139,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.referencedData"
                                     ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -240,7 +240,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.relatedWork"
                                     ng-click="$ctrl.dropObjField('relatedWork', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -354,7 +354,7 @@ <h4 class="modal-title" style="border:none;">
             </div>
             <!-- Notifications -->
             <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-                <i class="fa fa-exclamation notification-icon"></i>
+                <i role="none" class="fa fa-exclamation notification-icon"></i>
                 <div>
                     An error has occurred when attempting to save.
                 </div>
@@ -380,7 +380,7 @@ <h4 class="modal-title" style="border:none;">
                         ng-if="!$ctrl.ui.editing"
                         type="submit"
                 >
-                    <i class="fa fa-plus">&nbsp;</i>
+                    <i role="none" class="fa fa-plus">&nbsp;</i>
                     Add Mission
                 </button>
             </div>
diff --git a/designsafe/static/scripts/projects/components/manage-hybrid-simulations/manage-hybrid-simulations.template.html b/designsafe/static/scripts/projects/components/manage-hybrid-simulations/manage-hybrid-simulations.template.html
index 958d92e9c..c393c1c02 100644
--- a/designsafe/static/scripts/projects/components/manage-hybrid-simulations/manage-hybrid-simulations.template.html
+++ b/designsafe/static/scripts/projects/components/manage-hybrid-simulations/manage-hybrid-simulations.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Add Hybrid Simulations</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
@@ -128,7 +128,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.referencedData"
                                     ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -229,7 +229,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.relatedWork"
                                     ng-click="$ctrl.dropObjField('relatedWork', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -303,7 +303,7 @@ <h4 class="modal-title" style="border:none;">
             </div>
             <!-- Notifications -->
             <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-                <i class="fa fa-exclamation notification-icon"></i>
+                <i role="none" class="fa fa-exclamation notification-icon"></i>
                 <div>
                     An error has occurred when attempting to save.
                 </div>
@@ -329,7 +329,7 @@ <h4 class="modal-title" style="border:none;">
                         ng-if="!$ctrl.ui.editing"
                         type="submit"
                 >
-                    <i class="fa fa-plus">&nbsp;</i>
+                    <i role="none" class="fa fa-plus">&nbsp;</i>
                     Add Hybrid Sim
                 </button>
             </div>
diff --git a/designsafe/static/scripts/projects/components/manage-project-type/manage-project-type.template.html b/designsafe/static/scripts/projects/components/manage-project-type/manage-project-type.template.html
index 2f73f8190..13e52038d 100644
--- a/designsafe/static/scripts/projects/components/manage-project-type/manage-project-type.template.html
+++ b/designsafe/static/scripts/projects/components/manage-project-type/manage-project-type.template.html
@@ -8,7 +8,7 @@ <h4 class="modal-title" style="border:none;">
         </span>
         <span ng-if="$ctrl.prjType === 'field_recon' && $ctrl.slide != 'type'"> | 5 minutes to read</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
@@ -214,7 +214,7 @@ <h4 class="modal-title" style="border:none;">
                     </td>
                     <td class="overview-back-short">
                         <a ng-hide="$ctrl.preview" ng-click="$ctrl.continue('type')">
-                            <i class="fa fa-arrow-left"></i> <strong>Back</strong>
+                            <i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong>
                         </a>
                     </td>
                     <td class="overview-continue">
@@ -253,7 +253,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('overview')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('overview')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('categories')">
@@ -305,7 +305,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('experiment')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('experiment')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('tree')">
@@ -329,7 +329,7 @@ <h4 class="modal-title" style="border:none;">
                 <img src="/static/images/expRelateData.png" style="width:100%; padding-bottom: 20px;">
                 <div style="width: 100%; text-align: center; padding-bottom: 20px;">
                     <a href="/static/images/expRelateData.png" download="tree_diagram.png">
-                        <i class="fa fa-download"></i> <strong>Download Diagram</strong>
+                        <i role="none" class="fa fa-download"></i> <strong>Download Diagram</strong>
                     </a>
                 </div>
             </div>
@@ -343,7 +343,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('categories')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('categories')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('tags')">
@@ -378,7 +378,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('tree')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('tree')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('finish')">
@@ -429,7 +429,7 @@ <h4 class="modal-title" style="border:none;">
                     </td>
                     <td class="overview-back-short">
                         <a ng-hide="$ctrl.preview" ng-click="$ctrl.continue('type')">
-                            <i class="fa fa-arrow-left"></i> <strong>Back</strong>
+                            <i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong>
                         </a>
                     </td>
                     <td class="overview-continue">
@@ -467,7 +467,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('overview')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('overview')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('categories')">
@@ -517,7 +517,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('simulation')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('simulation')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('tree')">
@@ -541,7 +541,7 @@ <h4 class="modal-title" style="border:none;">
                 <img src="/static/images/simRelateData.png" style="width:100%; padding-bottom: 20px;">
                 <div style="width: 100%; text-align: center; padding-bottom: 20px;">
                     <a href="/static/images/simRelateData.png" download="tree_diagram.png">
-                        <i class="fa fa-download"></i> <strong>Download Diagram</strong>
+                        <i role="none" class="fa fa-download"></i> <strong>Download Diagram</strong>
                     </a>
                 </div>
             </div>
@@ -555,7 +555,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('categories')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('categories')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('tags')">
@@ -590,7 +590,7 @@ <h4 class="modal-title" style="border:none;">
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('tree')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('tree')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('finish')">
@@ -611,7 +611,7 @@ <h3>Hybrid Simulation Overview Coming Soon...</h3>
             <table style="width: 100%;">
                 <tr>
                     <td class="overview-back-long">
-                        <a ng-click="$ctrl.continue('type')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('type')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('finish')">
@@ -681,7 +681,7 @@ <h3>Field Research</h3>
                     </td>
                     <td class="overview-back-short">
                         <a ng-hide="$ctrl.preview" ng-click="$ctrl.continue('type')">
-                            <i class="fa fa-arrow-left"></i> <strong>Back</strong>
+                            <i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong>
                         </a>
                     </td>
                     <td class="overview-continue">
@@ -737,7 +737,7 @@ <h3>Research Planning Collections</h3>
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('overview')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('overview')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('collections1')">
@@ -783,7 +783,7 @@ <h3>Social Sciences Collections</h3>
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('missions')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('missions')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('collections2')">
@@ -837,7 +837,7 @@ <h3>Relating Data</h3>
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('collections1')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('collections1')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('file_tags')">
@@ -876,7 +876,7 @@ <h3>File Tags</h3>
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('collections2')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('collections2')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('best_practice')">
@@ -925,7 +925,7 @@ <h3>Best Practices</h3>
                         </span>
                     </td>
                     <td class="overview-back-short">
-                        <a ng-click="$ctrl.continue('file_tags')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('file_tags')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add"
@@ -947,7 +947,7 @@ <h3>Other Overview Coming Soon...</h3>
             <table style="width: 100%;">
                 <tr>
                     <td class="overview-back-long">
-                        <a ng-click="$ctrl.continue('type')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('type')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('finish')">
@@ -1031,7 +1031,7 @@ <h3 style="text-align: center;">
             <table style="width: 100%;">
                 <tr>
                     <td class="overview-back-long">
-                        <a ng-click="$ctrl.continue('best_practice')"><i class="fa fa-arrow-left"></i> <strong>Back</strong></a>
+                        <a ng-click="$ctrl.continue('best_practice')"><i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong></a>
                     </td>
                     <td class="overview-continue">
                         <button class="btn btn-add" style="width: 100%;" ng-click="$ctrl.continue('finish')" ng-disabled="$ctrl.protectedData==-1">
@@ -1145,14 +1145,14 @@ <h3>Best Practices</h3>
             <tr>
                 <td class="overview-back-long">
                     <a ng-if="$ctrl.prjType === 'experimental' || $ctrl.prjType === 'simulation'" ng-click="$ctrl.continue('tags')">
-                        <i class="fa fa-arrow-left"></i> <strong>Back</strong>
+                        <i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong>
                     </a>
                     <a ng-if="$ctrl.prjType === 'hybrid_simulation' || $ctrl.prjType == 'other'" ng-click="$ctrl.continue('type')">
-                        <i class="fa fa-arrow-left"></i> <strong>Back</strong>
+                        <i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong>
                     </a>
                     <a ng-if="$ctrl.prjType === 'field_recon'"
                        ng-click="$ctrl.preview ? $ctrl.continue('best_practice') : $ctrl.continue('protected_data')">
-                       <i class="fa fa-arrow-left"></i> <strong>Back</strong>
+                       <i role="none" class="fa fa-arrow-left"></i> <strong>Back</strong>
                     </a>
                 </td>
                 <td class="overview-continue">
@@ -1164,7 +1164,7 @@ <h3>Best Practices</h3>
                         Finish
                     </button>
                     <div ng-if="$ctrl.loading">
-                        <i class="fa fa-spinner fa-spin"></i>
+                        <i role="none" class="fa fa-spinner fa-spin"></i>
                         Saving project...
                     </div>
                 </td>
@@ -1172,4 +1172,4 @@ <h3>Best Practices</h3>
         </table>
     </div>
     <!-- Project Finish -->
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/projects/components/manage-project/amend-project.template.html b/designsafe/static/scripts/projects/components/manage-project/amend-project.template.html
index 421f76ae5..c8c41be18 100644
--- a/designsafe/static/scripts/projects/components/manage-project/amend-project.template.html
+++ b/designsafe/static/scripts/projects/components/manage-project/amend-project.template.html
@@ -9,14 +9,14 @@
     <h4 class="modal-title">
         <span>Amend Project</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
 <div class="modal-body" style="padding: 30px;">
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <form name="projForm" autocomplete="off" ng-if="!$ctrl.ui.loading">
@@ -158,7 +158,7 @@ <h3 class="text-center">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.referencedData"
                                     ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -259,7 +259,7 @@ <h3 class="text-center">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.associatedProjects"
                                     ng-click="$ctrl.dropUserField('associatedProjects', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -458,7 +458,7 @@ <h3 class="text-center">
                         </div>
                         <div>
                             <span ng-if="$ctrl.ui.loading">
-                                <i class="fa fa-spinner fa-spin"></i>
+                                <i role="none" class="fa fa-spinner fa-spin"></i>
                                 Saving project...
                             </span>
                         </div>
diff --git a/designsafe/static/scripts/projects/components/manage-project/manage-project.template.html b/designsafe/static/scripts/projects/components/manage-project/manage-project.template.html
index ede5dad61..6f4a419bc 100644
--- a/designsafe/static/scripts/projects/components/manage-project/manage-project.template.html
+++ b/designsafe/static/scripts/projects/components/manage-project/manage-project.template.html
@@ -10,14 +10,14 @@ <h4 class="modal-title">
         <span ng-if="!$ctrl.project">Add New Project</span>
         <span ng-if="$ctrl.project">Edit Project</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
 <div class="modal-body" style="padding: 30px;">
     <div ng-if="$ctrl.ui.loading">
         <h3 class="text-center">
-            <i class="fa fa-spinner fa-spin"></i> Loading...
+            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
         </h3>
     </div>
     <form name="projForm" autocomplete="off" ng-if="!$ctrl.ui.loading">
@@ -255,7 +255,7 @@ <h3 class="text-center">
             <!-- Add user Errors -->
             <div class="form-group" ng-if="$ctrl.ui.invalidUserError">
                 <div class="alert alert-danger flex-container">
-                    <i class="fa fa-exclamation notification-icon"></i>
+                    <i role="none" class="fa fa-exclamation notification-icon"></i>
                     <div>
                         The name: <strong>{{$ctrl.ui.invalidUser}}</strong> could not be found.
                         Please make sure that you select each user from the dropdown listing
@@ -324,7 +324,7 @@ <h3 class="text-center">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.coPis"
                                     ng-click="$ctrl.dropUserField('coPis', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -382,7 +382,7 @@ <h3 class="text-center">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.teamMembers"
                                     ng-click="$ctrl.dropUserField('teamMembers', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -474,7 +474,7 @@ <h3 class="text-center">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.guestMembers"
                                     ng-click="$ctrl.dropObjField('guestMembers', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -546,7 +546,7 @@ <h3 class="text-center">
                                 <button class="btn btn-danger btn-xs"
                                         ng-if="$ctrl.ui.require.awardNumber"
                                         ng-click="$ctrl.dropObjField('awardNumber', $index)">
-                                    <i class="fa fa-times"></i>
+                                    <i role="none" class="fa fa-times"></i>
                                 </button>
                             </td>
                         </tr>
@@ -633,7 +633,7 @@ <h3 class="text-center">
                                 <button class="btn btn-danger btn-xs"
                                         ng-if="$ctrl.ui.require.referencedData"
                                         ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                    <i class="fa fa-times"></i>
+                                    <i role="none" class="fa fa-times"></i>
                                 </button>
                             </td>
                         </tr>
@@ -734,7 +734,7 @@ <h3 class="text-center">
                                 <button class="btn btn-danger btn-xs"
                                         ng-if="$ctrl.ui.require.associatedProjects"
                                         ng-click="$ctrl.dropObjField('associatedProjects', $index)">
-                                    <i class="fa fa-times"></i>
+                                    <i role="none" class="fa fa-times"></i>
                                 </button>
                             </td>
                         </tr>
@@ -929,7 +929,7 @@ <h3 class="text-center">
                                     ng-if="!$ctrl.project"
                             >
                                 <span ng-if="$ctrl.ui.submitting">
-                                    <i class="fa fa-spinner fa-spin"></i>
+                                    <i role="none" class="fa fa-spinner fa-spin"></i>
                                     Creating Project...
                                 </span>
                                 <span ng-if="!$ctrl.ui.submitting">
@@ -942,7 +942,7 @@ <h3 class="text-center">
                                     ng-if="$ctrl.project"
                             >
                                 <span ng-if="$ctrl.ui.submitting">
-                                    <i class="fa fa-spinner fa-spin"></i>
+                                    <i role="none" class="fa fa-spinner fa-spin"></i>
                                     Saving Project...
                                 </span>
                                 <span ng-if="!$ctrl.ui.submitting">
diff --git a/designsafe/static/scripts/projects/components/manage-simulations/manage-simulations.template.html b/designsafe/static/scripts/projects/components/manage-simulations/manage-simulations.template.html
index 79cfe285d..1552e8712 100644
--- a/designsafe/static/scripts/projects/components/manage-simulations/manage-simulations.template.html
+++ b/designsafe/static/scripts/projects/components/manage-simulations/manage-simulations.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         <span>Add Simulations</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
@@ -128,7 +128,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.referencedData"
                                     ng-click="$ctrl.dropObjField('referencedData', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -229,7 +229,7 @@ <h4 class="modal-title" style="border:none;">
                             <button class="btn btn-danger btn-xs"
                                     ng-if="$ctrl.ui.require.relatedWork"
                                     ng-click="$ctrl.dropObjField('relatedWork', $index)">
-                                <i class="fa fa-times"></i>
+                                <i role="none" class="fa fa-times"></i>
                             </button>
                         </td>
                     </tr>
@@ -303,7 +303,7 @@ <h4 class="modal-title" style="border:none;">
             </div>
             <!-- Notifications -->
             <div class="alert alert-danger flex-container" ng-if="$ctrl.ui.error">
-                <i class="fa fa-exclamation notification-icon"></i>
+                <i role="none" class="fa fa-exclamation notification-icon"></i>
                 <div>
                     An error has occurred when attempting to save.
                 </div>
@@ -329,7 +329,7 @@ <h4 class="modal-title" style="border:none;">
                         ng-if="!$ctrl.ui.editing"
                         type="submit"
                 >
-                    <i class="fa fa-plus">&nbsp;</i>
+                    <i role="none" class="fa fa-plus">&nbsp;</i>
                     Add Simulation
                 </button>
             </div>
diff --git a/designsafe/static/scripts/projects/components/project-tree/project-tree.template.html b/designsafe/static/scripts/projects/components/project-tree/project-tree.template.html
index b0f484902..2631d4b5a 100644
--- a/designsafe/static/scripts/projects/components/project-tree/project-tree.template.html
+++ b/designsafe/static/scripts/projects/components/project-tree/project-tree.template.html
@@ -3,13 +3,13 @@ <h4 class="modal-title">
         <span ng-if="!$ctrl.readOnly">Relate Data</span>
         <span ng-if="$ctrl.readOnly">Data Diagram</span>
         <span class="pull-right" data-ng-click="$ctrl.close()">
-            <i class="fa fa-times">&nbsp;</i>
+            <i role="none" class="fa fa-times">&nbsp;</i>
         </span>
     </h4>
 </div>
 <div class="modal-body project-tree">
     <div class="loading bg-info" data-ng-if="$ctrl._ui.loading">
-        <i class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin">&nbsp;</i> Loading...
     </div>
     <div class="loading bg-danger" data-ng-if="$ctrl._ui.error">
         <p>{{$ctrl._ui.error}}</p>
@@ -24,14 +24,14 @@ <h4 class="modal-title">
                         data-ng-click="$ctrl.moveNodeUp(node)"
                         data-ng-disabled="$ctrl._ui.loading"
                         data-ng-if="node.parent">
-                    <i class="fa fa-arrow-up">&nbsp;</i><span class="sr-only">Move Up</span>
+                    <i role="none" class="fa fa-arrow-up">&nbsp;</i><span class="sr-only">Move Up</span>
                 </button>
                 <button type="button"
                         class="btn btn-link btn-sm"
                         data-ng-click="$ctrl.moveNodeDown(node)"
                         data-ng-disabled="$ctrl._ui.loading"
                         data-ng-if="node.parent">
-                    <i class="fa fa-arrow-down">&nbsp;</i><span class="sr-only">Move Down</span>
+                    <i role="none" class="fa fa-arrow-down">&nbsp;</i><span class="sr-only">Move Down</span>
                 </button>
                 <button type="button"
                         class="btn btn-link"
diff --git a/designsafe/static/scripts/projects/components/publication-citation/publication-citation.template.html b/designsafe/static/scripts/projects/components/publication-citation/publication-citation.template.html
index 97e77426b..298065ff5 100644
--- a/designsafe/static/scripts/projects/components/publication-citation/publication-citation.template.html
+++ b/designsafe/static/scripts/projects/components/publication-citation/publication-citation.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title" style="border:none;">
         Citation 
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
diff --git a/designsafe/static/scripts/projects/components/publication-download/publication-download.template.html b/designsafe/static/scripts/projects/components/publication-download/publication-download.template.html
index ed951780c..58eb8e86a 100644
--- a/designsafe/static/scripts/projects/components/publication-download/publication-download.template.html
+++ b/designsafe/static/scripts/projects/components/publication-download/publication-download.template.html
@@ -2,13 +2,13 @@
     <h4 class="modal-title" style="border:none;">
         Download Project
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
 <div ng-if="!$ctrl.loaded">
     <h3 class="text-center">
-        <i class="fa fa-spinner fa-spin"></i> Loading...
+        <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
     </h3>
 </div>
 <div class="modal-body" ng-if="$ctrl.loaded">
@@ -121,7 +121,7 @@ <h3 class="text-center">
             </div>
             <div class="btn-container" ng-if="$ctrl.retrievingPostit">
                 <span ng-if="$ctrl.retrievingPostit" style="font-size:18px">
-                    <i class="fa fa-spinner fa-spin"></i> Loading...
+                    <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                 </span>
             </div>
         </button>
diff --git a/designsafe/static/scripts/projects/components/publication-metrics/entity-metrics.template.html b/designsafe/static/scripts/projects/components/publication-metrics/entity-metrics.template.html
index 68c9ecd5f..ecec67cb6 100644
--- a/designsafe/static/scripts/projects/components/publication-metrics/entity-metrics.template.html
+++ b/designsafe/static/scripts/projects/components/publication-metrics/entity-metrics.template.html
@@ -4,7 +4,7 @@ <h4 class="modal-title" style="border: none">
         <span ng-if="!$ctrl.loading && !$ctrl.error">(<span ng-if="$ctrl.lastUpdated">Starting {{$ctrl.initialDate | date:'MMMM yyyy'}}, </span>updated every month)</span>
         <span ng-if="!$ctrl.loading && $ctrl.error">(Newly published project - initial metric report will be posted after the end of the month)</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
@@ -14,7 +14,7 @@ <h4 class="modal-title" style="border: none">
         style="padding: 10px; font-size: large; width: 100%"
         class="bg-info"
     >
-        <span> <i class="fa fa-spinner fa-spin"></i> Loading... </span>
+        <span> <i role="none" class="fa fa-spinner fa-spin"></i> Loading... </span>
     </div>
     <div ng-if="!$ctrl.loading">
         <div style="display: flex; flex-direction: row" >
@@ -36,7 +36,7 @@ <h4 class="modal-title" style="border: none">
                             <a
                                 uib-tooltip="Total file downloads to a user’s machine or copies to their workspace in DesignSafe"
                                 tooltip-placement="right"
-                                ><i class="fa fa-info-circle"></i
+                                ><i role="none" class="fa fa-info-circle"></i
                             ></a>
                         </td>
                         <td>{{$ctrl.cumMetrics.fileDownloads}}</td>
@@ -47,7 +47,7 @@ <h4 class="modal-title" style="border: none">
                             <a
                                 uib-tooltip="Total user’s requests for file previews in a browser window"
                                 tooltip-placement="right"
-                                ><i class="fa fa-info-circle"></i
+                                ><i role="none" class="fa fa-info-circle"></i
                             ></a>
                         </td>
                         <td>{{$ctrl.cumMetrics.filePreviews}}</td>
diff --git a/designsafe/static/scripts/projects/components/publication-metrics/publication-metrics.template.html b/designsafe/static/scripts/projects/components/publication-metrics/publication-metrics.template.html
index 42007263d..c467e5ce1 100644
--- a/designsafe/static/scripts/projects/components/publication-metrics/publication-metrics.template.html
+++ b/designsafe/static/scripts/projects/components/publication-metrics/publication-metrics.template.html
@@ -4,7 +4,7 @@ <h4 class="modal-title" style="border: none">
         <span ng-if="!$ctrl.loading && !$ctrl.error">(<span ng-if="$ctrl.lastUpdated">Starting {{$ctrl.initialDate | date:'MMMM yyyy'}}, </span>updated every month)</span>
         <span ng-if="!$ctrl.loading && $ctrl.error">(Newly published project - initial metric report will be posted after the end of the month)</span>
         <span class="pull-right" ng-click="$ctrl.close()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
@@ -14,7 +14,7 @@ <h4 class="modal-title" style="border: none">
         style="padding: 10px; font-size: large; width: 100%"
         class="bg-info"
     >
-        <span> <i class="fa fa-spinner fa-spin"></i> Loading... </span>
+        <span> <i role="none" class="fa fa-spinner fa-spin"></i> Loading... </span>
     </div>
     <div ng-if="!$ctrl.loading">
         <div style="display: flex; flex-direction: row" >
@@ -36,7 +36,7 @@ <h4 class="modal-title" style="border: none">
                             <a
                                 uib-tooltip="Total downloads of a compressed entire project to a user’s machine"
                                 tooltip-placement="right"
-                                ><i class="fa fa-info-circle"></i
+                                ><i role="none" class="fa fa-info-circle"></i
                             ></a>
                         </td>
                         <td>{{$ctrl.cumMetrics.projectDownloads}}</td>
@@ -47,7 +47,7 @@ <h4 class="modal-title" style="border: none">
                             <a
                                 uib-tooltip="Total file downloads to a user’s machine or copies to their workspace in DesignSafe"
                                 tooltip-placement="right"
-                                ><i class="fa fa-info-circle"></i
+                                ><i role="none" class="fa fa-info-circle"></i
                             ></a>
                         </td>
                         <td>{{$ctrl.cumMetrics.fileDownloads}}</td>
@@ -58,7 +58,7 @@ <h4 class="modal-title" style="border: none">
                             <a
                                 uib-tooltip="Total user’s requests for file previews in a browser window"
                                 tooltip-placement="right"
-                                ><i class="fa fa-info-circle"></i
+                                ><i role="none" class="fa fa-info-circle"></i
                             ></a>
                         </td>
                         <td>{{$ctrl.cumMetrics.filePreviews}}</td>
diff --git a/designsafe/static/scripts/projects/components/published-data-modal/published-data-modal.template.html b/designsafe/static/scripts/projects/components/published-data-modal/published-data-modal.template.html
index 33a74662c..bd00ef1ea 100644
--- a/designsafe/static/scripts/projects/components/published-data-modal/published-data-modal.template.html
+++ b/designsafe/static/scripts/projects/components/published-data-modal/published-data-modal.template.html
@@ -2,7 +2,7 @@
     <h4 class="modal-title">
         <span>Version Changes</span>
         <span class="pull-right" ng-click="$ctrl.cancel()">
-            <i class="fa fa-times"></i>
+            <i role="none" class="fa fa-times"></i>
         </span>
     </h4>
 </div>
@@ -36,4 +36,4 @@ <h4 class="modal-title">
             {{$ctrl.versionDescription}}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/designsafe/static/scripts/rapid/html/index.html b/designsafe/static/scripts/rapid/html/index.html
index f2a1e35ad..31bf5ad22 100644
--- a/designsafe/static/scripts/rapid/html/index.html
+++ b/designsafe/static/scripts/rapid/html/index.html
@@ -3,7 +3,7 @@
     <div class="sidebar-handle"
          uib-tooltip="Expand sidebar"
          tooltip-placement="right">
-      <i class="fa fa-chevron-right"> </i>
+      <i role="none" class="fa fa-chevron-right"> </i>
     </div>
   </div>
   <div id="sidebar" ng-show="vm.show_sidebar" class="slide-in">
@@ -11,14 +11,14 @@
          ng-click="vm.show_sidebar = !vm.show_sidebar"
          uib-tooltip="Collapse sidebar"
          tooltip-placement="right">
-      <i class="fa fa-chevron-left"> </i>
+      <i role="none" class="fa fa-chevron-left"> </i>
     </div>
     <div class="sidebar-content">
       <div class="sidebar-header">
         <img class="img-responsive" src="/static/scripts/rapid/images/logo.png" height="50px"></img>
       </div>
       <div style="padding-left:10px;">
-          <a href="/rw/user-guides/tools-applications/recon-portal/"><i class="fa fa-question-circle"></i> <b>Learn more about contributing.</b></a>
+          <a href="/rw/user-guides/tools-applications/recon-portal/"><i role="none" class="fa fa-question-circle"></i> <b>Learn more about contributing.</b></a>
       </div>
       <div ng-show="vm.active_rapid_event" class="fade recon-event-details">
         <div class="text-center">
@@ -31,7 +31,7 @@
           <div class="input-group">
             <input type="text" class="form-control" ng-model="vm.filter_options.search_text" ng-change="vm.search()"></input>
             <span class="input-group-btn">
-              <button class="btn btn-default"> <i class="fa fa-trash" ng-click="vm.clear_filters()"></i></button>
+              <button class="btn btn-default"> <i role="none" class="fa fa-trash" ng-click="vm.clear_filters()"></i></button>
             </span>
           </div>
         </div>
diff --git a/designsafe/static/scripts/rapid/html/rapid-admin-users.html b/designsafe/static/scripts/rapid/html/rapid-admin-users.html
index 14c3a6392..1df2e0623 100644
--- a/designsafe/static/scripts/rapid/html/rapid-admin-users.html
+++ b/designsafe/static/scripts/rapid/html/rapid-admin-users.html
@@ -35,7 +35,7 @@ <h3> No RAPID admin users! </h3>
       <div class="row">
         <h2> Add RAPID Admins </h2>
         <div class="input-group input-group-lg">
-          <span class="input-group-addon"> <i class="fa fa-search"></i></span>
+          <span class="input-group-addon"> <i role="none" class="fa fa-search"></i></span>
           <input type="text"
                  class="form-control"
                  id="rapid_admin_user"
diff --git a/designsafe/static/scripts/search/components/search/search.component.html b/designsafe/static/scripts/search/components/search/search.component.html
index b54add1f8..8569c022d 100644
--- a/designsafe/static/scripts/search/components/search/search.component.html
+++ b/designsafe/static/scripts/search/components/search/search.component.html
@@ -33,7 +33,7 @@ <h3> Refine By: </h3>
             </div>
             <div style="text-align:center;">
                 <a ng-click="$ctrl.help()">
-                    <i class="fa fa-question-circle"></i> Help with Search
+                    <i role="none" class="fa fa-question-circle"></i> Help with Search
                 </a>
             </div>
         </div>
@@ -41,8 +41,8 @@ <h3> Refine By: </h3>
             <form ng-submit='$ctrl.search_browse()'>
                 <div class="input-group input-group-lg">
                     <span class="input-group-addon">
-                    <span ng-show="!$ctrl.searching"><i class="fa fa-search" ng-show="!$ctrl.searching"> </i></span>
-                    <span ng-show="$ctrl.searching"><i class="fa fa-spinner fa-spin" > </i></span>
+                    <span ng-show="!$ctrl.searching"><i role="none" class="fa fa-search" ng-show="!$ctrl.searching"> </i></span>
+                    <span ng-show="$ctrl.searching"><i role="none" class="fa fa-spinner fa-spin" > </i></span>
                     </span>
     
                     <input ng-model="$ctrl.data.search_text"
@@ -80,7 +80,7 @@ <h3> Nothing found in {{$ctrl.prettyFilterName[$ctrl.data.type_filter]}}! </h3>
                   <button class="btn btn-default pull-left"
                     ng-click="$ctrl.prev()"
                     ng-disabled="$ctrl.page_num === 0">
-                    <i class="fa fa-chevron-left"></i> Prev
+                    <i role="none" class="fa fa-chevron-left"></i> Prev
                   </button>
                 </div>
                 <div class="col-md-6">
@@ -92,7 +92,7 @@ <h3> Nothing found in {{$ctrl.prettyFilterName[$ctrl.data.type_filter]}}! </h3>
                   <button class="btn btn-default pull-right"
                     ng-click="$ctrl.next()"
                     ng-disabled="$ctrl.page_num + 1 === $ctrl.max_pages">
-                    <i class="fa fa-chevron-right"></i> More
+                    <i role="none" class="fa fa-chevron-right"></i> More
                   </button>
                 </div>
             </div>
diff --git a/designsafe/static/scripts/workspace/components/application-tray/application-tray.component.html b/designsafe/static/scripts/workspace/components/application-tray/application-tray.component.html
index 3c04765f4..c130eb09e 100644
--- a/designsafe/static/scripts/workspace/components/application-tray/application-tray.component.html
+++ b/designsafe/static/scripts/workspace/components/application-tray/application-tray.component.html
@@ -2,7 +2,7 @@
   <p ng-show="error" class="alert alert-danger">{{error}}</p>
   <div class="app-wrapper" ng-if="$ctrl.requesting">
     <div class="app text-center">
-      <div class="app-icon"><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+      <div class="app-icon"><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
       <div class="app-title">Loading...</div>
       <div class="app-version">&nbsp;</div>
     </div>
diff --git a/designsafe/static/scripts/workspace/components/workspace-data-browser-file-listing/workspace-data-browser-file-listing.template.html b/designsafe/static/scripts/workspace/components/workspace-data-browser-file-listing/workspace-data-browser-file-listing.template.html
index a685ec42f..062beb56b 100644
--- a/designsafe/static/scripts/workspace/components/workspace-data-browser-file-listing/workspace-data-browser-file-listing.template.html
+++ b/designsafe/static/scripts/workspace/components/workspace-data-browser-file-listing/workspace-data-browser-file-listing.template.html
@@ -24,13 +24,13 @@
                             ds-data-draggable
                             data-ds-data="agave://{{file.system}}/{{file.path}}"
                         >
-                            <i class="fa {{$ctrl.icon(file.name, file.type)}}"></i>
+                            <i role="none" class="fa {{$ctrl.icon(file.name, file.type)}}"></i>
                             <span>{{file.name}}</span>
                         </a>
                     </td>
                     <td>{{file.length|bytes}}</td>
                 </tr>
-                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
+                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i role="none" class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
             </tbody>
         </table>
     </div>
diff --git a/designsafe/static/scripts/workspace/components/workspace-data-browser-nees-listing/workspace-data-browser-nees-listing.template.html b/designsafe/static/scripts/workspace/components/workspace-data-browser-nees-listing/workspace-data-browser-nees-listing.template.html
index 0a3f850c3..2404da8ed 100644
--- a/designsafe/static/scripts/workspace/components/workspace-data-browser-nees-listing/workspace-data-browser-nees-listing.template.html
+++ b/designsafe/static/scripts/workspace/components/workspace-data-browser-nees-listing/workspace-data-browser-nees-listing.template.html
@@ -24,17 +24,17 @@
                             ds-data-draggable
                             data-ds-data="agave://nees.public/{{publication.project}}"
                         >
-                            <i class="fa fa-folder"></i>
+                            <i role="none" class="fa fa-folder"></i>
                             <span>{{publication.project}}</span>
                         </a>
                     </td>
                     <td>{{publication.title}}</td>
                 </tr>
-                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
+                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i role="none" class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
                 <tr ng-if="$ctrl.listing.loadingScroll">
                     <td>
                             <span class="bg-info text-info">
-                            <i class="fa fa-spinner fa-spin"></i> Loading...
+                            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                             </span>
                     </td>
                 </tr>
diff --git a/designsafe/static/scripts/workspace/components/workspace-data-browser-project-listing/workspace-data-browser-project-listing.template.html b/designsafe/static/scripts/workspace/components/workspace-data-browser-project-listing/workspace-data-browser-project-listing.template.html
index 596c28e42..17d5c1797 100644
--- a/designsafe/static/scripts/workspace/components/workspace-data-browser-project-listing/workspace-data-browser-project-listing.template.html
+++ b/designsafe/static/scripts/workspace/components/workspace-data-browser-project-listing/workspace-data-browser-project-listing.template.html
@@ -24,17 +24,17 @@
                             ds-data-draggable
                             data-ds-data="agave://project-{{project.uuid}}"
                         >
-                            <i class="fa fa-folder"></i>
+                            <i role="none" class="fa fa-folder"></i>
                             <span>{{project.value.projectId}}</span>
                         </a>
                     </td>
                     <td>{{project.value.title}}</td>
                 </tr>
-                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
+                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i role="none" class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
                 <tr ng-if="$ctrl.listing.loadingScroll">
                     <td>
                             <span class="bg-info text-info">
-                            <i class="fa fa-spinner fa-spin"></i> Loading...
+                            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                             </span>
                     </td>
                 </tr>
diff --git a/designsafe/static/scripts/workspace/components/workspace-data-browser-publication-listing/workspace-data-browser-publication-listing.template.html b/designsafe/static/scripts/workspace/components/workspace-data-browser-publication-listing/workspace-data-browser-publication-listing.template.html
index bca9a2cc5..b4c438496 100644
--- a/designsafe/static/scripts/workspace/components/workspace-data-browser-publication-listing/workspace-data-browser-publication-listing.template.html
+++ b/designsafe/static/scripts/workspace/components/workspace-data-browser-publication-listing/workspace-data-browser-publication-listing.template.html
@@ -24,17 +24,17 @@
                             ds-data-draggable
                             data-ds-data="agave://designsafe.storage.published/{{publication.projectId}}"
                         >
-                            <i class="fa fa-folder"></i>
+                            <i role="none" class="fa fa-folder"></i>
                             <span>{{publication.projectId}}</span>
                         </a>
                     </td>
                     <td>{{publication.project.value.title}}</td>
                 </tr>
-                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
+                <tr ng-if="$ctrl.listing.loading"><td colspan="3"><p class="lead"><i role="none" class="fa fa-spin fa-circle-o-notch"></i> Loading files...</p></td></tr>
                 <tr ng-if="$ctrl.listing.loadingScroll">
                     <td>
                             <span class="bg-info text-info">
-                            <i class="fa fa-spinner fa-spin"></i> Loading...
+                            <i role="none" class="fa fa-spinner fa-spin"></i> Loading...
                             </span>
                     </td>
                 </tr>
diff --git a/designsafe/static/scripts/workspace/components/workspace-data-browser/workspace-data-browser.template.html b/designsafe/static/scripts/workspace/components/workspace-data-browser/workspace-data-browser.template.html
index 3b09d904e..8f86fb330 100644
--- a/designsafe/static/scripts/workspace/components/workspace-data-browser/workspace-data-browser.template.html
+++ b/designsafe/static/scripts/workspace/components/workspace-data-browser/workspace-data-browser.template.html
@@ -17,7 +17,7 @@ <h2>Data Depot Browser</h2>
                ng-if="$ctrl.wants.description"
                uib-tooltip="{{$ctrl.wants.description}}"
                tooltip-placement="right"
-               tooltip-append-to-body="true"><i class="fa fa-info-circle"></i> More info</a>
+               tooltip-append-to-body="true"><i role="none" class="fa fa-info-circle"></i> More info</a>
         </p>
 
         <div ng-if="$ctrl.listingType === 'files'">
diff --git a/designsafe/static/scripts/workspace/html/application-form.html b/designsafe/static/scripts/workspace/html/application-form.html
index a3f22db48..36fddc385 100644
--- a/designsafe/static/scripts/workspace/html/application-form.html
+++ b/designsafe/static/scripts/workspace/html/application-form.html
@@ -20,7 +20,7 @@ <h1>Select an app</h1>
   <p compile="data.app"></p>
   <div ng-if="data.launching">
         <span class="label label-info">
-            <i class="fa fa-refresh fa-spin"></i>
+            <i role="none" class="fa fa-refresh fa-spin"></i>
             Launching...
         </span>
     </div>
@@ -61,7 +61,7 @@ <h2>Run <em>{{data.app.label}} <small class="version-label">ver. {{data.app.vers
     <p ng-bind-html="data.app.longDescription"></p>
     <p ng-if="data.app.helpURI">
         <a href="{{data.app.helpURI}}" target="_blank">
-            <i class="fa fa-book"></i> <span><em>{{data.app.label}}</em> Documentation</span>
+            <i role="none" class="fa fa-book"></i> <span><em>{{data.app.label}}</em> Documentation</span>
         </a>
     </p>
     <form name="appForm"
@@ -78,7 +78,7 @@ <h2>Run <em>{{data.app.label}} <small class="version-label">ver. {{data.app.vers
 
     <div ng-if="data.submitting">
         <span class="label label-info">
-            <i class="fa fa-refresh fa-spin"></i>
+            <i role="none" class="fa fa-refresh fa-spin"></i>
             Submitting job...
         </span>
     </div>
diff --git a/designsafe/static/scripts/workspace/html/jobs-status.html b/designsafe/static/scripts/workspace/html/jobs-status.html
index 06ee1a370..bfdae39ca 100644
--- a/designsafe/static/scripts/workspace/html/jobs-status.html
+++ b/designsafe/static/scripts/workspace/html/jobs-status.html
@@ -3,7 +3,7 @@
     <h2>
         Jobs Status
         <button ng-click="refresh()" class="btn btn-sm btn-default pull-right">
-            <i class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
+            <i role="none" class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
             <span class="sr-only">Refresh</span>
         </button>
     </h2>
@@ -23,13 +23,13 @@ <h2>
                 }">
                 <h4>{{job.name}}</h4>
                 <span>{{job.status}}</span>
-                <button class="btn btn-sm btn-default" ng-click="jobDetails(job)"><i class="fa fa-info-circle"></i><span class="hidden-md"> More info</span></button>
+                <button class="btn btn-sm btn-default" ng-click="jobDetails(job)"><i role="none" class="fa fa-info-circle"></i><span class="hidden-md"> More info</span></button>
             </li>
         </ul>
         <button class="btn btn-sm btn-block btn-default"
                 ng-disabled="!data.hasMoreJobs"
                 ng-click="loadMore()">
-            <i class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
+            <i role="none" class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
             Load more jobs
         </button>
     </div>
diff --git a/designsafe/static/vendor/js-custom-select/js/customSelect.js b/designsafe/static/vendor/js-custom-select/js/customSelect.js
index 702aaaead..f2255d801 100644
--- a/designsafe/static/vendor/js-custom-select/js/customSelect.js
+++ b/designsafe/static/vendor/js-custom-select/js/customSelect.js
@@ -93,7 +93,7 @@
 
 					dropdownTemplate =
 					'<a class="dropdown-toggle btn btn-secondary btn-default" data-toggle="dropdown" href ng-class="{ disabled: disabled }">' +
-						'<span>{{displayText}}</span>' + ' <i class="fa fa-caret-down"></i>' + 
+						'<span>{{displayText}}</span>' + ' <i role="none" class="fa fa-caret-down"></i>' + 
 						'<b></b>' +
 					'</a>' +
 					'<div class="dropdown-menu">' +
diff --git a/designsafe/templates/includes/ef_navigation.html b/designsafe/templates/includes/ef_navigation.html
index 24fdaa27c..c8581f673 100644
--- a/designsafe/templates/includes/ef_navigation.html
+++ b/designsafe/templates/includes/ef_navigation.html
@@ -8,7 +8,7 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="/"><i class="fa fa-home"></i></a>
+      <a class="navbar-brand" href="/"><i role="none" class="fa fa-home"></i></a>
     </div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
@@ -19,4 +19,4 @@
 
     </div><!-- /.navbar-collapse -->
   </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/designsafe/templates/includes/header.html b/designsafe/templates/includes/header.html
index 0c0ea2d44..279bb7465 100644
--- a/designsafe/templates/includes/header.html
+++ b/designsafe/templates/includes/header.html
@@ -42,7 +42,7 @@ <h1 class="sr-only">DesignSafe-CI: A Natural Hazards Engineering Research Infras
       {% if not agave_ready %}
       &nbsp;
       <a class="text-danger" title="API Session Not Available. Click for details."
-        href="{% url 'designsafe_auth:agave_session_error' %}"><i class="fa fa-exclamation-triangle"></i><span
+        href="{% url 'designsafe_auth:agave_session_error' %}"><i role="none" class="fa fa-exclamation-triangle"></i><span
           class="sr-only">API Session Not Available. Click for details.</span></a>
       {% endif %}
     </span>
diff --git a/designsafe/templates/includes/navigation.html b/designsafe/templates/includes/navigation.html
index 94f11bbb5..c3e2b585c 100644
--- a/designsafe/templates/includes/navigation.html
+++ b/designsafe/templates/includes/navigation.html
@@ -33,7 +33,7 @@
       </ul>
       <form class="navbar-form navbar-right">
         <input class="form-control" id="searchfield" placeholder="Search DesignSafe">
-        <button class="btn btn-default" id="search_button"> <i class="fa fa-search"></i> </button>
+        <button class="btn btn-default" id="search_button"> <i role="none" class="fa fa-search"></i> </button>
       </form>
     </div>
   </div>

From a8586094c459f368427b44db452eb5ea23a94846 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 4 Oct 2023 16:22:42 -0500
Subject: [PATCH 2/5] chore: reduce diff for application-edit.html

---
 .../applications/html/application-edit.html   | 80 +------------------
 1 file changed, 1 insertion(+), 79 deletions(-)

diff --git a/designsafe/static/scripts/applications/html/application-edit.html b/designsafe/static/scripts/applications/html/application-edit.html
index 535a822f3..1813e46c1 100644
--- a/designsafe/static/scripts/applications/html/application-edit.html
+++ b/designsafe/static/scripts/applications/html/application-edit.html
@@ -1,79 +1 @@
-<p ng-show="error" class="alert alert-danger">{{error}}</p> role="none" class="fa 
-<div class="text-center" ng-show="requesting">
-  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
-  <div>Loading...</div>
-</div>
-<div ng-show="editModel.type === 'html' && !requesting">
-  <div class="row">
-    <div class="col-md-6">
-      <form
-        name="myCustomForm"
-        sf-schema="customSchema"
-        sf-form="customForm"
-        sf-model="customModel"
-        >
-      </form>
-    </div>
-    <div class="col-md-6">
-      <b>HTML Content Preview</b>
-      <div ng-bind-html="customModel.html | toTrusted"></div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-6">
-      <div class="schema-form-actions">
-        <div class="btn-group pull-right">
-          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div ng-show="editModel.type === 'agave' && !requesting">
-  <div class="row">
-      <div class="col-md-6">
-        <div class="text-center">
-            <i class=" icon-layers font-red"></i>
-            <span>
-                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>
-            </span>
-        </div>
-      </div>
-      <div class="col-md-6">
-          <div class="">
-              <div class="btn-group" data-toggle="buttons">
-                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>
-                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>
-                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>
-              </div>
-          </div>
-      </div>
-  </div>
-  <div class="row">
-      <div class="col-md-12">
-        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
-            <form
-                    name="myForm"
-                    class="form-wizard"
-                    sf-schema="schema"
-                    sf-form="form"
-                    sf-model="model"
-                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"
-                    ng-submit="submit()"
-                    no-validate>
-            </form>
-            <div class="col-md-12 schema-form-actions top-buffer">
-              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>
-
-              <div class="btn-group pull-right">
-                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>
-                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
-              </div>
-            </div>
-        </div>
-        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
-            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>
-        </div>
-      </div>
-  </div>
-</div>
+<p ng-show="error" class="alert alert-danger">{{error}}</p><div class="text-center" ng-show="requesting">  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>  <div>Loading...</div></div><div ng-show="editModel.type === 'html' && !requesting">  <div class="row">    <div class="col-md-6">      <form        name="myCustomForm"        sf-schema="customSchema"        sf-form="customForm"        sf-model="customModel"        >      </form>    </div>    <div class="col-md-6">      <b>HTML Content Preview</b>      <div ng-bind-html="customModel.html | toTrusted"></div>    </div>  </div>  <div class="row">    <div class="col-md-6">      <div class="schema-form-actions">        <div class="btn-group pull-right">          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>        </div>      </div>    </div>  </div></div><div ng-show="editModel.type === 'agave' && !requesting">  <div class="row">      <div class="col-md-6">        <div class="text-center">            <i role="none" class=" icon-layers font-red"></i>            <span>                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>            </span>        </div>      </div>      <div class="col-md-6">          <div class="">              <div class="btn-group" data-toggle="buttons">                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>              </div>          </div>      </div>  </div>  <div class="row">      <div class="col-md-12">        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">            <form                    name="myForm"                    class="form-wizard"                    sf-schema="schema"                    sf-form="form"                    sf-model="model"                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"                    ng-submit="submit()"                    no-validate>            </form>            <div class="col-md-12 schema-form-actions top-buffer">              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>              <div class="btn-group pull-right">                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>              </div>            </div>        </div>        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>        </div>      </div>  </div></div>

From f15b47d0a8626a6c1615742cb2cd193ff4470993 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 4 Oct 2023 16:33:32 -0500
Subject: [PATCH 3/5] chore: reduce diff for application-details.html

---
 .../html/application-details.html             | 272 +++++++++---------
 1 file changed, 136 insertions(+), 136 deletions(-)

diff --git a/designsafe/static/scripts/applications/html/application-details.html b/designsafe/static/scripts/applications/html/application-details.html
index 7632d2839..e1e0f2e78 100644
--- a/designsafe/static/scripts/applications/html/application-details.html
+++ b/designsafe/static/scripts/applications/html/application-details.html
@@ -1,136 +1,136 @@
-<div modal="appDetailsModal">
-    <div class="modal-header">
-      <h3 class="modal-title">Application Details</h3>
-    </div>
-    <div class="modal-body">
-      <p ng-show="error" class="alert alert-danger">{{error}}</p>
-      <div class="text-center" ng-show="requesting">
-          <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
-      </div>
-      <div ng-if="appMeta && !requesting">
-        <div ng-switch="appMeta.value.type">
-          <div ng-switch-when="html">
-
-            <div class="table-responsive">
-              <table class="table table-bordered">
-                <tbody>
-                  <tr ng-if="appMeta.value.definition.id">
-                    <td>ID</td>
-                    <td><strong>{{appMeta.value.definition.id}}</strong></td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.owner">
-                    <td>Owner</td>
-                    <td>{{appMeta.value.definition.owner}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.label">
-                    <td>Name</td>
-                    <td>{{appMeta.value.definition.label}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.appCategory">
-                    <td>Category</td>
-                    <td>{{appMeta.value.definition.appCategory}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.appIcon">
-                    <td>Icon</td>
-                    <td>{{appMeta.value.definition.appIcon}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.shortDescription">
-                    <td>Description</td>
-                    <td>{{appMeta.value.definition.shortDescription}}</td>
-                  </tr>
-                  <tr>
-                    <td>Public</td>
-                    <td>{{appMeta.value.definition.isPublic}}</td>
-                  </tr>
-                  <tr>
-                    <td>Available</td>
-                    <td>{{appMeta.value.definition.available}}</td>
-                  </tr>
-                  <tr ng-if="appMeta.value.definition.html">
-                    <td>HTML</td>
-                    <td><div ng-bind-html="appMeta.value.definition.html | toTrusted"></div></td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div ng-switch-when="agave">
-            <div ng-if="appMeta" class="table-responsive">
-              <table class="table table-bordered">
-                <tbody>
-                 <tr ng-if="appMeta.value.definition.id">
-                   <td>ID</td>
-                   <td><strong>{{appMeta.value.definition.id}}</strong></td>
-                 </tr>
-                  <tr ng-if="appMeta.value.definition.owner">
-                    <td>Owner</td>
-                    <td>{{appMeta.value.definition.owner}}</td>
-                  </tr>
-                 <tr ng-if="appMeta.value.definition.name">
-                   <td>Name</td>
-                   <td>{{appMeta.value.definition.name}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.shortDescription">
-                   <td>Description</td>
-                   <td>{{appMeta.value.definition.shortDescription}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.label">
-                   <td>Label</td>
-                   <td>{{appMeta.value.definition.label}}</td>
-                 </tr>
-                <tr ng-if="appMeta.value.definition.appCategory">
-                  <td>Category</td>
-                  <td>{{appMeta.value.definition.appCategory}}</td>
-                </tr>
-                <tr ng-if="appMeta.value.definition.appIcon">
-                  <td>Icon</td>
-                  <td>{{appMeta.value.definition.appIcon}}</td>
-                </tr>
-                 <tr>
-                   <td>Public</td>
-                   <td>{{appMeta.value.definition.isPublic}}</td>
-                 </tr>
-                 <tr>
-                   <td>Available</td>
-                   <td>{{appMeta.value.definition.available}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.deploymentSystem">
-                   <td>Deployment System</td>
-                   <td>{{appMeta.value.definition.deploymentSystem}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.deploymentPath">
-                   <td>Deployment Path</td>
-                   <td>{{appMeta.value.definition.deploymentPath}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.executionSystem">
-                   <td>Execution System</td>
-                   <td>{{appMeta.value.definition.executionSystem}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.executionType">
-                   <td>Execution Type</td>
-                   <td>{{appMeta.value.definition.executionType}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.parallelism">
-                   <td>Parallelism</td>
-                   <td>{{appMeta.value.definition.parallelism}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.revision">
-                   <td>Revision</td>
-                   <td>{{appMeta.value.definition.revision}}</td>
-                 </tr>
-                 <tr ng-if="appMeta.value.definition.lastModified">
-                   <td>Last Modified</td>
-                   <td>{{appMeta.value.definition.lastModified}}</td>
-                 </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    <div class="modal-footer top-buffer">
-      <div class="text-center">
-        <button class="btn btn-default" ng-click="cancel()">Exit</button>
-      </div>
-    </div>
-</div>
+<div modal="appDetailsModal">
+    <div class="modal-header">
+      <h3 class="modal-title">Application Details</h3>
+    </div>
+    <div class="modal-body">
+      <p ng-show="error" class="alert alert-danger">{{error}}</p>
+      <div class="text-center" ng-show="requesting">
+          <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
+      </div>
+      <div ng-if="appMeta && !requesting">
+        <div ng-switch="appMeta.value.type">
+          <div ng-switch-when="html">
+
+            <div class="table-responsive">
+              <table class="table table-bordered">
+                <tbody>
+                  <tr ng-if="appMeta.value.definition.id">
+                    <td>ID</td>
+                    <td><strong>{{appMeta.value.definition.id}}</strong></td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.owner">
+                    <td>Owner</td>
+                    <td>{{appMeta.value.definition.owner}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.label">
+                    <td>Name</td>
+                    <td>{{appMeta.value.definition.label}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.appCategory">
+                    <td>Category</td>
+                    <td>{{appMeta.value.definition.appCategory}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.appIcon">
+                    <td>Icon</td>
+                    <td>{{appMeta.value.definition.appIcon}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.shortDescription">
+                    <td>Description</td>
+                    <td>{{appMeta.value.definition.shortDescription}}</td>
+                  </tr>
+                  <tr>
+                    <td>Public</td>
+                    <td>{{appMeta.value.definition.isPublic}}</td>
+                  </tr>
+                  <tr>
+                    <td>Available</td>
+                    <td>{{appMeta.value.definition.available}}</td>
+                  </tr>
+                  <tr ng-if="appMeta.value.definition.html">
+                    <td>HTML</td>
+                    <td><div ng-bind-html="appMeta.value.definition.html | toTrusted"></div></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div ng-switch-when="agave">
+            <div ng-if="appMeta" class="table-responsive">
+              <table class="table table-bordered">
+                <tbody>
+                 <tr ng-if="appMeta.value.definition.id">
+                   <td>ID</td>
+                   <td><strong>{{appMeta.value.definition.id}}</strong></td>
+                 </tr>
+                  <tr ng-if="appMeta.value.definition.owner">
+                    <td>Owner</td>
+                    <td>{{appMeta.value.definition.owner}}</td>
+                  </tr>
+                 <tr ng-if="appMeta.value.definition.name">
+                   <td>Name</td>
+                   <td>{{appMeta.value.definition.name}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.shortDescription">
+                   <td>Description</td>
+                   <td>{{appMeta.value.definition.shortDescription}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.label">
+                   <td>Label</td>
+                   <td>{{appMeta.value.definition.label}}</td>
+                 </tr>
+                <tr ng-if="appMeta.value.definition.appCategory">
+                  <td>Category</td>
+                  <td>{{appMeta.value.definition.appCategory}}</td>
+                </tr>
+                <tr ng-if="appMeta.value.definition.appIcon">
+                  <td>Icon</td>
+                  <td>{{appMeta.value.definition.appIcon}}</td>
+                </tr>
+                 <tr>
+                   <td>Public</td>
+                   <td>{{appMeta.value.definition.isPublic}}</td>
+                 </tr>
+                 <tr>
+                   <td>Available</td>
+                   <td>{{appMeta.value.definition.available}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.deploymentSystem">
+                   <td>Deployment System</td>
+                   <td>{{appMeta.value.definition.deploymentSystem}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.deploymentPath">
+                   <td>Deployment Path</td>
+                   <td>{{appMeta.value.definition.deploymentPath}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.executionSystem">
+                   <td>Execution System</td>
+                   <td>{{appMeta.value.definition.executionSystem}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.executionType">
+                   <td>Execution Type</td>
+                   <td>{{appMeta.value.definition.executionType}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.parallelism">
+                   <td>Parallelism</td>
+                   <td>{{appMeta.value.definition.parallelism}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.revision">
+                   <td>Revision</td>
+                   <td>{{appMeta.value.definition.revision}}</td>
+                 </tr>
+                 <tr ng-if="appMeta.value.definition.lastModified">
+                   <td>Last Modified</td>
+                   <td>{{appMeta.value.definition.lastModified}}</td>
+                 </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    <div class="modal-footer top-buffer">
+      <div class="text-center">
+        <button class="btn btn-default" ng-click="cancel()">Exit</button>
+      </div>
+    </div>
+</div>

From bbc23b038fa753825e0cced30f3bdfc4138129ab Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 4 Oct 2023 16:35:17 -0500
Subject: [PATCH 4/5] chore: reduce diff (more) for application-edit.html

---
 .../static/scripts/applications/html/application-edit.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/designsafe/static/scripts/applications/html/application-edit.html b/designsafe/static/scripts/applications/html/application-edit.html
index 1813e46c1..939853937 100644
--- a/designsafe/static/scripts/applications/html/application-edit.html
+++ b/designsafe/static/scripts/applications/html/application-edit.html
@@ -1 +1 @@
-<p ng-show="error" class="alert alert-danger">{{error}}</p><div class="text-center" ng-show="requesting">  <div><i class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>  <div>Loading...</div></div><div ng-show="editModel.type === 'html' && !requesting">  <div class="row">    <div class="col-md-6">      <form        name="myCustomForm"        sf-schema="customSchema"        sf-form="customForm"        sf-model="customModel"        >      </form>    </div>    <div class="col-md-6">      <b>HTML Content Preview</b>      <div ng-bind-html="customModel.html | toTrusted"></div>    </div>  </div>  <div class="row">    <div class="col-md-6">      <div class="schema-form-actions">        <div class="btn-group pull-right">          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>        </div>      </div>    </div>  </div></div><div ng-show="editModel.type === 'agave' && !requesting">  <div class="row">      <div class="col-md-6">        <div class="text-center">            <i role="none" class=" icon-layers font-red"></i>            <span>                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>            </span>        </div>      </div>      <div class="col-md-6">          <div class="">              <div class="btn-group" data-toggle="buttons">                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>              </div>          </div>      </div>  </div>  <div class="row">      <div class="col-md-12">        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">            <form                    name="myForm"                    class="form-wizard"                    sf-schema="schema"                    sf-form="form"                    sf-model="model"                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"                    ng-submit="submit()"                    no-validate>            </form>            <div class="col-md-12 schema-form-actions top-buffer">              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>              <div class="btn-group pull-right">                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>              </div>            </div>        </div>        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>        </div>      </div>  </div></div>
+<p ng-show="error" class="alert alert-danger">{{error}}</p>
<div class="text-center" ng-show="requesting">
  <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
  <div>Loading...</div>
</div>
<div ng-show="editModel.type === 'html' && !requesting">
  <div class="row">
    <div class="col-md-6">
      <form
        name="myCustomForm"
        sf-schema="customSchema"
        sf-form="customForm"
        sf-model="customModel"
        >
      </form>
    </div>
    <div class="col-md-6">
      <b>HTML Content Preview</b>
      <div ng-bind-html="customModel.html | toTrusted"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="schema-form-actions">
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div ng-show="editModel.type === 'agave' && !requesting">
  <div class="row">
      <div class="col-md-6">
        <div class="text-center">
            <i class=" icon-layers font-red"></i>
            <span>
                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>
            </span>
        </div>
      </div>
      <div class="col-md-6">
          <div class="">
              <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <form
                    name="myForm"
                    class="form-wizard"
                    sf-schema="schema"
                    sf-form="form"
                    sf-model="model"
                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"
                    ng-submit="submit()"
                    no-validate>
            </form>
            <div class="col-md-12 schema-form-actions top-buffer">
              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>

              <div class="btn-group pull-right">
                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>
                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
              </div>
            </div>
        </div>
        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>
        </div>
      </div>
  </div>
</div>

From 2ab29a1905d3fcc15f1b0987761d14743e9f8be4 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 4 Oct 2023 16:41:16 -0500
Subject: [PATCH 5/5] chore: reduce diff (more, again) for
 application-edit.html

---
 .../static/scripts/applications/html/application-edit.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/designsafe/static/scripts/applications/html/application-edit.html b/designsafe/static/scripts/applications/html/application-edit.html
index 939853937..0506c12f0 100644
--- a/designsafe/static/scripts/applications/html/application-edit.html
+++ b/designsafe/static/scripts/applications/html/application-edit.html
@@ -1 +1 @@
-<p ng-show="error" class="alert alert-danger">{{error}}</p>
<div class="text-center" ng-show="requesting">
  <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
  <div>Loading...</div>
</div>
<div ng-show="editModel.type === 'html' && !requesting">
  <div class="row">
    <div class="col-md-6">
      <form
        name="myCustomForm"
        sf-schema="customSchema"
        sf-form="customForm"
        sf-model="customModel"
        >
      </form>
    </div>
    <div class="col-md-6">
      <b>HTML Content Preview</b>
      <div ng-bind-html="customModel.html | toTrusted"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="schema-form-actions">
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div ng-show="editModel.type === 'agave' && !requesting">
  <div class="row">
      <div class="col-md-6">
        <div class="text-center">
            <i class=" icon-layers font-red"></i>
            <span>
                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>
            </span>
        </div>
      </div>
      <div class="col-md-6">
          <div class="">
              <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <form
                    name="myForm"
                    class="form-wizard"
                    sf-schema="schema"
                    sf-form="form"
                    sf-model="model"
                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"
                    ng-submit="submit()"
                    no-validate>
            </form>
            <div class="col-md-12 schema-form-actions top-buffer">
              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>

              <div class="btn-group pull-right">
                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>
                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
              </div>
            </div>
        </div>
        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>
        </div>
      </div>
  </div>
</div>
+<p ng-show="error" class="alert alert-danger">{{error}}</p>
<div class="text-center" ng-show="requesting">
  <div><i role="none" class="fa fa-circle-o-notch fa-spin fa-3x"></i></div>
  <div>Loading...</div>
</div>
<div ng-show="editModel.type === 'html' && !requesting">
  <div class="row">
    <div class="col-md-6">
      <form
        name="myCustomForm"
        sf-schema="customSchema"
        sf-form="customForm"
        sf-model="customModel"
        >
      </form>
    </div>
    <div class="col-md-6">
      <b>HTML Content Preview</b>
      <div ng-bind-html="customModel.html | toTrusted"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="schema-form-actions">
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div ng-show="editModel.type === 'agave' && !requesting">
  <div class="row">
      <div class="col-md-6">
        <div class="text-center">
           <i role="none" class=" icon-layers font-red"></i>
            <span>
                App Edit Wizard - <span class="step-title"> Step {{currentTabIndex + 1}} of 5 </span>
            </span>
        </div>
      </div>
      <div class="col-md-6">
          <div class="">
              <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default btn-sm" uib-btn-radio="'form'" ng-model="wizview">Form</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'code'" ng-model="wizview" >Code</label>
                  <label class="btn btn-default btn-sm" uib-btn-radio="'split'" ng-model="wizview" >Split</label>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
        <div ng-show="wizview !== 'code'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <form
                    name="myForm"
                    class="form-wizard"
                    sf-schema="schema"
                    sf-form="form"
                    sf-model="model"
                    sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"
                    ng-submit="submit()"
                    no-validate>
            </form>
            <div class="col-md-12 schema-form-actions top-buffer">
              <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == 0" ng-click="previousStep()">Previous</button>

              <div class="btn-group pull-right">
                <button type="button" class="btn btn-default" ng-disabled="currentTabIndex == form[0].tabs.length-1" ng-click="nextStep()">Next</button>
                <button type="button" class="btn btn-primary" ng-click="submit()">Submit</button>
              </div>
            </div>
        </div>
        <div ng-show="wizview !== 'form'" class="{{(wizview === 'split') ? 'col-md-6': 'col-md-12'}}">
            <textarea ui-codemirror ui-codemirror-opts="editorConfig" ng-model="prettyModel" ui-refresh="refreshCode()"></textarea>
        </div>
      </div>
  </div>
</div>