Implement global skip links

packages/craftcms-cp/src/styles/cp.css

@@ -15,26 +15,43 @@
 }
 
 .skip-link {
-  /* Copied from tailwind's sr-only class */
+  /* Based on tailwind's sr-only class */
+  --x-position: 0;
+  --y-position: 0;
+  display: inline-block;
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  border-width: 0;
+  background-color: var(--c-bg-body);
+  text-decoration: none;
+  padding-block: var(--c-spacing-md);
+  padding-inline: var(--c-spacing-lg);
+  outline: none;
+  border: 1px dashed var(--c-form-control-border);
+  color: var(--c-fg-text);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--c-radius-md);
 
   &:focus {
     width: auto;
     height: auto;
     overflow: visible;
     clip: auto;
     white-space: normal;
-    inset-inline-start: 0;
+    inset-inline-start: var(--x-position);
+    inset-block-start: var(--y-position);
   }
 }
 
+.skip-link--global {
+  --x-position: calc(10rem / 16);
+  --y-position: calc(5rem / 16);
+}
+
 .error-list {
   color: var(--c-color-danger-on-normal);
   list-style: none;

resources/build/assets/IndexLayout.css

@@ -1 +1 @@
-#nav-container[data-v-2b99bb31]{background-color:color-mix(var(--color-slate-900), trans)}
+#nav-container[data-v-cb41a3f1]{background-color:color-mix(var(--color-slate-900), trans)}

resources/js/components/Breadcrumbs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import CpLink from '@/components/CpLink.vue';
+  import {t} from '@craftcms/cp';
 
   withDefaults(
     defineProps<{
@@ -16,27 +17,29 @@
 </script>
 
 <template>
-  <ul class="breadcrumbs">
-    <li
-      v-for="(item, idx) in items"
-      :key="idx"
-      :class="{
-        'breadcrumb-item': true,
-        'breadcrumb-item--active': idx === items.length - 1,
-      }"
-    >
-      <template v-if="item.url">
-        <CpLink :href="item.url">{{ item.label }}</CpLink>
-      </template>
-      <template v-else>
-        {{ item.label }}
-      </template>
+  <nav :aria-label="t('Breadcrumbs')">
+    <ul class="breadcrumbs">
+      <li
+        v-for="(item, idx) in items"
+        :key="idx"
+        :class="{
+          'breadcrumb-item': true,
+          'breadcrumb-item--active': idx === items.length - 1,
+        }"
+      >
+        <template v-if="item.url">
+          <CpLink :href="item.url">{{ item.label }}</CpLink>
+        </template>
+        <template v-else>
+          {{ item.label }}
+        </template>
 
-      <span class="separator" v-if="idx < items.length - 1">{{
-        separator
-      }}</span>
-    </li>
-  </ul>
+        <span class="separator" v-if="idx < items.length - 1">{{
+          separator
+        }}</span>
+      </li>
+    </ul>
+  </nav>
 </template>
 
 <style scoped lang="scss">

resources/js/components/CpSidebar.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+  import {t} from '@craftcms/cp';
   import SystemInfo from '@/components/SystemInfo.vue';
   import MainNav from '@/components/MainNav.vue';
   import EditionInfo from '@/components/EditionInfo.vue';
   import DevModeIndicator from '@/components/DevModeIndicator.vue';
   import {computed, nextTick, watch} from 'vue';
-  import {t} from '@craftcms/cp/utilities/translate.ts.mjs';
 
   const emit = defineEmits<{
     (e: 'close'): void;
@@ -36,7 +36,12 @@
 </script>
 
 <template>
-  <nav class="cp-sidebar" :data-visibility="visibility" :data-mode="mode">
+  <nav
+    class="cp-sidebar"
+    :data-visibility="visibility"
+    :data-mode="mode"
+    :aria-label="t('Primary')"
+  >
     <template v-if="visibility === 'visible'">
       <div class="cp-sidebar__header">
         <div class="sidebar-header" v-if="mode !== 'docked'">

resources/js/layout/AppLayout.vue

@@ -10,13 +10,14 @@
   import {useAnnouncer} from '@/composables/useAnnouncer';
   import LiveRegion from '@/components/LiveRegion.vue';
 
-  withDefaults(
+  const props = withDefaults(
     defineProps<{
       title?: string;
       debug?: any;
       fullWidth?: boolean;
+      additionalSkipLinks?: Array<{label: string; url: string}>;
     }>(),
-    {fullWidth: false, crumbs: () => []}
+    {fullWidth: false}
   );
 
   const page = usePage<{
@@ -32,6 +33,10 @@
   const errorFlash = computed(() => page.props.flash?.error);
   const successFlash = computed(() => page.props.flash?.success);
   const crumbs = computed(() => page.props.crumbs ?? null);
+  const skipLinks = computed(() => [
+    {label: t('Skip to main section'), url: '#main'},
+    ...(props.additionalSkipLinks ?? []),
+  ]);
   const sidebarToggle = useTemplateRef('sidebarToggle');
   const {announcement, announce} = useAnnouncer();
 
@@ -98,7 +103,14 @@
   <Head :title="title" />
   <LiveRegion :debug="true"></LiveRegion>
   <div class="cp">
-    <div class="cp__header">
+    <header class="cp__header">
+      <a
+        v-for="link in skipLinks"
+        :key="link.url"
+        :href="link.url"
+        class="skip-link skip-link--global"
+        >{{ link.label }}</a
+      >
       <div class="flex gap-2 p-2">
         <craft-button
           icon
@@ -131,7 +143,7 @@
           successFlash
         }}</craft-callout>
       </template>
-    </div>
+    </header>
     <div class="cp__sidebar">
       <CpSidebar
         :mode="state.sidebar.mode"
@@ -141,15 +153,15 @@
     </div>
     <div class="cp__main">
       <slot name="main">
-        <main>
-          <slot name="breadcrumbs">
-            <div
-              class="px-4 py-2 border-b border-b-neutral-border-quiet"
-              v-if="crumbs"
-            >
-              <Breadcrumbs :items="crumbs" />
-            </div>
-          </slot>
+        <slot name="breadcrumbs">
+          <div
+            class="px-4 py-2 border-b border-b-neutral-border-quiet"
+            v-if="crumbs"
+          >
+            <Breadcrumbs :items="crumbs" />
+          </div>
+        </slot>
+        <main id="main" tabindex="-1">
           <slot name="header">
             <div :class="{container: true, 'container--full': fullWidth}">
               <div class="index-grid index-grid--header">