:wheelchair: Add #main and skip to main

app/components/CookieMonster.vue

@@ -1,6 +1,6 @@
 <template>
-    <dialog id="cookie_monster" aria-label="Cookie Preferences" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
-        <div v-if="isOpen" class="fixed bottom-2 right-2 left-2 sm:w-10/12 max-w-screen-md sm:mx-auto">
+    <dialog :open="isOpen" closedby="any" id="cookie_monster" aria-label="Cookie Preferences" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
+        <div class="fixed bottom-2 right-2 left-2 sm:w-10/12 max-w-screen-md sm:mx-auto">
             <div class="border-2 bg-white border-sky-700 px-4 pt-3 pb-4 overflow-scroll">
                 <client-only><fa-icon :icon="['fas', 'circle-xmark']" class="text-error text-4xl float-right" @click="isOpen = false" /></client-only>
                 <div class="pb-4">
@@ -26,10 +26,11 @@
                 </div>
             </div>
         </div>
-        <button v-else class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" aria-label="Open Cookie Preferences" @click="isOpen = true">
-            <ClientOnly><fa-icon icon="fa-solid fa-cookie-bite" class="sm:text-6xl text-4xl text-sky-500" /></ClientOnly>
-        </button>
     </dialog>
+    <button v-if="!isOpen" class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" aria-label="Open Cookie Preferences" @click="isOpen = true">
+        <ClientOnly><fa-icon icon="fa-solid fa-cookie-bite" class="sm:text-6xl text-4xl text-sky-500" /></ClientOnly>
+    </button>
+
 </template>
 
 <script lang="ts" setup>

app/components/TopBanner.vue

@@ -9,12 +9,14 @@
                 </ClientOnly>
             </a>
             <div v-if="!isIndexPage">
+                <a href="#main" class="skip sr-only">Skip to main content</a>
                 <div class="headline sm:ml-52 ml-24 pt-2 sm:pt-4"><span class="sm:text-4xl text-3xl text-white"><slot name="headline">Default Headline from TopBanner</slot></span></div>
                 <div class="subheadline sm:ml-56 ml-28"><span class="sm:text-2xl text-xl text-white"><slot name="tagline">Default tagline from TopBanner</slot></span></div>
             </div>
             <div v-if="isIndexPage" class="ml-2">
                 <div class="headline sm:-ml-48 -ml-36 pt-3 sm:pt-4 text-center"><h1 class="sm:text-3xl text-2xl text-white">Hello</h1></div>
                 <div class="subheadline ml-14 -mt-8 text-center"><h2 class="sm:text-5xl text-4xl text-white">I'm Andrea</h2></div>
+                <a href="#main" class="skip sr-only">Skip to main content</a>
             </div>
         </div>
     </header>

app/error.vue

@@ -7,7 +7,7 @@
         <ClientOnly><CookieMonster /></ClientOnly>
         <MainMenu />
 
-        <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+        <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
             <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
                 <h3 class="text-5xl text-center -mt-6 sm:-mt-16">
                     Sorry, I messed up.

app/pages/404.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <p>Things come, things go. The page you were looking for must have gone.</p>
             <p>Sorry.</p>

app/pages/cbprivacy.vue

@@ -2,7 +2,7 @@
 	<template #headline>{{ headline }}</template>
 	<template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <p><strong>🇬🇧 English</strong></p>
 			<p>Circular Bells does not collect personal data without your consent.</p>

app/pages/colophon.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Colophon">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Colophon">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <h2>Colophon</h2>
             <section class="col-span-1 sm:col-span-2">

app/pages/contact.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose" aria-label="Contact information">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose" aria-label="Contact information">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="links">
                 <p>You can find me on these web sites…</p>

app/pages/cookies.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Cookie policy">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Cookie policy">
         <article class="grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="col-span-1 sm:col-span-2 pb-8">
                 <p><strong>Cookies are not always bad</strong>. Sometimes they are bad, sometimes they are useful.

app/pages/cv.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Curriculum Vitae of Andrea Franceschini">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Curriculum Vitae of Andrea Franceschini">
         <article class="body">
             <section id="personal" class="macro">
                 <h2 class="">Personal information</h2>

app/pages/development.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Development">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Development">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="full col-start-1 sm:col-span-2">
                 <p>I have been writing code for as long as I can remember &ndash; yes, that must have been around 1990, with my Amiga 500. It has been a long journey, and I learned a thing or two along the way.</p>

app/pages/eumyths.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="British EU Myths">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="British EU Myths">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <h2>British EU Myths</h2>
             <h3><strong>A <a href="https://en.wikipedia.org/wiki/Internet_bot">bot</a> that <a href="https://en.wikipedia.org/wiki/Debunker">debunks</a> <a href="https://en.wikipedia.org/wiki/Fake_news">fake news</a></strong></h3>

app/pages/index.vue

@@ -1,5 +1,5 @@
 <template><NuxtLayout name="default">
-    <main class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0" aria-label="Home page">
+    <main id="main" class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0" aria-label="Home page">
         <h3 class="sm:text-5xl text-3xl text-center -mt-6 sm:-mt-16 font-display">
             I do things.
         </h3>

app/pages/qualia.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <h2>Qualia Computing</h2>
             <p>On the 13<sup>th</sup> of May 2020, I woke up to find an email from <a href="https://www.linkedin.com/in/nicholas-rayner-2251903a/?originalSubdomain=uk">Nicholas Rayner</a> about this project of his, Qualia Computing.

app/pages/research.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Research">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Research">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <h2>Current research</h2>
             <section class="sm:col-start-1">

app/pages/writing.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Writing">
+    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Writing">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="full sm:col-span-2">
                 <p>Did you know that researchers spend about half of their professional lives doing academic and technical writing? For example, research students spend at least a third of their studies writing their theses, without counting papers, and bids for grants.</p>