From 4e7ccdcdc9ca00d69438b1f446bd8c1fb2fc12af Mon Sep 17 00:00:00 2001
From: Sander Tuit <sandertuit@gmail.com>
Date: Sun, 8 Apr 2018 22:41:24 +0200
Subject: [PATCH] Add icon template tag with accessibility options (PoC)
 (#4381)

---
 CHANGELOG.txt                                   |  1 +
 CONTRIBUTORS.rst                                |  1 +
 docs/releases/2.1.rst                           |  1 +
 .../templates/wagtailadmin/shared/icon.html     |  2 ++
 .../wagtailadmin/shared/wagtail_icon.html       |  9 +++++++++
 wagtail/admin/templatetags/wagtailui_tags.py    | 17 +++++++++++++++++
 6 files changed, 31 insertions(+)
 create mode 100644 wagtail/admin/templates/wagtailadmin/shared/icon.html
 create mode 100644 wagtail/admin/templates/wagtailadmin/shared/wagtail_icon.html
 create mode 100644 wagtail/admin/templatetags/wagtailui_tags.py

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 6a3bc0765..f922cb37b 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/CONTRIBUTORS.rst b/CONTRIBUTORS.rst
index fce91f96d..ab979a551 100644
--- a/CONTRIBUTORS.rst
+++ b/CONTRIBUTORS.rst
@@ -291,6 +291,7 @@ Contributors
 * Alejandro Garza
 * Rajeev J Sebastian
 * Coen van der Kamp
+* Sander Tuit
 
 Translators
 ===========
diff --git a/docs/releases/2.1.rst b/docs/releases/2.1.rst
index 67d4f777c..7a15cab38 100644
--- a/docs/releases/2.1.rst
+++ b/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
 ~~~~~~~~~
diff --git a/wagtail/admin/templates/wagtailadmin/shared/icon.html b/wagtail/admin/templates/wagtailadmin/shared/icon.html
new file mode 100644
index 000000000..c93ce25b9
--- /dev/null
+++ b/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 %}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/wagtail_icon.html b/wagtail/admin/templates/wagtailadmin/shared/wagtail_icon.html
new file mode 100644
index 000000000..7e63174e6
--- /dev/null
+++ b/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 %}
diff --git a/wagtail/admin/templatetags/wagtailui_tags.py b/wagtail/admin/templatetags/wagtailui_tags.py
new file mode 100644
index 000000000..9e80e62f3
--- /dev/null
+++ b/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,
+    }