Merge pull request #2839 from uktrade/replace-i-tags-with-span-for-icons

KLS-1422 Using idiomatic tag for icons fails WCAG 1.3.1 (A)
uktrade · Jan 15, 2024 · 484fe9e · 484fe9e
2 parents e4ae8da + 92ce83e
commit 484fe9e
Show file tree

Hide file tree

Showing 78 changed files with 230 additions and 156 deletions.
diff --git a/core/sass/components/_sign-up.scss b/core/sass/components/_sign-up.scss
@@ -142,9 +142,9 @@
           line-height: 34px;
         }
 
-        i {
+        span.great-icon {
           margin-right: 30px;
-          font-size: 1.5em;
+          font-size: 1.5em!important;
         }
       }
     }

diff --git a/core/sass/exportplan/_sections.scss b/core/sass/exportplan/_sections.scss
@@ -59,7 +59,7 @@
   padding: 0;
 }
 
-.hide-show-trigger:checked~div>label#hide-show-button>i {
+.hide-show-trigger:checked~div>label#hide-show-button>span[role="img"] {
   transform: rotate(90deg);
   padding-right: 0;
 }

diff --git a/core/sass/learn/_base.scss b/core/sass/learn/_base.scss
@@ -592,7 +592,7 @@ $desktop: 1024px;
         }
       }
 
