Add icon template tag with accessibility options (PoC) (#4381)

CHANGELOG.txt

@@ -20,6 +20,7 @@ Changelog
  * Add request parameter to edit handlers (Rajeev J Sebastian)
  * ImageChooser now sets a default title based on filename (Coen van der Kamp)
  * Added error handling to the Draftail editor (Thibaud Colas)
+ * Add new `wagtail_icon` template tag to facilitate making admin icons accessible (Sander Tuit)
  * Fix: Status button on 'edit page' now links to the correct URL when live and draft slug differ (LB (Ben Johnston))
  * Fix: Image title text in the gallery and in the chooser now wraps for long filenames (LB (Ben Johnston), Luiz Boaretto)
  * Fix: Move image editor action buttons to the bottom of the form on mobile (Julian Gallo)

CONTRIBUTORS.rst

@@ -291,6 +291,7 @@ Contributors
 * Alejandro Garza
 * Rajeev J Sebastian
 * Coen van der Kamp
+* Sander Tuit
 
 Translators
 ===========

docs/releases/2.1.rst

@@ -34,6 +34,7 @@ Other features
  * Add request parameter to edit handlers (Rajeev J Sebastian)
  * ImageChooser now sets a default title based on filename (Coen van der Kamp)
  * Added error handling to the Draftail editor (Thibaud Colas)
+ * Add new `wagtail_icon` template tag to facilitate making admin icons accessible (Sander Tuit)
 
 Bug fixes
 ~~~~~~~~~

wagtail/admin/templates/wagtailadmin/shared/icon.html

@@ -0,0 +1,2 @@
+<span class="{{ classnames }}" {% if decorative %}aria-hidden="true"{% else %}title="{{ title }}"{% endif %}></span>
+{% if show_label %}{{ title }}{% elif not decorative %}<span class="sr-only">{{ title }}</span>{% endif %}

wagtail/admin/templates/wagtailadmin/shared/wagtail_icon.html

@@ -0,0 +1,9 @@
+{% spaceless %}
+{# Reference implementation: components/Icon.js #}
+<span>
+    <span class="icon icon-{{ name }} {{ className }}" aria-hidden="true"></span>
+    {% if title %}
+        <span class="visuallyhidden">{{ title }}</span>
+    {% endif %}
+</span>
+{% endspaceless %}

wagtail/admin/templatetags/wagtailui_tags.py

@@ -0,0 +1,17 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag("wagtailadmin/shared/wagtail_icon.html", takes_context=False)
+def wagtail_icon(name=None, classname='', title=None):
+    """
+    Usage: {% wagtail_icon name="cogs" classname="icon--red" title="Settings" %}
+
+    First load the tags with {% load wagtailui_tags %}
+    """
+    return {
+        'name': name,
+        'classname': classname,
+        'title': title,
+    }