feat: add skip links for long lists of focusables

Author: knowler

app/components/CallToAction.vue

@@ -42,7 +42,7 @@ function handleCardClick(event: MouseEvent) {
 
 <template>
   <div>
-    <h2 class="text-lg text-fg uppercase tracking-wider mb-6">
+    <h2 id="get-involved" class="text-lg text-fg uppercase tracking-wider mb-6">
       {{ $t('about.get_involved.title') }}
     </h2>
 

app/pages/about.vue

@@ -192,9 +192,14 @@ function onBeforeToggleHoverCard(event) {
 
         <!-- Sponsors -->
         <div class="sponsors-logos">
-          <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
+          <h2 id="sponsors" class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.sponsors.title') }}
           </h2>
+          <a
+            href="#oss-partners"
+            class="not-focus:sr-only absolute bg-bg-elevated rounded px-2 py-1 z-1"
+            >{{ $t('about.skip_sponsors') }}</a
+          >
           <AboutLogoList
             :list="SPONSORS"
             class="grid grid-cols-2 md:flex md:flex-row md:items-center"
@@ -203,14 +208,17 @@ function onBeforeToggleHoverCard(event) {
 
         <!-- OSS partners -->
         <div>
-          <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
+          <h2 id="oss-partners" class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.oss_partners.title') }}
           </h2>
+          <a href="#team" class="not-focus:sr-only absolute bg-bg-elevated rounded px-2 py-1 z-1">{{
+            $t('about.skip_oss_partners')
+          }}</a>
           <AboutLogoList :list="OSS_PARTNERS" class="items-center" />
         </div>
 
         <div>
-          <h2 class="text-lg uppercase tracking-wider mb-4">
+          <h2 id="team" class="text-lg uppercase tracking-wider mb-4">
             {{ $t('about.team.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-6">
@@ -226,6 +234,11 @@ function onBeforeToggleHoverCard(event) {
                 )
               }}
             </h3>
+            <a
+              href="#get-involved"
+              class="not-focus:sr-only absolute bg-bg-elevated rounded px-2 py-1 z-1"
+              >{{ $t('about.skip_contributors') }}</a
+            >
 
             <div
               v-if="contributorsStatus === 'pending'"

i18n/locales/en.json

@@ -905,6 +905,9 @@
     "title": "About",
     "heading": "about",
     "meta_description": "npmx is a fast, modern browser for the npm registry. A better UX/DX for exploring npm packages.",
+    "skip_sponsors": "Skip sponsors list",
+    "skip_oss_partners": "Skip open source partners list",
+    "skip_contributors": "Skip contributors list",
     "what_we_are": {
       "title": "What we are",
       "better_ux_dx": "better UX/DX",

i18n/schema.json

@@ -2719,6 +2719,15 @@
         "meta_description": {
           "type": "string"
         },
+        "skip_sponsors": {
+          "type": "string"
+        },
+        "skip_oss_partners": {
+          "type": "string"
+        },
+        "skip_contributors": {
+          "type": "string"
+        },
         "what_we_are": {
           "type": "object",
           "properties": {