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 04736d84fd4f61ade054a2b8d7eeb7a0ae63bc30..d53717d9d0f692a02d356d0cb5c27574b981d1a8 100644 (file)
--- a/content/style.scss
+++ b/content/style.scss
@@ -1,7 +1,7 @@
 /*!
  * Nick's web site: default stylesheet
  *
 /*!
  * 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
  *
  * 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;
 
 
 $tableshadecolour:  #f5f5f5;
 

+$focusringcolour: #628cb2;
+

 @mixin header_size($maxwidth, $fontsize) {
     font-size: $fontsize;
     max-width: 1em * ($maxwidth / $fontsize);
 @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; }
 
 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); }
 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;
         // 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;
     }
         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 {
 }
 
 thead.clicky label {


@@ -332,6 +343,10 @@ thead.clicky label {
     &:active { color: $linkactivecolour; }
     &:first-child:active>span, &~label:active>.svg {
         border-color: $linkactivecolour;
     &: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 {
     }
 
     .svg {