From 8584ea5a08e4e848d2d0a5a8b384e73d7d92f000 Mon Sep 17 00:00:00 2001
From: jamesread <contact@jwread.com>
Date: Tue, 18 May 2021 00:28:35 +0100
Subject: [PATCH] Accessibility improvements

---
 .gitignore               |   1 +
 webui/index.html         |  12 +--
 webui/js/ActionButton.js |  14 ++--
 webui/js/marshaller.js   |   2 +-
 webui/main.js            |  31 +++----
 webui/package.json       |   6 +-
 webui/style.css          | 169 +++++++++++++++++++++------------------
 7 files changed, 122 insertions(+), 113 deletions(-)
diff --git a/.gitignore b/.gitignore
index 3ae3997..a1b64a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ webui/node_modules
 gen/
 go.sum
 OliveTin
+reports
diff --git a/webui/index.html b/webui/index.html
index 52cee7d..b9878f4 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -11,15 +11,17 @@
 	</head>
 
 	<body>
-		<main>
-			<div class = "group" id = "rootGroup" />
+		<main title = "main content">
+			<fieldset id = "rootGroup">
+				<legend>OliveTin Actions</legend>
+			</fieldset>
 		</main>
-		<footer>
-			<p><img src = "OliveTinLogo.png" height = "1em" class = "logo" /> <a href = "http://github.com/jamesread/OliveTin" target = "_new">OliveTin</a></p>
+		<footer title = "footer">
+			<p><img title = "application icon" src = "OliveTinLogo.png" height = "1em" class = "logo" /> <a href = "http://github.com/jamesread/OliveTin" target = "_new">OliveTin</a></p>
 		</footer>
 
 		<template id = "tplActionButton">
-			<p><span class = "icon">&#x1f4a9;</span></p>
+			<span role = "img" title = "button icon" class = "icon">&#x1f4a9;</span>
 			<p role = "title" class = "title">Untitled Button</p>
 		</template>
 
diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js
index 1995148..28ae48c 100644
--- a/webui/js/ActionButton.js
+++ b/webui/js/ActionButton.js
@@ -8,7 +8,7 @@ class ActionButton extends window.HTMLButtonElement {
     this.isWaiting = false
     this.actionCallUrl = window.restBaseUrl + 'StartAction?actionName=' + this.title
 
-    if (json.icon == "") {
+    if (json.icon === '') {
       this.unicodeIcon = '&#x1f4a9'
     } else {
       this.unicodeIcon = unescape(json.icon)
@@ -29,11 +29,11 @@ class ActionButton extends window.HTMLButtonElement {
     window.fetch(this.actionCallUrl).then(res => res.json()
     ).then((json) => {
       if (json.timedOut) {
-        this.onActionResult('actionTimeout', "Timed out")
-      } else if (json.exitCode != 0) {
-        this.onActionResult('actionNonZeroExit', "Exit code " + json.exitCode)
+        this.onActionResult('actionTimeout', 'Timed out')
+      } else if (json.exitCode !== 0) {
+        this.onActionResult('actionNonZeroExit', 'Exit code ' + json.exitCode)
       } else {
-        this.onActionResult('actionSuccess', "Success!")
+        this.onActionResult('actionSuccess', 'Success!')
       }
     }).catch(err => {
       this.onActionError(err)
@@ -76,10 +76,10 @@ class ActionButton extends window.HTMLButtonElement {
       this.isWaiting = false
       this.disabled = false
 
-      setTimeout(() => { 
+      setTimeout(() => {
         this.temporaryStatusMessage = null
         this.domTitle.classList.remove('temporaryStatusMessage')
-        this.updateHtml() 
+        this.updateHtml()
       }, 2000)
     } else if (this.isWaiting) {
       this.domTitle.innerText = 'Waiting...'
diff --git a/webui/js/marshaller.js b/webui/js/marshaller.js
index ff74535..5afeb5a 100644
--- a/webui/js/marshaller.js
+++ b/webui/js/marshaller.js
@@ -1,6 +1,6 @@
 import './ActionButton.js' // To define action-button
 
-export function marshalActionButtonsJsonToHtml(json) {
+export function marshalActionButtonsJsonToHtml (json) {
   for (const jsonButton of json.actions) {
     const a = document.createElement('button', { is: 'action-button' })
     a.constructFromJson(jsonButton)
diff --git a/webui/main.js b/webui/main.js
index 28dbaf8..f5bb803 100644
--- a/webui/main.js
+++ b/webui/main.js
@@ -2,34 +2,29 @@
 
 import { marshalActionButtonsJsonToHtml } from './js/marshaller.js'
 
-/**
- * Design choice; define this as a "global function" (on window) so that it can 
- * easily be used anywhere without needing to import it, as it's a pretty 
- * fundemental thing.
- */
-window.showBigError = (type, friendlyType, message) => {
-	console.error("Error " + type + ": ", err)
+function showBigError (type, friendlyType, message) {
+  console.error('Error ' + type + ': ', message)
 
-	var err = document.createElement("div")
-	err.classList.add("error")
-	err.innerHTML = "<h1>Error " + friendlyType + "</h1><p>" + message + "</p><p><a href = 'http://github.com/jamesread/OliveTin' target = 'blank'/>OliveTin Documentation</a></p>";
+  const domErr = document.createElement('div')
+  domErr.classList.add('error')
+  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://github.com/jamesread/OliveTin' target = 'blank'/>OliveTin Documentation</a></p>"
 
-  document.getElementById('rootGroup').appendChild(err)
+  document.getElementById('rootGroup').appendChild(domErr)
 }
 
-function onInitialLoad(res) {
-  window.restBaseUrl = res.Rest;
+function onInitialLoad (res) {
+  window.restBaseUrl = res.Rest
 
-  window.fetch(window.restBaseUrl + "GetButtons", {
-    cors: 'cors',
+  window.fetch(window.restBaseUrl + 'GetButtons', {
+    cors: 'cors'
     // No fetch options
   }).then(res => {
     return res.json()
   }).then(res => {
     marshalActionButtonsJsonToHtml(res)
   }).catch(err => {
-    showBigError("fetch-initial-buttons", "getting initial buttons", err, "blat")
-  });
+    showBigError('fetch-initial-buttons', 'getting initial buttons', err, 'blat')
+  })
 }
 
 window.fetch('webUiSettings.json').then(res => {
@@ -37,5 +32,5 @@ window.fetch('webUiSettings.json').then(res => {
 }).then(res => {
   onInitialLoad(res)
 }).catch(err => {
-  showBigError("fetch-webui-settings", "getting webui settings", err);
+  showBigError('fetch-webui-settings', 'getting webui settings', err)
 })
diff --git a/webui/package.json b/webui/package.json
index 8398a0c..0149dbf 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -3,11 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "main": "main.js",
-  "dependencies": {
-    "stylelint": "^13.13.0",
-    "stylelint-config-standard": "^22.0.0"
-  },
   "devDependencies": {
+    "stylelint": "^13.13.0",
+    "stylelint-config-standard": "^22.0.0",
     "eslint": "^7.25.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
diff --git a/webui/style.css b/webui/style.css
index b67e631..e8e8eb9 100644
--- a/webui/style.css
+++ b/webui/style.css
@@ -1,143 +1,156 @@
 body {
-	background-color: #dee3e7;
-	color: black;
-	text-align: center;
-	font-family: sans-serif;
-	padding: 0;
-	margin: 0;
+  background-color: #dee3e7;
+  color: black;
+  text-align: center;
+  font-family: sans-serif;
+  padding: 0;
+  margin: 0;
 }
 
-.group {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-	grid-template-rows: auto auto auto auto;
-	padding: 1em;
-	grid-gap: 1em;
-	text-align: center;
+fieldset {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-rows: auto auto auto auto;
+  padding: 1em;
+  grid-gap: 1em;
+  text-align: center;
+  border: 0;
+}
+
+legend {
+  padding-top: 1em;
+}
+
+span[role="icon"] {
+  display: block;
 }
 
 .error {
-	background-color: salmon;
-	padding: 1em;
+  background-color: salmon;
+  padding: 1em;
 }
 
 .title.temporaryStatusMessage {
-	color: gray;
+  color: gray;
 }
 
 div.entity {
-	background-color: white;
-	box-shadow: 0 0 10px 0 #444;
-	display: grid;
-	grid-column: auto / span 2;
-	grid-row: auto / span 2;
-	grid-template-rows: auto min-content;
-	grid-template-columns: minmax(min-content, auto);
+  background-color: white;
+  box-shadow: 0 0 10px 0 #444;
+  display: grid;
+  grid-column: auto / span 2;
+  grid-row: auto / span 2;
+  grid-template-rows: auto min-content;
+  grid-template-columns: minmax(min-content, auto);
 }
 
 div.entity h2 {
-	grid-column: 1 / span all;
+  grid-column: 1 / span all;
 }
 
 button {
-	padding: 1em;
-	color: black;
-	display: table-cell;
-	text-align: center;
-	border: 1px solid #999;
-	background-color: white;
-	box-shadow: 0 0 6px 0 #aaa;
-	user-select: none;
+  padding: 1em;
+  color: black;
+  display: table-cell;
+  text-align: center;
+  border: 1px solid #999;
+  background-color: white;
+  box-shadow: 0 0 6px 0 #aaa;
+  user-select: none;
 }
 
 button:hover {
-	box-shadow: 0 0 10px 0 #666;
-	cursor: pointer;
+  box-shadow: 0 0 10px 0 #666;
+  cursor: pointer;
+}
+
+button:focus {
+  outline: 1px solid black;
 }
 
 button:disabled {
-	color: gray;
-	background-color: #333;
-	cursor: not-allowed;
+  color: gray;
+  background-color: #333;
+  cursor: not-allowed;
 }
 
 span.icon {
-	font-size: 3em;
+  font-size: 3em;
 }
 
 .actionFailed {
-	animation: kfActionFailed 1s;
+  animation: kfActionFailed 1s;
 }
 
 @keyframes kfActionFailed {
-	0% { background-color: black; }
-	20% { background-color: red; }
-	0% { background-color: inherit; }
+  0% { background-color: black; }
+  20% { background-color: red; }
+  0% { background-color: inherit; }
 }
 
 .actionSuccess {
-	animation: kfActionSuccess 1s;
+  animation: kfActionSuccess 1s;
 }
 
 @keyframes kfActionSuccess {
-	0% { background-color: black; }
-	20% { background-color: limegreen; }
-	0% { background-color: inherit; }
+  0% { background-color: black; }
+  20% { background-color: limegreen; }
+  0% { background-color: inherit; }
 }
 
 .actionNonZeroExit {
-	animation: kfActionNonZeroExit 1s;
+  animation: kfActionNonZeroExit 1s;
 }
 
 @keyframes kfActionNonZeroExit {
-	0% { background-color: black; }
-	20% { background-color: orange; }
-	0% { background-color: inherit; }
+  0% { background-color: black; }
+  20% { background-color: orange; }
+  0% { background-color: inherit; }
 }
 
 .actionTimeout {
-	animation: kfActionTimeout 1s;
+  animation: kfActionTimeout 1s;
 }
 
 @keyframes kfActionTimeout {
-	0% { background-color: black; }
-	20% { background-color: cyan; }
-	0% { background-color: inherit; }
+  0% { background-color: black; }
+  20% { background-color: cyan; }
+  0% { background-color: inherit; }
 }
 
-
-footer, footer a {
-	color: gray;
+footer,
+footer a {
+  color: black;
 }
 
 img.logo {
-	width: 1em;
-	height: 1em;
-	vertical-align: middle;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
 }
 
 @media (max-width: 320px) {
-	.group {
-		grid-template-columns: auto;
-		grid-gap: 0;
-		padding: 0;
-	}
+  fieldset {
+    grid-template-columns: auto;
+    grid-gap: 0;
+    padding: 0;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
-	body {
-		background-color: #333;
-		color: white;
-	}
+  body {
+    background-color: #333;
+    color: white;
+  }
 
-	button {
-		border: 1px solid #666;
-		background-color: #222;
-		box-shadow: 0 0 6px 0 #444;
-		color: white;
-	}
+  button {
+    border: 1px solid #666;
+    background-color: #222;
+    box-shadow: 0 0 6px 0 #444;
+    color: white;
+  }
 
-	button:disabled {
-		background-color: black;
-	}
+  button:disabled {
+    background-color: black;
+  }
 }
