♿️(styles) improve the offscreen class

CHANGELOG.md

@@ -40,6 +40,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
   excerpt, Program body and Person main content
 - Use anchors instead of buttons in search pagination to let users open pages
   in new tabs if they want
+- Improve the `offscreen` class implementation to prevent potential visual
+  issues for sighted user keyboards
 
 ### Fixed
 

src/frontend/scss/generic/_accessibility.scss

@@ -2,23 +2,20 @@
 // to users that need it.
 
 // Screen reader only content
-.offscreen {
+// code taken from orange's fork of bootstrap
+// https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/v5.1.3/scss/mixins/_visually-hidden.scss#L8
+.offscreen,
+.offscreen-focusable:not(:focus) {
   position: absolute;
-  left: -10000px;
-  top: auto;
   width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
-
-  // Screen reader toggleable function, including offscreen navigation
-  &:active,
-  &:focus {
-    left: 5px;
-    top: 5px;
-    width: auto;
-    height: auto;
-    overflow: auto;
-  }
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 
 // Skip to content button styles for it to be rendered on link focus
@@ -28,6 +25,9 @@
   background-color: r-color('midnightblue');
   padding: 1rem;
   z-index: 100000;
+  position: absolute;
+  left: 5px;
+  top: 5px;
 
   &:active,
   &:hover,

src/richie/apps/core/templates/richie/base.html

@@ -75,7 +75,7 @@
 
         {# First link on a website should always be a skip to content #}
         {# Access key directive allows users to use keyboard shortcuts #}
-        <a href="#site-content" class="offscreen skip-to-content" accesskey="c">{% trans "Skip to main content" %}</a>
+        <a href="#site-content" class="offscreen-focusable skip-to-content" accesskey="c">{% trans "Skip to main content" %}</a>
 
             {% block body_header %}