From 527768d3ee4b7229314afbce7548adb0a16787ab Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Mon, 7 Jun 2021 11:56:29 +0200
Subject: [PATCH] Add aria tags

---
 static/kx-claim.js        |  7 +++++++
 views/index.pug           |  2 +-
 views/partials/header.pug | 14 +++++++-------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/static/kx-claim.js b/static/kx-claim.js
index 1a547e7..e721952 100644
--- a/static/kx-claim.js
+++ b/static/kx-claim.js
@@ -63,6 +63,7 @@ class Claim extends HTMLElement {
             const subsection_alert_icon = subsection_alert.appendChild(document.createElement('img'));
             subsection_alert_icon.setAttribute('src', '/static/img/alert-decagram.png');
             subsection_alert_icon.setAttribute('alt', '');
+            subsection_alert_icon.setAttribute('aria-hidden', 'true');
             const subsection_alert_text = subsection_alert.appendChild(document.createElement('div'));
 
             const message = subsection_alert_text.appendChild(document.createElement('p'));
@@ -76,6 +77,7 @@ class Claim extends HTMLElement {
         const subsection_links_icon = subsection_links.appendChild(document.createElement('img'));
         subsection_links_icon.setAttribute('src', '/static/img/link.png');
         subsection_links_icon.setAttribute('alt', '');
+        subsection_links_icon.setAttribute('aria-hidden', 'true');
         const subsection_links_text = subsection_links.appendChild(document.createElement('div'));
 
         const profile_link = subsection_links_text.appendChild(document.createElement('p'));
@@ -101,6 +103,7 @@ class Claim extends HTMLElement {
             const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
             subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png');
             subsection_qr_icon.setAttribute('alt', '');
+            subsection_qr_icon.setAttribute('aria-hidden', 'true');
             const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
 
             const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
@@ -116,6 +119,7 @@ class Claim extends HTMLElement {
         const subsection_status_icon = subsection_status.appendChild(document.createElement('img'));
         subsection_status_icon.setAttribute('src', '/static/img/decagram.png');
         subsection_status_icon.setAttribute('alt', '');
+        subsection_status_icon.setAttribute('aria-hidden', 'true');
         const subsection_status_text = subsection_status.appendChild(document.createElement('div'));
 
         const verification = subsection_status_text.appendChild(document.createElement('p'));
@@ -123,6 +127,7 @@ class Claim extends HTMLElement {
             verification.innerHTML = `Claim verification has completed.`;
             subsection_status_icon.setAttribute('src', '/static/img/check-decagram.png');
             subsection_status_icon.setAttribute('alt', '');
+            subsection_status_icon.setAttribute('aria-hidden', 'true');
         } else {
             verification.innerHTML = `Claim verification is in progress&hellip;`;
             return;
@@ -136,6 +141,7 @@ class Claim extends HTMLElement {
         const subsection_result_icon = subsection_result.appendChild(document.createElement('img'));
         subsection_result_icon.setAttribute('src', '/static/img/shield-search.png');
         subsection_result_icon.setAttribute('alt', '');
+        subsection_result_icon.setAttribute('aria-hidden', 'true');
         const subsection_result_text = subsection_result.appendChild(document.createElement('div'));
 
         const result = subsection_result_text.appendChild(document.createElement('p'));
@@ -150,6 +156,7 @@ class Claim extends HTMLElement {
             const subsection_info_icon = subsection_info.appendChild(document.createElement('img'));
             subsection_info_icon.setAttribute('src', '/static/img/information.png');
             subsection_info_icon.setAttribute('alt', '');
+            subsection_info_icon.setAttribute('aria-hidden', 'true');
             const subsection_info_text = subsection_info.appendChild(document.createElement('div'));
 
             const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p'));
diff --git a/views/index.pug b/views/index.pug
index 1bf9c2c..5082a72 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -15,7 +15,7 @@ block content
             p.subtitle= demoData.matches[0].serviceprovider.name
             p.title= demoData.matches[0].profile.display
           .icons
-            .verificationStatus(data-value='running')
+            .verificationStatus(data-value='running' aria-hidden='true')
               .inProgress
         .content
           .subsection
diff --git a/views/partials/header.pug b/views/partials/header.pug
index 0d8c23f..7b14b07 100644
--- a/views/partials/header.pug
+++ b/views/partials/header.pug
@@ -1,12 +1,12 @@
 header
   nav
     .spacer
-    a.text(href='/') Home
-    a.text(href='/getting-started') Getting started
-  a.logo(href='/')
-    img(src='/static/img/logo_circle.png' alt='Keyoxide')
+    a.text(href='/' aria-label='Go to homepage') Home
+    a.text(href='/getting-started' aria-label='Go to getting started guide') Getting started
+  a.logo(href='/' aria-label='Go to homepage')
+    img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true')
   nav
-    a.text(href='/about') About
-    a.text(href='/guides') Guides
-    a.text(href='/faq') FAQ
+    a.text(href='/about' aria-label='Go to about page') About
+    a.text(href='/guides' aria-label='Go to list of guides') Guides
+    a.text(href='/faq' aria-label='Go to frequently asked questions') FAQ
     .spacer