♿️(templates) improve template rendering

Add titles to all `svg` files with roles as `img`. Remove duplicated information from blocks to avoid SR repetition. Co-authored-by: Sandro Costa <[email protected]> Co-authored-by: Emmanuel Pelletier <[email protected]>
openfun · Mar 23, 2022 · fcff6bc · fcff6bc
1 parent dcb250a
commit fcff6bc
Show file tree

Hide file tree

Showing 16 changed files with 46 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Changed
 
+- Improve overall accessibility in Richie templates
 - Update frontend overriding system to allow to override any frontend module.
 - Improve React search suggestion field labels for screen readers.
 - Removed usage of deprecated Sass division '/' operator in favor of

diff --git a/src/frontend/js/components/CourseGlimpse/index.tsx b/src/frontend/js/components/CourseGlimpse/index.tsx
@@ -52,9 +52,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
         </div>
       ) : null}
       <div className="course-glimpse__wrapper">
-        <h3 className="course-glimpse__title" title={course.title}>
-          {course.title}
-        </h3>
+        <h3 className="course-glimpse__title">{course.title}</h3>
         {course.organization_highlighted_cover_image ? (
           <div className="course-glimpse__organization-logo">
             {/* alt forced to empty string because it's a decorative image */}
@@ -68,9 +66,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
         ) : null}
         <div className="course-glimpse__metadata course-glimpse__metadata--organization">
           <Icon name="icon-org" />
-          <span className="title" title={course.organization_highlighted}>
-            {course.organization_highlighted}
-          </span>
+          <span className="title">{course.organization_highlighted}</span>
         </div>
         <div className="course-glimpse__metadata course-glimpse__metadata--code">
           <Icon name="icon-barcode" />

diff --git a/src/richie/apps/core/templates/richie/base.html b/src/richie/apps/core/templates/richie/base.html
@@ -152,7 +152,7 @@
                         <div class="body-footer__brand">
                             {% block body_footer_brand %}
                                 <a href="/">
-                                    <img src="{% static "richie/images/logo-alt.png" %}" alt="">
+                                    <img src="{% static "richie/images/logo-alt.png" %}" alt="{{ SITE.name }}">
                                 </a>
                             {% endblock body_footer_brand %}
                         </div>

diff --git a/src/richie/apps/core/templates/social-networks/blogpost-badges.html b/src/richie/apps/core/templates/social-networks/blogpost-badges.html
@@ -7,39 +7,39 @@
             href="https://www.facebook.com/share.php?u={{ full_page_url }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share on Facebook" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share on Facebook" %}">
+                <title>{% trans "Share on Facebook" %}</title>
                 <use href="#icon-facebook" />
             </svg>
         </a>
         <a
             href="https://twitter.com/intent/tweet?text={{ shared_sentence|urlencode }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share on Twitter" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share on Twitter" %}">
+                <title>{% trans "Share on Twitter" %}</title>
                 <use href="#icon-twitter" />
             </svg>
         </a>
         <a
             href="https://www.linkedin.com/sharing/share-offsite/?url={{ full_page_url }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share on Linkedin" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share on Linkedin" %}">
+                <title>{% trans "Share on Linkedin" %}</title>
                 <use href="#icon-linkedin" />
             </svg>
         </a>
         <a
             href="mailto:?subject={{ mailto_subject|urlencode }}&amp;body={{ full_page_url|urlencode }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share by Email" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share by Email" %}">
+                <title>{% trans "Share by Email" %}</title>
                 <use href="#icon-envelope" />
             </svg>
         </a>

diff --git a/src/richie/apps/core/templates/social-networks/course-badges.html b/src/richie/apps/core/templates/social-networks/course-badges.html
@@ -7,39 +7,39 @@
             href="https://www.facebook.com/share.php?u={{ full_page_url }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share on Facebook" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share on Facebook" %}">
+                <title>{% trans "Share on Facebook" %}</title>
                 <use href="#icon-facebook" />
             </svg>
         </a>
         <a
             href="https://twitter.com/intent/tweet?text={{ shared_sentence|urlencode }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share on Twitter" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share on Twitter" %}">
