From 05e4213ebe7a1e2a5c667e05fc976fa656701e70 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho
Date: Fri, 4 Sep 2026 13:31:34 -0700
Subject: [PATCH] Move skip links before sidebar in DOM order
---
packages/craftcms-ui/src/styles/cp.css | 3 ++-
resources/css/cp.css | 1 +
resources/js/common/components/CpSidebar.vue | 2 +-
.../js/common/layouts/screens/PageScreen.vue | 20 +++++++++----------
4 files changed, 14 insertions(+), 12 deletions(-)
diff --git a/packages/craftcms-ui/src/styles/cp.css b/packages/craftcms-ui/src/styles/cp.css
index fd41f9584b3..8ada7b87e3d 100644
--- a/packages/craftcms-ui/src/styles/cp.css
+++ b/packages/craftcms-ui/src/styles/cp.css
@@ -48,8 +48,9 @@
}
.skip-link--global {
- --x-position: calc(10rem / 16);
+ --x-position: calc(5rem / 16);
--y-position: calc(5rem / 16);
+ z-index: calc(var(--global-sidebar-z-index) + 1);
}
.error-list {
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 042dfee7d18..7881b8e861c 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -19,6 +19,7 @@ CP Styles
);
--global-content-width: calc(1440rem / 16);
--header-height: calc(44rem / 16);
+ --global-sidebar-z-index: 10;
/* Workspace */
--workspace-bg-color: var(--c-color-neutral-fill-quiet);
diff --git a/resources/js/common/components/CpSidebar.vue b/resources/js/common/components/CpSidebar.vue
index cb447ab56c7..bde6009f8ea 100644
--- a/resources/js/common/components/CpSidebar.vue
+++ b/resources/js/common/components/CpSidebar.vue
@@ -99,7 +99,7 @@
— but below modals (10001+). The sidebar is chrome: a floating drawer
overlays the page, and a collapsed rail's label tooltips overflow across
it. Both get sliced by a sticky header otherwise. */
- z-index: 10;
+ z-index: var(--global-sidebar-z-index);
height: 100dvh;
width: var(--global-sidebar-width);
display: flex;
diff --git a/resources/js/common/layouts/screens/PageScreen.vue b/resources/js/common/layouts/screens/PageScreen.vue
index d2bc192cca6..5fba44e866c 100644
--- a/resources/js/common/layouts/screens/PageScreen.vue
+++ b/resources/js/common/layouts/screens/PageScreen.vue
@@ -220,6 +220,16 @@