Use html landmark elements (#1361)

Co-authored-by: Anbraten <anton@ju60.de>

web/src/App.vue

@@ -3,14 +3,14 @@
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
-      <div class="relative flex min-h-0 h-full">
+      <main class="relative flex min-h-0 h-full">
         <div class="flex flex-col overflow-y-auto flex-grow">
           <router-view />
         </div>
         <transition name="slide-right">
           <PipelineFeedSidebar class="shadow-md border-l w-full absolute top-0 right-0 bottom-0 max-w-80 xl:max-w-96" />
         </transition>
-      </div>
+      </main>
     </template>
     <notifications position="bottom right" />
   </div>

web/src/assets/locales/en.json

@@ -14,6 +14,7 @@
     "color_scheme_dark": "Switch to light mode",
     "unknown_error": "An unknown error occurred",
     "documentation_for": "Documentation for \"{topic}\"",
+    "pipeline_feed": "Pipeline feed",
     "not_found": {
         "not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
         "back_home": "Back to home"

web/src/components/layout/header/ActivePipelines.vue

@@ -1,5 +1,5 @@
 <template>
-  <NavbarIcon :title="$t('repo.pipeline.tasks')" class="!p-1.5 relative" @click="toggle">
+  <NavbarIcon :title="$t('pipeline_feed')" class="!p-1.5 relative" @click="toggle">
     <div v-if="activePipelines.length > 0" class="spinner">
       <div class="spinner-ring ring1" />
       <div class="spinner-ring ring2" />

web/src/components/layout/header/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Navbar -->
-  <div class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
+  <nav class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
     <!-- Left Links Box -->
     <div class="flex text-white dark:text-gray-400 items-center space-x-2">
       <!-- Logo -->
@@ -51,7 +51,7 @@
       <!-- Login Button -->
       <Button v-else :text="$t('login')" @click="doLogin" />
     </div>
-  </div>
+  </nav>
 </template>
 
 <script lang="ts">

web/src/components/layout/scaffold/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700">
+  <header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700">
     <FluidContainer class="!py-0">
       <div class="flex flex-wrap items-center justify-between py-4 <md:flex-row <md:gap-y-4">
         <div
@@ -42,7 +42,7 @@
         </div>
       </div>
     </FluidContainer>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">

web/src/components/pipeline-feed/PipelineFeedSidebar.vue

@@ -1,7 +1,8 @@
 <template>
-  <div
+  <aside
     v-if="isPipelineFeedOpen"
     class="flex flex-col z-50 overflow-y-auto items-center bg-white dark:bg-dark-gray-800 dark:border-dark-500"
+    :aria-label="$t('pipeline_feed')"
   >
     <router-link
       v-for="pipeline in sortedPipelineFeed"
@@ -16,7 +17,7 @@
     </router-link>
 
     <span v-if="sortedPipelineFeed.length === 0" class="text-color m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
-  </div>
+  </aside>
 </template>
 
 <script lang="ts">

web/src/views/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-full h-full justify-center items-center">
+  <main class="flex flex-col w-full h-full justify-center items-center">
     <div v-if="errorMessage" class="bg-red-400 text-white dark:text-gray-500 p-4 rounded-md text-lg">
       {{ errorMessage }}
     </div>
@@ -15,7 +15,7 @@
         <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
       </div>
     </div>
-  </div>
+  </main>
 </template>
 
 <script lang="ts">