make focused element visible

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>
       |]

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);

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;

style/shiny/index.css

@@ -82,7 +82,7 @@ header h1::after {
   justify-content: center;
 }
 
-.list a {
+.list a:not(:focus) {
   text-decoration: none;
 }
 

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;
 }