From 5d40cb8e79a430fa8fe780705b3a60c75918f21a Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 29 Apr 2022 00:00:16 +0200
Subject: [PATCH] Accessibility: use buttons

Part of #960.
---
 src/style/main.css      | 27 ++++++++++++++++++++++++++-
 src/template.index.html |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/style/main.css b/src/style/main.css
index 3f559adc..1f2d72a6 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -62,6 +62,31 @@ div.modalTerminal p {
   text-align: center;
 }
 
+.visuallyHidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.noStyle {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+  text-indent: inherit;
+  text-shadow: inherit;
+  appearance: none;
+}
+
 /* Box Model */
 html,
 body,
@@ -1295,4 +1320,4 @@ div.gitDemonstrationView {
   bottom: 0px;
   left: 21px;
   opacity: 0.4;
-}
\ No newline at end of file
+}
diff --git a/src/template.index.html b/src/template.index.html
index 0a594910..51aa534d 100644
--- a/src/template.index.html
+++ b/src/template.index.html
@@ -304,7 +304,7 @@
   <script type="text/html" id="left-right-template">
     <% if (!showLeft && lastNav ) { %>
       <div class="box right">
-        <i class="icon-ok exit"></i>
+        <button class="noStyle"><i aria-hidden="true" class="icon-ok exit"></i><span class="visuallyHidden">OK</span></button>
       </div>
     <% } else { %>
       <% if (showLeft) { %>