Issue #2990766 by camilledavis, Gauravvvv, mgifford: Location of "Skip to Main" link below admin toolbar in Claro is problematic for screen magnifier users

(cherry picked from commit 5e0d1efa0a)

core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css

@@ -4,11 +4,9 @@
  */
 
 .skip-link {
-  z-index: 50;
+  z-index: 503;
-  left: 50%;
+  inset-inline-start: 0;
   padding: 1px 10px 2px;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
   border: 1px solid #444;
   border-top-width: 0;
   border-radius: 0 0 10px 10px;

core/themes/claro/css/components/skip-link.css

@@ -19,13 +19,16 @@
 }
 
 .skip-link {
-  z-index: 50;
+  z-index: 503;
-  left: 50%;
+  top: 0;
+  left: 0; /* LTR */
   padding: 1px 0.625rem 2px;
-  transform: translateX(-50%);
   color: var(--skip-link-color);
-  border-radius: 0 0 0.625rem 0.625rem;
+  border-radius: 0 0 0.625rem 0; /* LTR */
   background: var(--skip-link-bg-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
   font-size: 0.94em;
 }
 
@@ -43,3 +46,9 @@
 .skip-link.visually-hidden.focusable:focus {
   position: absolute !important;
 }
+
+[dir="rtl"] .skip-link {
+  right: 0;
+  left: auto;
+  border-radius: 0 0 0 0.625rem;
+}

core/themes/claro/css/components/skip-link.pcss.css

@@ -12,13 +12,16 @@
 }
 
 .skip-link {
-  z-index: 50;
+  z-index: 503;
-  left: 50%;
+  top: 0;
+  left: 0; /* LTR */
   padding: 1px 10px 2px;
-  transform: translateX(-50%);
   color: var(--skip-link-color);
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 10px 0; /* LTR */
   background: var(--skip-link-bg-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
   font-size: 0.94em;
   &:hover,
   &:active {
@@ -32,3 +35,8 @@
     position: absolute !important;
   }
 }
+[dir="rtl"] .skip-link {
+  right: 0;
+  left: auto;
+  border-radius: 0 0 0 10px;
+}