From dcb26096f5bcbf9c096a082c7cec3ee46e18a287 Mon Sep 17 00:00:00 2001
From: "Michael Pritchard (HEIW)"
 <71503011+Michael-HEIW@users.noreply.github.com>
Date: Mon, 4 Oct 2021 10:20:58 +0100
Subject: [PATCH] Add accessibility fixes

- Make the font colour in the footer darker
- change the hamburger span in the header to a button
- update the javascript to select the button
- update the meta viewport to the latest recommended method
- Undo unrelated changes
---
 css/layout.css                   | 13 ++++++++-----
 javascript/script.js             |  4 ++--
 templates/Includes/Header.ss     |  2 +-
 templates/Includes/Navigation.ss |  2 +-
 templates/Page.ss                |  2 +-
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/css/layout.css b/css/layout.css
index 5cb2701..b53daaf 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -424,14 +424,14 @@ body h1 span.amp {
 
 /* FOOTER */
 .footer {
-    color: #999;
+    color: #6B6B6B;
     background: #ededed;
     padding: 20px 0;
     font-size: 11px;
     line-height: 22px;
 }
 	.footer a {
-	    color: #999;
+	    color: #6B6B6B;
 	}
 	.footer a:hover {
 	    color: #B90000;
@@ -521,7 +521,7 @@ body h1 span.amp {
 		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
 		    width:100%;
 		}
-		.searchResults #PageNumbers .pagination span{
+		.searchResults #PageNumbers .pagination button{
 			display:table-cell; /* each element in the pagination div displays as a table cell */
 		}
 		.searchResults #PageNumbers p {
@@ -593,7 +593,7 @@ body h1 span.amp {
 		    padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
 		}
 	.tablet-nav .header {
-	    padding: 0px;
+	    padding: 0;
 	}
 		.tablet-nav .header .inner {
 		    padding: 20px 0 0 0;
@@ -611,6 +611,9 @@ body h1 span.amp {
 		    font-family: 'WebSymbolsRegular';
 		    font-size: 20px;
 		    color: #ededed;
+            background: #000;
+            margin-top: 0;
+            padding: 0;
 		}
 		.tablet-nav .header .primary ul {
 		    z-index: 10;
@@ -637,7 +640,7 @@ body h1 span.amp {
 			    position: absolute;
 			    right: 20px;
 			    top: 0px;
-			    font-family: 'WebSymbolsRegular';
+                font-family: 'WebSymbolsRegular';
 			    font-size: 14px;
 			    color: #999;
 			    text-align: center;
diff --git a/javascript/script.js b/javascript/script.js
index cffdc90..d4d3e95 100644
--- a/javascript/script.js
+++ b/javascript/script.js
@@ -19,9 +19,9 @@ jQuery.noConflict();
 		});
 
 		if (!$.browser.msie || ($.browser.msie && (parseInt($.browser.version, 10) > 8))) {
-			var searchBarButton = $("span.search-dropdown-icon");
+			var searchBarButton = $("button.search-dropdown-icon");
 			var searchBar = $('div.search-bar');
-			var menuButton = $("span.nav-open-button");
+			var menuButton = $("button.nav-open-button");
 			var menu = $('.header .primary ul');
 			var mobile = false;
 			var changed = false;
diff --git a/templates/Includes/Header.ss b/templates/Includes/Header.ss
index 476843b..1a3aa15 100644
--- a/templates/Includes/Header.ss
+++ b/templates/Includes/Header.ss
@@ -8,7 +8,7 @@
 				<% end_if %>
 			</a>
 			<% if $SearchForm %>
-				<span class="search-dropdown-icon">L</span>
+				<button class="search-dropdown-icon">L</button>
 				<div class="search-bar">
 					$SearchForm
 				</div>
diff --git a/templates/Includes/Navigation.ss b/templates/Includes/Navigation.ss
index 2383fa2..9824317 100644
--- a/templates/Includes/Navigation.ss
+++ b/templates/Includes/Navigation.ss
@@ -1,5 +1,5 @@
 <nav class="primary">
-	<span class="nav-open-button">²</span>
+	<button class="nav-open-button">²</button>
 	<ul>
 		<% loop $Menu(1) %>
 			<li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
diff --git a/templates/Page.ss b/templates/Page.ss
index 5de09ff..294d9c6 100644
--- a/templates/Page.ss
+++ b/templates/Page.ss
@@ -16,7 +16,7 @@ Change it, enhance it and most importantly enjoy it!
 	<% base_tag %>
 	<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
 	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	$MetaTags(false)
 	<!--[if lt IE 9]>