From 1b7f8e9af337fccec31ff3f23f877f85155c6831 Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Mon, 3 Aug 2020 23:06:19 +0200
Subject: [PATCH] make focused element visible

---
 make-pages/SinglePage.hs |  2 +-
 style/shiny/base.css     | 25 ++++++++++++++++++++++++-
 style/shiny/gallery.css  |  4 ++++
 style/shiny/index.css    |  2 +-
 style/shiny/single.css   |  4 ++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index ba4559b..176a127 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -92,7 +92,7 @@ make' nsfw dir info@(Info {date, title, artist}) = [b|@0
     makePrefetch (Image {path}) = [b|<link rel=prefetch href=$@path>|]
 
     warning' = ifJust (#warning image0) \w -> [b|@4
-      <figcaption id=cw>
+      <figcaption id=cw aria-role=button tabindex=0>
         <span id=cw-text>cw: <b>$*w</b></span>
       </figcaption>
       |]
diff --git a/style/shiny/base.css b/style/shiny/base.css
index b51feee..1b92021 100644
--- a/style/shiny/base.css
+++ b/style/shiny/base.css
@@ -14,6 +14,9 @@
   --text-col: white;
   --nsfw-sticker-rotate: 15deg;
 
+  --focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
+  --focus-text: hsl(334deg, 87%, 90%);
+
   font-family: Muller;
   font-size: 18pt;
   font-weight: 600;
@@ -54,8 +57,17 @@ header h1 {
 
 a {
   color: inherit;
+  text-decoration: single underline;
+  text-decoration-thickness: 2px;
 }
 
+a:focus {
+  outline: none;
+  color: var(--focus-text);
+  text-decoration-style: double;
+}
+
+
 footer {
   font-weight: 500;
   font-size: 80%;
@@ -83,7 +95,13 @@ footer {
 
 
 .buttonbar.choice input {
-  display: none;
+  display: inline;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  width: 0;
 }
 
 .buttonbar {
@@ -115,6 +133,11 @@ footer {
   text-shadow: none;
 }
 
+.buttonbar.choice :focus + label,
+.buttonbar:not(.choice) li:focus-within {
+  box-shadow: var(--focus-box);
+}
+
 .buttonbar.choice :checked + label {
   color: var(--button-bg);
   background: var(--text-col);
diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css
index 5c0a176..7585997 100644
--- a/style/shiny/gallery.css
+++ b/style/shiny/gallery.css
@@ -37,6 +37,10 @@ body {
   background: hsl(340, 45%, 65%);
 }
 
+.item:focus-within {
+  box-shadow: var(--focus-box);
+}
+
 
 figure {
   margin: 0;
diff --git a/style/shiny/index.css b/style/shiny/index.css
index c1b6005..886327a 100644
--- a/style/shiny/index.css
+++ b/style/shiny/index.css
@@ -82,7 +82,7 @@ header h1::after {
   justify-content: center;
 }
 
-.list a {
+.list a:not(:focus) {
   text-decoration: none;
 }
 
diff --git a/style/shiny/single.css b/style/shiny/single.css
index 54319a9..734e04a 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -19,6 +19,10 @@ body {
   background: hsl(340, 45%, 65%);
 }
 
+#mainfig:focus-within {
+  box-shadow: var(--focus-box);
+}
+
 #mainimg {
   display: block;
 }