+                <title>{% trans "Share on Twitter" %}</title>
                 <use href="#icon-twitter" />
             </svg>
         </a>
         <a
             href="https://www.linkedin.com/sharing/share-offsite/?url={{ full_page_url }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share on Linkedin" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share on Linkedin" %}">
+                <title>{% trans "Share on Linkedin" %}</title>
                 <use href="#icon-linkedin" />
             </svg>
         </a>
         <a
             href="mailto:?subject={{ shared_subject|urlencode }}&amp;body={{ shared_sentence|urlencode }}"
             class="social-network-badges__item"
             target="_blank" rel="noopener noreferrer"
-            title="{% trans "Share by Email" %}"
         >
-            <svg role="img">
+            <svg role="img" aria-label="{% trans "Share by Email" %}">
+                <title>{% trans "Share by Email" %}</title>
                 <use href="#icon-envelope" />
             </svg>
         </a>

diff --git a/src/richie/apps/core/templates/social-networks/footer-badges.html b/src/richie/apps/core/templates/social-networks/footer-badges.html
@@ -4,7 +4,7 @@
         class="body-footer__badge"
         target="_blank" rel="noopener noreferrer"
     >
-        <svg role="img">
+        <svg role="img" aria-label="{% trans "Facebook" %}">
             <title>{% trans "Facebook" %}</title>
             <use href="#icon-facebook" />
         </svg>
@@ -13,21 +13,19 @@
         href="https://twitter.com/@funmooc"
         class="body-footer__badge"
         target="_blank" rel="noopener noreferrer"
-        title="{% trans "Twitter page" %}"
     >
-        <svg role="img">
-            <title>{% trans "Twitter" %}</title>
+        <svg role="img" aria-label="{% trans "Twitter page" %}">
+            <title>{% trans "Twitter page" %}</title>
             <use href="#icon-twitter" />
         </svg>
     </a>
     <a
         href="https://www.linkedin.com/school/franceuniversitenumerique/"
         class="body-footer__badge"
         target="_blank" rel="noopener noreferrer"
-        title="{% trans "Linkedin" %}"
     >
-        <svg role="img">
-            <title>{% trans "Linkedin" %}</title>
+        <svg role="img" aria-label="{% trans "Linkedin page" %}">
+            <title>{% trans "Linkedin page" %}</title>
             <use href="#icon-linkedin" />
         </svg>
     </a>

