From 6a609b632a4c7bbb94c26cb41510dd6b5018a185 Mon Sep 17 00:00:00 2001
From: Denperidge <denperidge@gmail.com>
Date: Wed, 26 Feb 2025 18:39:52 +0100
Subject: [PATCH] [mod] Added stylised outline

This commit removes all outline: none,
as this makes keyboard navigation near impossible
Instead, a mixin and element rules are used to style the outline
---
 client/simple/src/less/mixins.less      | 8 ++++++++
 client/simple/src/less/preferences.less | 1 -
 client/simple/src/less/search.less      | 4 ++--
 client/simple/src/less/style.less       | 9 +++++++--
 client/simple/src/less/toolkit.less     | 7 -------
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/client/simple/src/less/mixins.less b/client/simple/src/less/mixins.less
index a4bae7128..ad71af7b3 100644
--- a/client/simple/src/less/mixins.less
+++ b/client/simple/src/less/mixins.less
@@ -38,3 +38,11 @@
     color: var(--color-btn-font);
   }
 }
+
+.focus-outline (@zIndex: 5000, @color: var(--color-base-font)) {
+  &:focus {
+    outline: 1.5px solid @color;
+    outline-offset: 3px;
+    z-index: @zIndex;
+  }
+}
diff --git a/client/simple/src/less/preferences.less b/client/simple/src/less/preferences.less
index 497b2077a..b3b0bb0d6 100644
--- a/client/simple/src/less/preferences.less
+++ b/client/simple/src/less/preferences.less
@@ -77,7 +77,6 @@ table {
 
     select:focus,
     input:focus {
-      outline: none;
       box-shadow: 0 0 1px 1px var(--color-btn-background);
     }
   }
diff --git a/client/simple/src/less/search.less b/client/simple/src/less/search.less
index 460ea09fa..e11f8f625 100644
--- a/client/simple/src/less/search.less
+++ b/client/simple/src/less/search.less
@@ -157,7 +157,7 @@ button.category_button {
   padding: 0.8rem 0.2rem;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: none;
-  outline: none;
+  .focus-outline;
   color: var(--color-search-font);
   font-size: 1.1rem;
   z-index: 1000;
@@ -182,7 +182,7 @@ html.no-js #clear_search.hide_if_nojs {
   padding: 0.8rem;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: none;
-  outline: none;
+  .focus-outline;
   color: var(--color-search-font);
   font-size: 1.1rem;
   z-index: 100;
diff --git a/client/simple/src/less/style.less b/client/simple/src/less/style.less
index 0454f121e..413d9b076 100644
--- a/client/simple/src/less/style.less
+++ b/client/simple/src/less/style.less
@@ -173,6 +173,13 @@ article[data-vim-selected].category-social {
   .rounded-corners;
 }
 
+a,
+button,
+input,
+select {
+  .focus-outline;
+}
+
 .result {
   margin: @results-margin 0;
   padding: @result-padding;
@@ -199,7 +206,6 @@ article[data-vim-selected].category-social {
       &:hover {
         text-decoration: underline;
         border: none;
-        outline: none;
       }
     }
   }
@@ -467,7 +473,6 @@ article[data-vim-selected].category-social {
 
   & > a {
     position: relative;
-    outline: none;
   }
 
   img {
diff --git a/client/simple/src/less/toolkit.less b/client/simple/src/less/toolkit.less
index f9bdbf70c..126c7c9a6 100644
--- a/client/simple/src/less/toolkit.less
+++ b/client/simple/src/less/toolkit.less
@@ -366,7 +366,6 @@ select {
     background-size: 2rem;
     background-origin: content-box;
     background-color: var(--color-toolkit-select-background);
-    outline: medium none;
     text-overflow: ellipsis;
     .rounded-corners-tiny;
 
@@ -412,12 +411,6 @@ input.checkbox-onoff[type="checkbox"] {
   border-radius: 10px;
   position: relative;
 
-  /* focus & hover */
-  &:focus,
-  &:hover {
-    outline: none;
-  }
-
   &:focus::after {
     content: "";
     position: absolute;