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 4f93f1fe0c7a..1dd4758ced04 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 8ec9a949674d..34ca05bc57a3 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 8bc467a07fc4..1b50e5e5d013 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;
+}
--
GitLab