diff --git a/src/richie/apps/courses/templates/courses/cms/fragment_category_glimpse.html b/src/richie/apps/courses/templates/courses/cms/fragment_category_glimpse.html
@@ -43,7 +43,7 @@
                                 {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x600 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                             "
                             sizes="200px"
-                            alt="{{ category_page.get_title }}">
+                            alt="">
                     {% endblockplugin %}
                 </div>
                 <h{{ header_level|default:2 }} class="category-glimpse__title">

diff --git a/src/richie/apps/courses/templates/courses/cms/fragment_course_glimpse.html b/src/richie/apps/courses/templates/courses/cms/fragment_course_glimpse.html
@@ -30,7 +30,7 @@
         </div>
         {% endif %}
         <div class="course-{{ course_variant }}__wrapper">
-            <h{{ header_level|default:3 }} class="course-{{ course_variant }}__title" title="{{ course_page.get_title }}">{{ course_page.get_title }}</h{{ header_level|default:3 }}>
+            <h{{ header_level|default:3 }} class="course-{{ course_variant }}__title">{{ course_page.get_title }}</h{{ header_level|default:3 }}>
             {% if main_organization %}
                 {% with organization_page=main_organization.extended_object %}
                     {% get_placeholder_plugins "logo" organization_page as plugins or %}
@@ -56,7 +56,7 @@
                 <svg role="img" aria-hidden="true" class="icon">
                     <use href="#icon-org" />
                 </svg>
-                <span class="title" title="{{ main_organization_title }}">{{ main_organization_title }}</span>
+                <span class="title">{{ main_organization_title }}</span>
             </div>
             {% endif %}
             <div class="course-{{ course_variant }}__metadata course-{{ course_variant }}__metadata--code">

diff --git a/src/richie/apps/courses/templates/courses/cms/fragment_error_detail_template_banner.html b/src/richie/apps/courses/templates/courses/cms/fragment_error_detail_template_banner.html
@@ -2,7 +2,7 @@
 
 {% spaceless %}
 <div class="banner banner--error banner--rounded" role="alert">
-    <svg class="banner__icon"><use href="#icon-cross" /></svg>
+    <svg class="banner__icon" aria-hidden="true"><use href="#icon-cross" /></svg>
     <p class="banner__message">
         {% blocktrans %}
         A {{model}} object is missing on this {{model}} page. Please select another page template.

diff --git a/src/richie/plugins/glimpse/templates/richie/glimpse/glimpse_quote.html b/src/richie/plugins/glimpse/templates/richie/glimpse/glimpse_quote.html
@@ -28,7 +28,7 @@
 
 {% if instance.content %}
 <div class="glimpse-{{ glimpse_variant }}__content">
-    <svg class="icon" role="img">
+    <svg class="icon" aria-hidden="true">
         <use href="#icon-quote" />
     </svg>
     {{ instance.content|linebreaks }}

diff --git a/tests/apps/courses/test_cms_plugins_course.py b/tests/apps/courses/test_cms_plugins_course.py
@@ -119,7 +119,7 @@ def test_cms_plugins_course_render_on_public_page(self):
         course_title = course_page.get_title()
         self.assertContains(
             response,
-            f'<h2 class="course-glimpse__title" title="{course_title:s}">{course_title:s}</h2>',
+            f'<h2 class="course-glimpse__title">{course_title:s}</h2>',
             status_code=200,
         )
         # The course's main organization should be present
@@ -178,7 +178,7 @@ def test_cms_plugins_course_render_on_public_page(self):
         course_title = course_page.get_title()
         self.assertContains(
             response,
-            f'<h2 class="course-glimpse__title" title="{course_title:s}">{course_title:s}</h2>',
+            f'<h2 class="course-glimpse__title">{course_title:s}</h2>',
             status_code=200,
         )
 
@@ -340,7 +340,7 @@ def test_cms_plugins_course_fallback_when_never_published(self):
 
         # The course's name should be present
         self.assertIn(
-            '<h2 class="course-glimpse__title" title="cours public">cours public</h2>',
+            '<h2 class="course-glimpse__title">cours public</h2>',
             re.sub(" +", " ", str(response.content).replace("\\n", "")),
         )
         self.assertNotContains(response, "public course")
@@ -433,7 +433,7 @@ def test_cms_plugins_course_glimpse_organization_acronym(self):
                 'course-glimpse__metadata--organization">'
                 '<svg role="img" aria-hidden="true" class="icon">'
                 '<use href="#icon-org"></use></svg>'
-                '<span class="title" title="{0:s}">{0:s}</span>'
+                '<span class="title">{0:s}</span>'
             ).format(menu_title),
             html=True,
         )