-      i {
+      span[role='img'] {
         margin-bottom: 0;
 
         @include tablet {

diff --git a/core/templates/core/header.html b/core/templates/core/header.html
@@ -28,18 +28,18 @@
                         {% path_match "^\/learn\/" as in_learning %}
                         <li>
                             <a id="header-link-learning"
-                            class="govuk-!-padding-3 {% if in_learning %}active{% endif %}"
-                            href="/learn/categories/">Learn to export</a>
+                               class="govuk-!-padding-3 {% if in_learning %}active{% endif %}"
+                               href="/learn/categories/">Learn to export</a>
                         </li>
-                    {% endif %}    
+                    {% endif %}
                     {% if request.user.is_authenticated %}
                         {% path_match "^\/where-to-export\/" as in_targetmarkets %}
                         {% if not features.FEATURE_DEA_V2 %}
                             {% path_match "^\/learn\/" as in_learning %}
                             <li>
                                 <a id="header-link-learning"
-                                class="govuk-!-padding-3 {% if in_learning %}active{% endif %}"
-                                href="/learn/categories/">Learn to export</a>
+                                   class="govuk-!-padding-3 {% if in_learning %}active{% endif %}"
+                                   href="/learn/categories/">Learn to export</a>
                             </li>
                         {% endif %}
                         <li>
@@ -65,7 +65,9 @@
                                         data-reveal-button
                                         data-reveal-modal
                                         aria-controls="guides-menu">
-                                    Guides <i class="fas fa-chevron-down" aria-hidden="true"></i>
+                                    Guides <span role="img"
+       class="fas fa-chevron-down govuk-!-static-margin-left-2"
+       aria-hidden="true"></span>
                                 </button>
                                 <div id="guides-menu">
                                     <ul>
@@ -95,10 +97,9 @@
                 <form id="magna-header-search-form"
                       class="magna-header__search govuk-!-margin-bottom-4"
                       action="{% url 'search:search' %}"
-                      method="GET">
+                      method="get">
                     <label for="magna-header-search-box" class="visually-hidden">Search</label>
                     <input id="magna-header-search-box"
-                           class=""
                            type="text"
                            name="q"
                            placeholder="Search">

diff --git a/core/templates/core/includes/_case_study_quote_block.html b/core/templates/core/includes/_case_study_quote_block.html
@@ -7,7 +7,7 @@
     <div class="quote bg-white br-xs m-t-xs p-t-xs p-b-xs p-r-xs p-f-l">
         <div class="quote-block">
             <div>
-                <i class="fas fa-quote-left text-blue-deep-50 block"></i>
+                <span role="img" class="fas fa-quote-left text-blue-deep-50 block"></span>
                 {{ quote }}
             </div>
             <div class="only-mobile m-v-xs attribution">

diff --git a/core/templates/core/includes/_sidebar-link.html b/core/templates/core/includes/_sidebar-link.html
@@ -19,7 +19,7 @@ <h4 class="h-m p-b-s p-t-0">
         </h4>
         <a class="button button--secondary --button-large" href={% if value.link %}{{ value.link.internal_link.get_url|default:value.link.external_link }}{% endif %}>
             {% if value.read_time %}
-                <i class="fa fa-clock-o m-r-xxs" aria-hidden="true"></i>{{ value.read_time|format_timedelta }}
+                <span role="img" class="fa fa-clock-o m-r-xxs" aria-hidden="true"></span>{{ value.read_time|format_timedelta }}
             {% else %}
                 Go
             {% endif %}

diff --git a/core/templates/core/includes/_target_table.html b/core/templates/core/includes/_target_table.html
@@ -1,16 +1,16 @@
-<span class="h-s"><i class="fa fa-clock-o m-r-xxs" aria-hidden="true"></i>25-34 years old<span>
-    <table class="table bg-black-20">
-        <thead>
-            <tr>
-                <th>total population</th>
-                <th>Access to internet</th>
-                <th>Consumer price index</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>32.8 million</td>
-                <td>90%(367 million)</td>
-            </tr>
-        </tbody>
-    </table>
+<span class="h-s"><span role="img" class="fa fa-clock-o m-r-xxs" aria-hidden="true"></span>25-34 years old</span>
+<table class="table bg-black-20">
+    <thead>
+        <tr>
+            <th>total population</th>
+            <th>Access to internet</th>
+            <th>Consumer price index</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>32.8 million</td>
+            <td>90%(367 million)</td>
+        </tr>
+    </tbody>
+</table>
diff --git a/core/templates/core/includes/backlink.html b/core/templates/core/includes/backlink.html
@@ -1,4 +1,4 @@
 {% load wagtailcore_tags %}
 <a href="{{ url }}" class="back-link h-m body-m-b {{ classes }}">
-    <i class="fas fa-arrow-circle-left"></i><span class="m-f-xs">{{ label }}</span>
+    <span role="img" class="great-icon fas fa-arrow-circle-left"></span><span class="m-f-xs">{{ label }}</span>
 </a>
diff --git a/core/templates/microsites/blocks/streamfield.html b/core/templates/microsites/blocks/streamfield.html
@@ -11,7 +11,7 @@
                         <div class="success-message-container">
                             <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
                                   rel="stylesheet">
-                            <i class="fa fa-check"></i>
+                            <span role="img" class="fa fa-check"></span>
                             {% trans "Information has been submitted successfully" as success_message_text %}
                             <p>{{ success_message_text }}</p>
                         </div>

diff --git a/domestic/templates/domestic/dashboard_cards/exportplan_progress.html b/domestic/templates/domestic/dashboard_cards/exportplan_progress.html
@@ -8,7 +8,7 @@
 <div class="card">
     <div class="g-card-header flex-jc-space-between flex-ai-center">
         <h2>My export plans</h2>
-        <a class="button secondary-button" href="{% url 'exportplan:start' %}"><i class="fas fa-plus"></i><span>Create a new plan</span></a>
+        <a class="button secondary-button" href="{% url 'exportplan:start' %}"><span role="img" class="fas fa-plus govuk-!-margin-right-2"></span><span>Create a new plan</span></a>
     </div>
     {% for plan in exportplan_list|slice:":3" %}
         <div class="g-card-full">

diff --git a/domestic/templates/domestic/includes/streamfield.html b/domestic/templates/domestic/includes/streamfield.html
@@ -7,7 +7,7 @@
                     <div class="success-message-container">
                         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
                               rel="stylesheet">
-                        <i class="fa fa-check"></i>
+                        <span role="img" class="fa fa-check"></span>
                         <p>Information has been submitted successfully</p>
                     </div>
                 {% else %}

diff --git a/export_academy/helpers.py b/export_academy/helpers.py
@@ -126,7 +126,8 @@ def get_event_join_button(event):
         {
             'url': reverse_lazy('export_academy:join', kwargs=dict(event_id=event.pk)),
             'label': """Join event<span class="great-visually-hidden">opens in new tab</span>
-            <i class="fa fa-external-link-alt govuk-!-margin-right-0 govuk-!-margin-left-2" aria-hidden="true"></i>""",
+            <span role="img" class="fa fa-external-link-alt govuk-!-margin-right-0
+            govuk-!-margin-left-2" aria-hidden="true"></span>""",
             'classname': 'govuk-button ukea-ga-tracking govuk-!-margin-bottom-0',
             'title': f'Join {event.name}',
         },
@@ -135,8 +136,8 @@ def get_event_join_button(event):
 
 def get_ics_button(event, on_confirmation):
     return {
-        'label': f'<i class="fa fa-calendar-plus" aria-hidden="true"></i>Add to calendar<span '
-        f'class="great-visually-hidden">{event.name}</span>',
+        'label': f'<span role="img"  class="fa fa-calendar-plus govuk-!-margin-right-2" aria-hidden="true"></span>'
+        f'Add to calendar<span class="great-visually-hidden">{event.name}</span>',
         'value': 'Confirmed',
         'type': 'submit',
         'classname': 'govuk-button ukea-ga-tracking govuk-!-margin-bottom-0'
@@ -153,7 +154,7 @@ def get_event_completed_buttons(event):
             result += [
                 {
                     'url': reverse_lazy('export_academy:event-video', kwargs=dict(pk=event.pk)),
-                    'label': f"""<i class="fa fa-play" aria-hidden="true"></i>Play
+                    'label': f"""<span role="img" class="fa fa-play" aria-hidden="true"></span>Play
                             <span class="great-visually-hidden"> recording of {event.name}</span>""",
                     'classname': 'govuk-button ukea-ga-tracking govuk-!-margin-bottom-0',
                     'title': f'Play recording of {event.name}',

diff --git a/export_academy/templates/export_academy/event_on_demand_video.html b/export_academy/templates/export_academy/event_on_demand_video.html
@@ -77,10 +77,10 @@ <h2 class="govuk-heading-s">Next live event with Q&A</h2>
                 <div class="govuk-grid-column-two-thirds-from-desktop govuk-!-padding-0 govuk-!-padding-bottom-6 great-grey-bottom-border govuk-!-margin-bottom-4">
                     {% if signed_in %}
                         <a class="govuk-link govuk-link--no-visited-state"
-                           href="{{ event_document_url }}"><i class="fa fa-file-download govuk-!-padding-right-2"></i>Download event presentation</a>
+                           href="{{ event_document_url }}"><span role="img" class="fa fa-file-download govuk-!-padding-right-2"></span>Download event presentation</a>
                     {% else %}
                         <a class="govuk-link govuk-link--no-visited-state"
-                           href="{% url 'export_academy:signup' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}"><i class="fa fa-file-download govuk-!-padding-right-2"></i>Sign up to download event presentation</a>
+                           href="{% url 'export_academy:signup' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}"><span role="img" class="fa fa-file-download govuk-!-padding-right-2"></span>Sign up to download event presentation</a>
                     {% endif %}
                 </div>
             </section>

diff --git a/export_academy/templates/export_academy/includes/event_action_buttons.html b/export_academy/templates/export_academy/includes/event_action_buttons.html
@@ -1,6 +1,6 @@
 {% if action_buttons.event_action_buttons and is_completed %}
     <p class="great-info-text">
-        <i class="fa fa-info-circle" aria-hidden="true"></i><span>Event recordings are only available for 4 weeks after the event.</span>
+        <span role="img" class="fa fa-info-circle" aria-hidden="true"></span><span>Event recordings are only available for 4 weeks after the event.</span>
     </p>
 {% endif %}
 <div class="great-actions-group">

diff --git a/export_academy/templates/export_academy/includes/event_details_main_content.html b/export_academy/templates/export_academy/includes/event_details_main_content.html
@@ -94,7 +94,7 @@ <h2 class="govuk-heading-s">Watch a past event recording</h2>
                             <div class="event-listing-summary-info">
                                 <div>
                                     <div class="event-date-badge">
-                                        <i class="fa fa-play" aria-hidden="true"></i>
+                                        <span role="img" class="great-icon fa fa-play" aria-hidden="true"></span>
                                     </div>
                                 </div>
                                 <div class="event-summary-text">

diff --git a/export_academy/templates/export_academy/includes/event_item_badge.html b/export_academy/templates/export_academy/includes/event_item_badge.html
@@ -6,7 +6,7 @@
     {% if event %}
         <div class="event-date-badge">
             {% if display_past_recording %}
-                <i class="fas fa-play"></i>
+                <span role="img" class="great-icon fas fa-play"></span>
             {% else %}
                 <time datetime="{{ event.start_date|date:"Y-m-d" }}T{{ event.start_date|time:"H:i:s" }}{{ event.start_date|date:"O" }}">
                     <span>{{ event.start_date|date:"d" }}</span>

diff --git a/export_academy/templates/export_academy/includes/event_warning.html b/export_academy/templates/export_academy/includes/event_warning.html
@@ -1,7 +1,7 @@
 <div class="event-warning-wrapper">
     {% if warning_text %}
         <div>
-            <i class="fa fa-exclamation-circle"></i><strong class="govuk-warning-text__text govuk-!-static-padding-left-0">
+            <span role="img" class="great-icon fa fa-exclamation-circle"></span><strong class="govuk-warning-text__text govuk-!-static-padding-left-0">
                 <span class="govuk-warning-text__assistive">Warning</span>
                 {{ warning_text }}
             </strong>

diff --git a/exportplan/templates/exportplan/dashboard_page.html b/exportplan/templates/exportplan/dashboard_page.html
@@ -14,7 +14,7 @@
             <span class="-section--back-to">
                 <a href="{% url 'exportplan:index' %}"
                    class="back-link h-m body-m-b m-t-xs">
-                    <i class="fas fa-arrow-circle-left"></i><span class="m-f-xs">Back to My export plans</span>
+                    <span role="img" class="great-icon fas fa-arrow-circle-left"></span><span class="m-f-xs">Back to My export plans</span>
                 </a>
             </span>
             <h2 class="h-m p-t-s">{{ export_plan.name }}</h2>
@@ -59,7 +59,7 @@ <h3 class="bold body-l-b text-blue-deep-80">{{ section.title }}</h3>
                     <a id="add-image"
                        href="{% url 'exportplan:add-logo' %}"
                        class="link text-center text-blue-deep-80 p-t-xs p-b-s section-upload">
-                        <i class="fas fa-upload"></i>
+                        <span role="img" class="fas fa-upload"></span>
                         <h3 class="m-v-xs bold">Upload your logo</h3>
                         <p class="m-0">Click here.</p>
                         <p class="m-0">PNG or JPG, 270x170 pixels</p>

diff --git a/exportplan/templates/exportplan/includes/lesson_details.html b/exportplan/templates/exportplan/includes/lesson_details.html
@@ -9,7 +9,7 @@ <h3 class="body-l-b m-b-xs">Need help?</h3>
             <h4 class="body-m text-white">{{ lesson_details|get_item:lesson_name|get_item:'category' }}</h4>
             <p class="text-white h-s m-t-0">{{ lesson_details|get_item:lesson_name|get_item:'title' }}</p>
             <div class="text-white">
-                <i class="fa fa-clock text-blue-deep-40 m-r-xs"></i>
+                <span role="img" class="fa fa-clock text-blue-deep-40 m-r-xs"></span>
                 <span class="body-m text-white">{{ lesson_details|get_item:lesson_name|get_item:'duration' }} read</span>
             </div>
         </div>

diff --git a/exportplan/templates/exportplan/index.html b/exportplan/templates/exportplan/index.html
@@ -10,7 +10,7 @@
             <div>
                 <h1>My export plans</h1>
                 <p>Your unique business plan to launch your exports.</p>
-                <a href="{% url 'exportplan:start' %}" class="button primary-button"><i class="fas fa-plus m-r-xs"></i>Create a new plan</a>
+                <a href="{% url 'exportplan:start' %}" class="button primary-button"><span role="img" class="fas fa-plus govuk-!-margin-right-2"></span>Create a new plan</a>
             </div>
             <div class="image-container"></div>
         </div>
@@ -21,7 +21,7 @@ <h1>My export plans</h1>
             <label id="hide-show-button"
                    for="details-reveal"
                    class="button button--small secondary-button button--icon">
-                <i class="fas fa-chevron-right" /></i>
+                <span role="img" class="fas fa-chevron-right govuk-!-margin-right-2" /></span>
                 <span>How it works</span>
             </label>
         </div>
@@ -56,7 +56,7 @@ <h2 class="h-m">Why do you need one?</h2>
                             <h2 class="h-s p-t-0">Take your first steps towards exporting success</h2>
                             <p>Put an export plan in place for your business</p>
                         <a href="{% url 'exportplan:start' %}"
-                           class="button primary-button buttton-icon"><i class="fas fa-plus m-r-xs"></i>
+                           class="button primary-button buttton-icon"><span role="img" class="fas fa-plus m-r-xs"></span>
                         {% if request.user.is_authenticated %}
                             Create a  new plan
                         {% else %}
@@ -67,7 +67,7 @@ <h2 class="h-s p-t-0">Take your first steps towards exporting success</h2>
                 <div class="g-card action-wrapper min-height-0">
                     <a href="{% static 'pdfs/sample_export_plan_document.pdf' %}"
                        class="link">
-                        <i class="fa fa-file-pdf m-r-xs"></i>Download what a good export plan looks like
+                        <span role="img" class="fa fa-file-pdf m-r-xs"></span>Download what a good export plan looks like
                     </a>
                 </div>
             </div>

diff --git a/exportplan/templates/exportplan/section.html b/exportplan/templates/exportplan/section.html
@@ -47,15 +47,15 @@ <h1>{{ view.title }}</h1>
                                    title="{{ next_section.title }}">
                                     <span class="inline-block h-l link--underline text-white p-0 m-b-xs">{{ next_section.title }}</span>
                                     <br />
-                                    <i class="fas fa-arrow-circle-right text-white"></i>
+                                    <span role="img" class="great-icon fas fa-arrow-circle-right text-white"></span>
                                 </a>
                             {% endif %}
                             {% block back_button %}
                                 <div class="m-t-l">
                                     <a class="text-white link body-m-b"
                                        href="{{ export_plan_landing_page_url }}"
                                        title="Export Plan home">
-                                        <i class="fas fa-arrow-circle-left"></i><span class="inline-block m-f-xs">Export Plan home</span>
+                                        <span role="img" class="great-icon fas fa-arrow-circle-left"></span><span class="inline-block m-f-xs">Export Plan home</span>
                                     </a>
                                 </div>
                             {% endblock %}

diff --git a/exportplan/templates/exportplan/sections/travel-plan.html b/exportplan/templates/exportplan/sections/travel-plan.html
@@ -10,7 +10,7 @@
 {% endblock %}
 {% block main_content %}
     <div class="g-panel m-b-s">
-        <i class="fas fa-info-circle fa-lg"></i>
+        <span role="img" class="fas fa-info-circle fa-lg"></span>
         <h3 class="h-s p-t-xs">COVID-19 travel guidance</h3>
         <p>
             <a href={{ travel_advice_covid19 }} target="_blank" rel="noopener noreferrer">View the latest guidance</a> for British people travelling overseas during the coronavirus (COVID-19) pandemic

diff --git a/learn/templates/learn/choose_do_not_choose.html b/learn/templates/learn/choose_do_not_choose.html
@@ -1,8 +1,8 @@
-{% load  wagtailcore_tags %}
+{% load wagtailcore_tags %}
 {% load add_govuk_classes from content_tags %}
 <div class="choose-dont-choose">
     <div class="media-block media-block--round-image govuk-!-margin-bottom-7">
-        <i class="fas fa-check"></i>
+        <span role="img" class="fas fa-check"></span>
         <div class="g-panel g-panel--horizontal-mobile">
             <h3 class="govuk-heading-m">{{ value.choose_title }}</h3>
             {% filter add_govuk_classes %}
@@ -11,12 +11,12 @@ <h3 class="govuk-heading-m">{{ value.choose_title }}</h3>
         </div>
     </div>
     <div class="media-block media-block--round-image govuk-!-margin-bottom-7">
-        <i class="fas fa-ban"></i>
+        <span role="img" class="fas fa-ban"></span>
         <div class="g-panel g-panel--horizontal-mobile">
             <h3 class="govuk-heading-m">{{ value.do_not_choose_title }}</h3>
             {% filter add_govuk_classes %}
                 <div>{{ value.do_not_choose_body|richtext }}</div>
-            {% endfilter %}    
+            {% endfilter %}
         </div>
     </div>
 </div>
diff --git a/learn/templates/learn/return_link.html b/learn/templates/learn/return_link.html
@@ -4,7 +4,7 @@
             <h4 class="body-l-b m-b-xxs">Update your export plan</h4>
             <a href="{{ link }}" class="link link--large link--icon-right p-0">
                 <span>{{ title }}</span>
-                <i class="fas fa-arrow-right"></i>
+                <span role="img" class="fas fa-arrow-right"></span>
             </a>
         </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -592,7 +592,7 @@ $desktop: 1024px; @@
             }
           }
-          i {
+          span[role='img'] {
             margin-bottom: 0;
             @include tablet {
@@ Expand Down @@