Feat/add support for custom alt text (#291)

* feat(alt text): add support for alt text to classes

* feat(alt text): add support for alt text to jinja templates

* feat(alt text): update tests to cover all scenarios

* chore: formatting

* Up the version number

---------

Co-authored-by: Jumana Bahrainwala <jzbahrai@uwaterloo.ca>

Author: andrewleith

.github/actions/waffles/requirements.txt

@@ -1,4 +1,4 @@
 docopt==0.6.2
 Flask==2.3.3
 markupsafe==2.1.4
-git+https://github.com/cds-snc/notifier-utils.git@52.2.0#egg=notifications-utils
+git+https://github.com/cds-snc/notifier-utils.git@52.2.1#egg=notifications-utils

notifications_utils/jinja_templates/email/_custom_logo_no_background_colour.jinja2

@@ -9,7 +9,7 @@
         <tr>
           <td style="padding: 0 10px 0 {% if brand_colour %} 8px; border-left: solid 2px {{ brand_colour }}{% else %} 10px;{% endif %}">
             <img src="{{ brand_logo }}" style="display: block; border: 0" height="{% if brand_text -%} 27 {%- else -%} 108 {%- endif %}"
-                        alt="{% if brand_text %} {% else -%}{{ brand_name }}{%- endif %}" />
+                        alt="{% if alt_text_en %}{{ alt_text_en }} / {{ alt_text_fr }}{% else -%}{{ brand_name}}{%- endif %}" />
           </td>
           {% if brand_text %}
             <td width="100%" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 23px;" valign="center">

notifications_utils/jinja_templates/email/_custom_logo_with_background_colour.jinja2

@@ -17,7 +17,7 @@
                 border="0"
                 style="display: block; border: 0;"
                 height="{% if brand_text -%} 27 {%- else -%} 54 {%- endif %}"
-                alt="{% if brand_text %} {% else -%}{{ brand_name }}{%- endif %}"
+                alt="{% if alt_text_en %}{{ alt_text_en }} / {{ alt_text_fr }}{% else -%}{{ brand_name}}{%- endif %}"
               />
             </td>
           {% endif %}

notifications_utils/jinja_templates/email/email_preview_template.jinja2

@@ -64,7 +64,7 @@
         <img
           src="https://{{ asset_domain }}/{{ brand_logo }}"
           style="padding-left:0; display: block; border: 0; height:{% if brand_text -%} 27 {%- else -%} 108 {%- endif %}px"
-          alt="{% if brand_text %} {% else -%}{{ brand_name }}{%- endif %}"
+          alt="{% if alt_text_en %}{{ alt_text_en }} / {{ alt_text_fr }}{% else -%}{{ brand_name}}{%- endif %}"
         />
         </div>
 

notifications_utils/template.py

@@ -363,6 +363,8 @@ def __init__(
         brand_name=None,
         jinja_path=None,
         allow_html=False,
+        alt_text_en=None,
+        alt_text_fr=None,
     ):
         super().__init__(template, values, jinja_path=jinja_path)
         self.fip_banner_english = fip_banner_english
@@ -374,6 +376,8 @@ def __init__(
         self.logo_with_background_colour = logo_with_background_colour
         self.brand_name = brand_name
         self.allow_html = allow_html
+        self.alt_text_en = alt_text_en
+        self.alt_text_fr = alt_text_fr
         # set this again to make sure the correct either utils / downstream local jinja is used
         # however, don't set if we are in a test environment (to preserve the above mock)
         if "pytest" not in sys.modules:
@@ -413,6 +417,8 @@ def __str__(self):
                 "brand_colour": self.brand_colour,
                 "logo_with_background_colour": self.logo_with_background_colour,
                 "brand_name": self.brand_name,
+                "alt_text_en": self.alt_text_en,
+                "alt_text_fr": self.alt_text_fr,
             }
         )
 
