From 5e0d1efa0ac07569b4f6aba04f58b1090abab764 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Thu, 9 May 2024 06:06:30 +0900
Subject: [PATCH] Issue #2990766 by camilledavis, Gauravvvv, mgifford: Location
 of "Skip to Main" link below admin toolbar in Claro is problematic for screen
 magnifier users

---
 .../navigation/skip-link/skip-link.css          |  6 ++----
 core/themes/claro/css/components/skip-link.css  | 17 +++++++++++++----
 .../claro/css/components/skip-link.pcss.css     | 16 ++++++++++++----
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
index 4f93f1fe0c7..1dd4758ced0 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
@@ -4,11 +4,9 @@
  */
 
 .skip-link {
-  z-index: 50;
-  left: 50%;
+  z-index: 503;
+  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;
diff --git a/core/themes/claro/css/components/skip-link.css b/core/themes/claro/css/components/skip-link.css
index 8ec9a949674..34ca05bc57a 100644
--- a/core/themes/claro/css/components/skip-link.css
+++ b/core/themes/claro/css/components/skip-link.css
@@ -19,13 +19,16 @@
 }
 
 .skip-link {
-  z-index: 50;
-  left: 50%;
+  z-index: 503;
+  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;
+}
diff --git a/core/themes/claro/css/components/skip-link.pcss.css b/core/themes/claro/css/components/skip-link.pcss.css
index 8bc467a07fc..1b50e5e5d01 100644
--- a/core/themes/claro/css/components/skip-link.pcss.css
+++ b/core/themes/claro/css/components/skip-link.pcss.css
@@ -12,13 +12,16 @@
 }
 
 .skip-link {
-  z-index: 50;
-  left: 50%;
+  z-index: 503;
+  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;
+}