From: Nick Bowler <nbowler@draconx.ca>
Date: Tue, 10 May 2022 00:11:50 +0000 (-0400)
Subject: Attempt to improve focus ring styles in modern browsers.
X-Git-Url: https://git.draconx.ca/gitweb/homepage.git/commitdiff_plain/e39d97fade755e9b53e7dc0f7bd4320ade1b7b83

Attempt to improve focus ring styles in modern browsers.

It seeems new browsers use a rather different focus ring style by
default from how it used to be.  This means the focus rings in the
clicky table headers (which are made by CSS rules) don't look anything
like the focus rings on links.

To try and fix this, let's explicitly style all the focus rings to
be more like how they look by default in new browsers.
---

diff --git a/content/style.scss b/content/style.scss
index 04736d8..d53717d 100644
--- a/content/style.scss
+++ b/content/style.scss
@@ -1,7 +1,7 @@
 /*!
  * Nick's web site: default stylesheet
  *
- * Copyright © 2018-2021 Nick Bowler
+ * Copyright © 2018-2022 Nick Bowler
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -32,6 +32,8 @@ $annotationcolour:  #708090;
 
 $tableshadecolour:  #f5f5f5;
 
+$focusringcolour: #628cb2;
+
 @mixin header_size($maxwidth, $fontsize) {
     font-size: $fontsize;
     max-width: 1em * ($maxwidth / $fontsize);
@@ -48,6 +50,12 @@ a:link { color: $linkdefaultcolour; border-color: $linkdefaultcolour; }
 a:visited { color: $linkvisitedcolour; border-color: $linkvisitedcolour; }
 a:active { color: $linkactivecolour; border-color: $linkactivecolour; }
 
+@supports (outline-style: auto) {
+    a:link { border-width: 0; }
+    a:focus { outline: auto $focusringcolour; }
+    li, td, dt { &>a:link { border: solid 1px transparent; } }
+}
+
 h1 { @include header_size(60em, 2em); }
 h2 { @include header_size(60em, 1.5em); }
 h5 { @include header_size(60em, 1em); }
@@ -275,10 +283,6 @@ $clickynames: name, date, size;
             }
         }
 
-        &:focus ~ table th.clicky-#{$col}>label~label>span:first-child {
-            border-color: $foregroundcolour;
-        }
-
         // Unhide to allow keyboard navigation
         display: block !important;
         pointer-events: none;
@@ -299,15 +303,22 @@ $clickynames: name, date, size;
             }
         }
 
-        &:focus ~ table th.clicky-#{$col}>label~label .svg {
-            border-color: $foregroundcolour;
-        }
-
         pointer-events: none;
         position: absolute;
         opacity: 0;
         z-index: -2;
     }
+
+    $focuslabel: ":focus ~ table th.clicky-#{$col}>label~label";
+    #{"input.clicky-#{$col+$focuslabel}"}>span:first-child
+    , #{"input.clicky-#{$col}-rev#{$focuslabel}"} .svg
+    {
+        border-color: $foregroundcolour;
+        @at-root { @supports (outline-style: auto) { & {
+            border-color: transparent;
+            outline: auto $focusringcolour;
+        }}}
+    }
 }
 
 thead.clicky label {
@@ -332,6 +343,10 @@ thead.clicky label {
     &:active { color: $linkactivecolour; }
     &:first-child:active>span, &~label:active>.svg {
         border-color: $linkactivecolour;
+        @at-root { @supports (outline-style: auto) { & {
+            border-color: transparent;
+            outline: auto $focusringcolour;
+        }}}
     }
 
     .svg {