@@ -456,6 +462,8 @@ def __init__(
         logo_with_background_colour=None,
         asset_domain=None,
         allow_html=False,
+        alt_text_en=None,
+        alt_text_fr=None,
     ):
         super().__init__(
             template,
@@ -476,6 +484,8 @@ def __init__(
         self.brand_name = brand_name
         self.asset_domain = asset_domain or "assets.notification.canada.ca"
         self.allow_html = allow_html
+        self.alt_text_en = alt_text_en
+        self.alt_text_fr = alt_text_fr
 
     def __str__(self):
         return Markup(
@@ -500,6 +510,8 @@ def __str__(self):
                     "brand_text": self.brand_text,
                     "brand_name": self.brand_name,
                     "asset_domain": self.asset_domain,
+                    "alt_text_en": self.alt_text_en,
+                    "alt_text_fr": self.alt_text_fr,
                 }
             )
         )

pyproject.toml

@@ -5,7 +5,7 @@ include = '(notifications_utils|tests)/.*\.pyi?$'
 
 [tool.poetry]
 name = "notifications-utils"
-version = "52.2.0"
+version = "52.2.1"
 description = "Shared python code for Notification - Provides logging utils etc."
 authors = ["Canadian Digital Service"]
 license = "MIT license"

tests/test_template_types.py

@@ -143,9 +143,11 @@ def test_alt_text_with_brand_text_and_fip_banner_english_shown(renderer):
             brand_text="Example",
             logo_with_background_colour=True,
             brand_name="Notify Logo",
+            alt_text_en="alt_text_en",
+            alt_text_fr="alt_text_fr",
         )
     )
-    assert 'alt=" "' in email
+    assert 'alt="alt_text_en / alt_text_fr"' in email
     assert 'alt="Notify Logo"' not in email
 
 
@@ -159,10 +161,12 @@ def test_alt_text_with_no_brand_text_and_fip_banner_english_shown(renderer):
             brand_text=None,
             logo_with_background_colour=True,
             brand_name="Notify Logo",
+            alt_text_en="alt_text_en",
+            alt_text_fr="alt_text_fr",
         )
     )
     assert 'alt="Symbol of the Government of Canada / Symbole du gouvernement du Canada"' in email
-    assert 'alt="Notify Logo"' in email
+    assert 'alt="alt_text_en / alt_text_fr"' in email
 
 
 @pytest.mark.parametrize("renderer", [HTMLEmailTemplate, EmailPreviewTemplate])
@@ -184,15 +188,17 @@ def test_alt_text_with_no_brand_text_and_fip_banner_french_shown(renderer):
 
 @pytest.mark.parametrize("renderer", [HTMLEmailTemplate, EmailPreviewTemplate])
 @pytest.mark.parametrize(
-    "logo_with_background_colour, brand_text, expected_alt_text",
+    "logo_with_background_colour, brand_text, alt_text_en, alt_text_fr, expected_alt_text",
     [
-        (True, None, 'alt="Notify Logo"'),
-        (True, "Example", 'alt=" "'),
-        (False, "Example", 'alt=" "'),
-        (False, None, 'alt="Notify Logo"'),
+        (True, None, None, None, 'alt="Notify Logo"'),
+        (True, "Example", "alt_text_en", "alt_text_fr", 'alt="alt_text_en / alt_text_fr"'),
+        (False, "Example", None, None, 'alt="Notify Logo"'),
+        (False, None, "alt_text_en", "alt_text_fr", 'alt="alt_text_en / alt_text_fr"'),
     ],
 )
-def test_alt_text_with_no_fip_banner(logo_with_background_colour, brand_text, expected_alt_text, renderer):
+def test_alt_text_with_no_fip_banner(
+    logo_with_background_colour, brand_text, alt_text_en, alt_text_fr, expected_alt_text, renderer
+):
     email = str(
         renderer(
             {"content": "hello world", "subject": ""},
@@ -201,6 +207,8 @@ def test_alt_text_with_no_fip_banner(logo_with_background_colour, brand_text, ex
             brand_text=brand_text,
             logo_with_background_colour=logo_with_background_colour,
             brand_name="Notify Logo",
+            alt_text_en=alt_text_en,
+            alt_text_fr=alt_text_fr,
         )
     )