diff --git a/tests/apps/courses/test_templates_category_detail.py b/tests/apps/courses/test_templates_category_detail.py
@@ -197,7 +197,7 @@ def test_templates_category_detail_cms_published_content_courses(self):
         self._extension_cms_published_content(
             CourseFactory,
             "course_categories",
-            '<h2 class="course-glimpse__title" title="{0:s}">{0:s}</h2>',
+            '<h2 class="course-glimpse__title">{0:s}</h2>',
         )
 
     @mock.patch(
@@ -407,7 +407,7 @@ def test_templates_category_detail_cms_draft_content_organizations(self):
     def test_templates_category_detail_cms_draft_content_courses(self):
         """Validate how a draft category page is displayed with its related courses."""
         self._extension_cms_draft_content(
-            CourseFactory, '<h2 class="course-glimpse__title" title="{0:s}">{0:s}</h2>'
+            CourseFactory, '<h2 class="course-glimpse__title">{0:s}</h2>'
         )
 
     def test_templates_category_detail_cms_draft_content_blogposts(self):
@@ -443,7 +443,7 @@ def test_template_category_detail_without_category(self):
             response,
             (
                 '<div class="banner banner--error banner--rounded" role="alert">'
-                '<svg class="banner__icon"><use href="#icon-cross" /></svg>'
+                '<svg class="banner__icon" aria-hidden="true"><use href="#icon-cross" /></svg>'
                 '<p class="banner__message">'
                 "A category object is missing on this category page. "
                 "Please select another page template."

diff --git a/tests/apps/courses/test_templates_course_detail_rendering.py b/tests/apps/courses/test_templates_course_detail_rendering.py
@@ -1051,7 +1051,7 @@ def test_template_course_detail_without_course(self):
             response,
             (
                 '<div class="banner banner--error banner--rounded" role="alert">'
-                '<svg class="banner__icon"><use href="#icon-cross" /></svg>'
+                '<svg class="banner__icon" aria-hidden="true"><use href="#icon-cross" /></svg>'
                 '<p class="banner__message">'
                 "A course object is missing on this course page. "
                 "Please select another page template."

diff --git a/tests/apps/courses/test_templates_organization_detail.py b/tests/apps/courses/test_templates_organization_detail.py
@@ -260,7 +260,7 @@ def test_templates_organization_detail_cms_published_content(self):
         self.assertContains(
             response,
             # pylint: disable=consider-using-f-string
-            '<h2 class="course-glimpse__title" title="{0:s}">{0:s}</h2>'.format(
+            '<h2 class="course-glimpse__title">{0:s}</h2>'.format(
                 published_course.public_extension.extended_object.get_title(),
             ),
             html=True,
@@ -406,7 +406,7 @@ def test_templates_organization_detail_cms_draft_content(self):
         # The published course should be on the page in its draft version
         self.assertContains(
             response,
-            '<h2 class="course-glimpse__title" title="modified course">modified course</h2>',
+            '<h2 class="course-glimpse__title">modified course</h2>',
             html=True,
         )
 
@@ -462,7 +462,7 @@ def test_template_organization_detail_without_organization(self):
             response,
             (
                 '<div class="banner banner--error banner--rounded" role="alert">'
-                '<svg class="banner__icon"><use href="#icon-cross" /></svg>'
+                '<svg class="banner__icon" aria-hidden="true"><use href="#icon-cross" /></svg>'
                 '<p class="banner__message">'
                 "A organization object is missing on this organization page. "
                 "Please select another page template."

diff --git a/tests/apps/courses/test_templates_person_detail.py b/tests/apps/courses/test_templates_person_detail.py
@@ -427,7 +427,7 @@ def test_templates_person_detail_related_courses(self):
         # The course should be present on the page
         self.assertContains(
             response,
-            '<h2 class="course-glimpse__title" title="{0:s}">{0:s}</h2>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
+            '<h2 class="course-glimpse__title">{0:s}</h2>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
                 course.extended_object.get_title()
             ),
             html=True,
@@ -514,7 +514,7 @@ def test_template_person_detail_without_person(self):
             response,
             (
                 '<div class="banner banner--error banner--rounded" role="alert">'
-                '<svg class="banner__icon"><use href="#icon-cross" /></svg>'
+                '<svg class="banner__icon" aria-hidden="true"><use href="#icon-cross" /></svg>'
                 '<p class="banner__message">'
                 "A person object is missing on this person page. "
                 "Please select another page template."

diff --git a/tests/apps/courses/test_templates_program_detail.py b/tests/apps/courses/test_templates_program_detail.py
@@ -135,7 +135,7 @@ def test_templates_program_detail_cms_published_content(self):
         for course in courses[:2]:
             self.assertContains(
                 response,
-                '<h3 class="course-glimpse__title" title="{0:s}">{0:s}</h3>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
+                '<h3 class="course-glimpse__title">{0:s}</h3>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
                     course.extended_object.get_title()
                 ),
                 html=True,
@@ -189,7 +189,7 @@ def test_templates_program_detail_cms_draft_content(self):
             )
             self.assertContains(
                 response,
-                '<h3 class="course-glimpse__title" title="{0:s}">{0:s}</h3>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
+                '<h3 class="course-glimpse__title">{0:s}</h3>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
                     course.extended_object.get_title()
                 ),
                 html=True,
@@ -202,7 +202,7 @@ def test_templates_program_detail_cms_draft_content(self):
 
         self.assertContains(
             response,
-            '<h3 class="course-glimpse__title" title="{0:s}">{0:s}</h3>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
+            '<h3 class="course-glimpse__title">{0:s}</h3>'.format(  # noqa pylint: disable=consider-using-f-string,line-too-long
                 courses[2].extended_object.get_title()
             ),
             html=True,