Add skip-to-content links to the homepage and the 404 page

src/components/VFourOhFour.vue

@@ -1,33 +1,24 @@
 <template>
-  <div
-    class="error relative flex flex-col overflow-x-hidden"
-    :class="
-      isNewHeaderEnabled
-        ? 'flex-grow px-6 sm:px-0'
-        : 'h-screen h-[100dvh] bg-yellow'
-    "
-  >
+  <div class="error grid overflow-x-hidden">
     <svg
-      class="z-0 pointer-events-none absolute top-20 -mt-[10%] -ml-[20%] w-[140%] fill-dark-charcoal px-6 opacity-5 lg:mx-auto lg:ml-0 lg:w-full lg:px-16"
+      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-dark-charcoal opacity-5 lg:mx-15 lg:-mt-20"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1320 569"
       aria-hidden="true"
       focusable="false"
     >
       <use :href="`${Oops}#oops`" />
     </svg>
-    <div v-if="!isNewHeaderEnabled">
-      <VLink href="/" class="relative z-10 text-dark-charcoal">
-        <VBrand class="m-6 text-[18px] lg:mx-10 lg:my-8" />
-      </VLink>
-    </div>
 
-    <main
-      class="page-404 flex w-full flex-shrink-0 flex-grow flex-col overflow-x-hidden px-6 lg:mx-auto lg:max-w-2xl lg:px-0"
+    <div
+      class="page-404 col-start-1 row-start-1 flex flex-col justify-self-stretch px-6 lg:max-w-2xl lg:justify-self-center lg:px-0"
     >
       <!-- Push content by 1/4th height without absolute positioning. -->
       <div class="spacer grow" />
-      <div class="z-10 grow-[3] space-y-4 lg:space-y-6">
+      <VSkipToContentContainer
+        as="main"
+        class="z-10 grow-[3] space-y-4 lg:space-y-6"
+      >
         <h1 class="heading-5 lg:heading-2 mb-6 lg:mb-10 lg:leading-tight">
           {{ $t("404.title") }}
         </h1>
@@ -42,40 +33,31 @@
             </template>
           </i18n>
         </p>
-        <VStandaloneSearchBar
-          v-if="isNewHeaderEnabled"
-          route="404"
-          @submit="handleSearch"
-        />
-        <VStandaloneSearchBarOld v-else route="404" @submit="handleSearch" />
-      </div>
-    </main>
+        <VStandaloneSearchBar route="404" @submit="handleSearch" />
+      </VSkipToContentContainer>
+    </div>
   </div>
 </template>
 
 <script>
-import { defineComponent, useRouter } from "@nuxtjs/composition-api"
+import { defineComponent, useMeta, useRouter } from "@nuxtjs/composition-api"
 
 import { useSearchStore } from "~/stores/search"
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { ALL_MEDIA } from "~/constants/media"
 
-import VStandaloneSearchBarOld from "~/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue"
+import VSkipToContentContainer from "~/components/VSkipToContentContainer.vue"
+import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
 import VLink from "~/components/VLink.vue"
-import VBrand from "~/components/VBrand/VBrand.vue"
 
 import Oops from "~/assets/oops.svg"
 
 export default defineComponent({
   name: "VFourOhFour",
   components: {
     VLink,
-    VStandaloneSearchBarOld,
-    VStandaloneSearchBar: () =>
-      import("~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"),
-
-    VBrand,
+    VSkipToContentContainer,
+    VStandaloneSearchBar,
   },
   props: ["error"],
   setup() {
@@ -88,23 +70,15 @@ export default defineComponent({
       router.push(searchStore.updateSearchPath({ type: ALL_MEDIA, searchTerm }))
     }
 
-    const featureFlagStore = useFeatureFlagStore()
-    const isNewHeaderEnabled = featureFlagStore.isOn("new_header")
+    useMeta({
+      meta: [{ hid: "theme-color", name: "theme-color", content: "#ffe033" }],
+    })
 
     return {
       handleSearch,
-      isNewHeaderEnabled,
       Oops,
     }
   },
-  head: {
-    meta: [
-      {
-        hid: "theme-color",
-        name: "theme-color",
-        content: "#ffe033",
-      },
-    ],
-  },
+  head: {},
 })
 </script>

src/components/VHomepageContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="nodeRef">
+  <VSkipToContentContainer ref="nodeRef">
     <h1
       class="mt-auto mb-2 text-[40px] font-light leading-tight lg:text-[63px]"
     >
@@ -66,7 +66,7 @@
         >
       </template>
     </i18n>
-  </div>
+  </VSkipToContentContainer>
 </template>
 <script lang="ts">
 import { computed, ref, PropType } from "@nuxtjs/composition-api"
@@ -84,6 +84,7 @@ import VLink from "~/components/VLink.vue"
 import VPopoverContent from "~/components/VPopover/VPopoverContent.vue"
 import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.vue"
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
+import VSkipToContentContainer from "~/components/VSkipToContentContainer.vue"
 import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
 
 export default {
@@ -93,6 +94,7 @@ export default {
     VSearchTypes,
     VPopoverContent,
     VSearchTypeButton,
+    VSkipToContentContainer,
     VStandaloneSearchBar,
     VLink,
   },

src/components/VSkipToContentContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerNode">
+  <Component :is="as" ref="containerNode">
     <slot />
     <VTeleport to="skip-to-content">
       <VButton
@@ -9,11 +9,11 @@
         >{{ $t("skip-to-content") }}</VButton
       >
     </VTeleport>
-  </div>
+  </Component>
 </template>
 
-<script>
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 import { Portal as VTeleport } from "portal-vue"
 
 import { ensureFocus, getFirstTabbableIn } from "~/utils/reakit-utils/focus"
@@ -36,6 +36,10 @@ export default defineComponent({
       type: process.server ? Object : HTMLElement,
       required: false,
     },
+    as: {
+      type: String as PropType<"div" | "main">,
+      default: "div",
+    },
   },
   setup(props) {
     const containerNode = ref()

src/layouts/default.vue

@@ -8,15 +8,8 @@
       <VBanners />
       <VHeaderInternal class="bg-yellow" />
     </div>
-
-    <main class="main grid h-full flex-grow">
-      <div
-        class="main-page flex h-full w-full min-w-0 flex-col justify-between"
-      >
-        <Nuxt />
-        <VFooter mode="search" class="bg-yellow" />
-      </div>
-    </main>
+    <Nuxt class="flex-grow" />
+    <VFooter mode="search" class="bg-yellow" />
 
     <VModalTarget class="modal" />
     <VGlobalAudioSection />
@@ -31,22 +24,23 @@ import { useLayout } from "~/composables/use-layout"
 import { useUiStore } from "~/stores/ui"
 
 import VBanners from "~/components/VBanner/VBanners.vue"
+import VFooter from "~/components/VFooter/VFooter.vue"
 import VGlobalAudioSection from "~/components/VGlobalAudioSection/VGlobalAudioSection.vue"
+import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
 import VModalTarget from "~/components/VModal/VModalTarget.vue"
 
 /**
  * The default layout is one screen high and yellow, without sidebars.
- * The new header version of the "blank" layout.
  */
 export default defineComponent({
   name: "DefaultLayout",
   components: {
     VBanners,
-    VHeaderInternal: () => import("~/components/VHeader/VHeaderInternal.vue"),
-    VFooter: () => import("~/components/VFooter/VFooter.vue"),
+    VFooter,
+    VGlobalAudioSection,
+    VHeaderInternal,
     VModalTarget,
     VTeleportTarget,
-    VGlobalAudioSection,
   },
   setup() {
     const uiStore = useUiStore()