♿️(styles) improve the offscreen class

Change the implementation of the offscreen class to match the one from
bootstrap that is battle-tested.

The main idea is to stop using "left: -100000px" that can cause
scrolling "flicker" or weird focus styles when using a screen reader.
This can be annoying for sighted people that use a screen reader.

CHANGELOG.md

@@ -34,6 +34,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
   description with every markup removed
 - Set font size to 1rem on some detail pages contents: Organization
   excerpt, Program body and Person main content
+- Improve the `offscreen` class implementation to prevent potential visual
+  issues for sighted user keyboards
 
 ### Fixed
 

src/frontend/scss/generic/_accessibility.scss

@@ -2,23 +2,19 @@
 // to users that need it.
 
 // Screen reader only content
-.offscreen {
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-
-  // Screen reader toggleable function, including offscreen navigation
-  &:active,
-  &:focus {
-    left: 5px;
-    top: 5px;
-    width: auto;
-    height: auto;
-    overflow: auto;
-  }
+// 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 !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
 }
 
 // Skip to content button styles for it to be rendered on link focus
@@ -28,6 +24,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

@@ -71,7 +71,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 %}