From 1efea31f3fdbc39c964d4d8885d7d246f821c9cc Mon Sep 17 00:00:00 2001
From: vickytnz <vicky.teinaki@gmail.com>
Date: Wed, 4 Sep 2024 12:20:59 +0100
Subject: [PATCH] wcag example

---
 app/_layouts/example.njk         | 18 ++++++++++++++++++
 app/examples/link-focus/index.md |  3 +++
 2 files changed, 21 insertions(+)

diff --git a/app/_layouts/example.njk b/app/_layouts/example.njk
index d2428ba..4b7c70f 100644
--- a/app/_layouts/example.njk
+++ b/app/_layouts/example.njk
@@ -46,6 +46,24 @@
       {{ description | markdown("inline") | noOrphans }}
     </p>
   {% endif %}
+{% if wcag %}
+
+
+
+  <div class="govuk-inset-text">
+
+    <p class="govuk-body">This mistake can mean a failure of
+
+      {% for i in wcag %}
+    <a class="govuk-link" href="{{i.link}}">{{ i.text}}</a>
+
+{% endfor %}
+    </p>
+  </div>
+  {% endif %}
+
+
+
 
 {#
   {% if date or modified or authors or author or tags %}
diff --git a/app/examples/link-focus/index.md b/app/examples/link-focus/index.md
index 99f439e..4bfa4f3 100644
--- a/app/examples/link-focus/index.md
+++ b/app/examples/link-focus/index.md
@@ -3,6 +3,9 @@ layout: example
 title: Do not forget link focus states
 description: Links must be distinct when focused and with sufficient colour contrast. This is a WCAG requirement.
 tags: "Code"
+wcag:
+- text: "WCAG 2.2 2.4.7: Focus Visible (Level AA)"
+  link: https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
 mistake:
 - link: link-focus/mistake
   description: This example is most likely to happen if the GOV.UK Frontend is being rebuilt in a codebase as an abstraction rather than using default templates.