Add "skip to content link" to the Single result pages (#2178)

* Add skip to content link to the Single result pages

* Remove extra `main` from the default layout

* Remove extra `main` from the default layout

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

@@ -9,14 +9,10 @@
       <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>
+    <div class="grid flex-grow grid-rows-[1fr,auto]">
+      <Nuxt />
+      <VFooter mode="search" class="bg-yellow" />
+    </div>
 
     <VModalTarget class="modal" />
     <VGlobalAudioSection />

src/pages/audio/_id/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <VSkipToContentContainer as="main">
     <div v-if="backToSearchPath" class="w-full py-2 px-2 md:px-6">
       <VBackToSearchResultsLink :href="backToSearchPath" />
     </div>
@@ -16,7 +16,7 @@
         :fetch-state="relatedFetchState"
       />
     </div>
-  </main>
+  </VSkipToContentContainer>
 </template>
 
 <script lang="ts">
@@ -32,8 +32,9 @@ import { createDetailPageMeta } from "~/utils/og"
 import VAudioDetails from "~/components/VAudioDetails/VAudioDetails.vue"
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
-import VRelatedAudio from "~/components/VAudioDetails/VRelatedAudio.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
+import VRelatedAudio from "~/components/VAudioDetails/VRelatedAudio.vue"
+import VSkipToContentContainer from "~/components/VSkipToContentContainer.vue"
 
 export default defineComponent({
   name: "AudioDetailPage",
@@ -43,6 +44,7 @@ export default defineComponent({
     VBackToSearchResultsLink,
     VMediaReuse,
     VRelatedAudio,
+    VSkipToContentContainer,
   },
   beforeRouteEnter(to, from, next) {
     if (from.path.includes("/search/")) {

src/pages/image/_id/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <VSkipToContentContainer as="main">
     <div v-if="backToSearchPath" class="w-full py-2 px-2 md:px-6">
       <VBackToSearchResultsLink :href="backToSearchPath" />
     </div>
@@ -76,7 +76,7 @@
       :media="relatedMedia"
       :fetch-state="relatedFetchState"
     />
-  </div>
+  </VSkipToContentContainer>
 </template>
 
 <script lang="ts">
@@ -96,29 +96,31 @@ import { useRelatedMediaStore } from "~/stores/media/related-media"
 import { useSearchStore } from "~/stores/search"
 import { createDetailPageMeta } from "~/utils/og"
 
+import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
-import VLink from "~/components/VLink.vue"
 import VImageDetails from "~/components/VImageDetails/VImageDetails.vue"
+import VLink from "~/components/VLink.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
 import VRelatedImages from "~/components/VImageDetails/VRelatedImages.vue"
 import VSketchFabViewer from "~/components/VSketchFabViewer.vue"
-import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
+import VSkipToContentContainer from "~/components/VSkipToContentContainer.vue"
 
 import errorImage from "~/assets/image_not_available_placeholder.png"
 import externalIcon from "~/assets/icons/external-link.svg"
 
 export default defineComponent({
   name: "VImageDetailsPage",
   components: {
+    VBackToSearchResultsLink,
     VButton,
     VIcon,
     VLink,
     VImageDetails,
     VMediaReuse,
     VRelatedImages,
     VSketchFabViewer,
-    VBackToSearchResultsLink,
+    VSkipToContentContainer,
   },
   beforeRouteEnter(to, from, next) {
     if (from.path.includes("/search/")) {

src/pages/image/_id/report.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <VSkipToContentContainer
+    as="main"
     class="mx-auto mt-8 mb-6 max-w-none gap-x-10 px-4 md:grid md:max-w-4xl md:grid-cols-2 md:px-6 lg:mb-30 lg:px-0 xl:max-w-4xl"
   >
     <figure class="mb-6 flex flex-col items-start gap-y-4">
@@ -35,7 +36,7 @@
       :allow-cancel="false"
       :provider-name="image.providerName"
     />
-  </div>
+  </VSkipToContentContainer>
 </template>
 
 <script lang="ts">
@@ -50,11 +51,15 @@ import type { ImageDetail } from "~/types/media"
 import { AttributionOptions, getAttribution } from "~/utils/attribution-html"
 
 import VButton from "~/components/VButton.vue"
+import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
+import VSkipToContentContainer from "~/components/VSkipToContentContainer.vue"
 
 export default defineComponent({
   name: "ReportImage",
   components: {
     VButton,
+    VContentReportForm,
+    VSkipToContentContainer,
   },
   setup() {
     const i18n = useI18n()

src/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main
-    class="index flex w-full flex-shrink-0 flex-grow flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:gap-0"
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:gap-0"
   >
     <VHomepageContent
       class="sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"