🧹 Accessibility Improvements (WCAG 2.2 AA)

components/VehicleSheet/EmptyState.vue

@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-flex tw-min-h-[6rem] tw-w-full tw-items-center tw-gap-4 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-text-left tw-text-neutral-10 dark:tw-bg-neutral-10 dark:tw-text-neutral-90 md:tw-left-2 md:tw-top-2 md:tw-max-h-max md:tw-min-h-[12rem] md:tw-w-96 md:tw-flex-col md:tw-rounded-xl md:tw-text-center xl:tw-left-4 xl:tw-top-4"
+    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-flex tw-min-h-[6rem] tw-w-full tw-items-center tw-gap-4 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-text-left tw-text-neutral-10 md:tw-left-2 md:tw-top-2 md:tw-max-h-max md:tw-min-h-[12rem] md:tw-w-96 md:tw-flex-col md:tw-rounded-xl md:tw-text-center xl:tw-left-4 xl:tw-top-4 dark:tw-bg-neutral-10 dark:tw-text-neutral-90"
   >
     <svg
       class="tw-h-12 tw-w-12 md:tw-h-32 md:tw-w-32"

components/VehicleSheet/Property.vue

@@ -6,7 +6,7 @@
     />
     <div class="tw-ml-3">
       <dt
-        class="tw-text-[0.6875rem] tw-font-medium tw-leading-4 tw-text-neutralVariant-30 dark:tw-text-neutralVariant-80 xl:tw-text-xs"
+        class="tw-text-[0.6875rem] tw-font-medium tw-leading-4 tw-text-neutralVariant-30 xl:tw-text-xs dark:tw-text-neutralVariant-80"
       >
         {{ $t(property.value) }}
       </dt>

components/VehicleSheet/VehicleSheet.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-mb-[4rem] tw-w-full tw-space-y-2 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-pb-20 tw-text-neutral-10 dark:tw-bg-neutral-10 dark:tw-text-neutral-90 md:tw-left-2 md:tw-top-2 md:tw-max-h-[calc(100vh-41px-32px)] md:tw-w-96 md:tw-rounded-xl md:tw-pb-4 xl:tw-left-4 xl:tw-top-4 xl:tw-space-y-4"
+    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-mb-[4rem] tw-w-full tw-space-y-2 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-pb-20 tw-text-neutral-10 md:tw-left-2 md:tw-top-2 md:tw-max-h-[calc(100vh-41px-32px)] md:tw-w-96 md:tw-rounded-xl md:tw-pb-4 xl:tw-left-4 xl:tw-top-4 xl:tw-space-y-4 dark:tw-bg-neutral-10 dark:tw-text-neutral-90"
   >
     <div class="-tw-mt-4 md:tw-hidden">
       <div

components/settings/SettingsGroup.vue

@@ -22,9 +22,6 @@
 import { mdiArrowRight } from '@mdi/js'
 
 export default {
-  data: () => ({
-    mdiArrowRight,
-  }),
   props: {
     title: {
       type: String,
@@ -41,6 +38,9 @@ export default {
       default: null,
     },
   },
+  data: () => ({
+    mdiArrowRight,
+  }),
   methods: {
     navigateToView() {
       this.$store.commit('app/set', {

components/settings/SettingsHiddenAgencies.vue

@@ -2,17 +2,17 @@
   <div>
     <p class="tw-mb-2 tw-text-sm">{{ $t('completeDesc') }}</p>
     <TwChip
-      :icon="mdiEyeCheck"
       v-if="hiddenAgencies.length"
-      @click.native="makeAllVisible"
+      :icon="mdiEyeCheck"
       class="tw-mb-2"
+      @click.native="makeAllVisible"
     >
       {{ $t('makeAllAgenciesVisible') }}
     </TwChip>
     <TwDetails
-      class="tw-mt-2"
       v-for="region in regions"
       :key="region.slug"
+      class="tw-mt-2"
       :open="region.slug === currentRegion"
     >
       <template #summary>

components/settings/SettingsItem.vue

@@ -1,11 +1,11 @@
 <template>
   <button
-    @click.prevent="handleClick"
     class="tw-group tw-relative tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-80 tw-py-3 tw-pl-2 tw-pr-4 tw-text-left tw-transition-colors dark:tw-border-neutralVariant-30"
     :class="[
       settingState === value &&
         'tw-border-secondary-90 tw-bg-secondary-90 tw-text-secondary-30 dark:tw-border-secondary-30 dark:tw-bg-secondary-30 dark:tw-text-secondary-90',
     ]"
+    @click.prevent="handleClick"
   >
     <div
       v-show="settingState !== value"
@@ -16,7 +16,7 @@
       <slot />
     </div>
     <div>
-      <small class="tw-text-xs tw-font-medium" v-if="description">
+      <small v-if="description" class="tw-text-xs tw-font-medium">
         {{ description }}
       </small>
     </div>

components/settings/SettingsPwa.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="tw-rounded-xl tw-bg-neutral-90 tw-p-4 dark:tw-bg-neutral-22"
     v-if="canInstall"
+    class="tw-rounded-xl tw-bg-neutral-90 tw-p-4 dark:tw-bg-neutral-22"
   >
     <h3 class="tw-font-medium">{{ $t('title') }}</h3>
     <p class="!tw-mb-0 tw-text-sm">

components/settings/TableColumns.vue

@@ -38,15 +38,15 @@
     </draggable>
     <div class="tw-mt-2 tw-flex tw-flex-wrap tw-gap-2">
       <TwChip
-        :icon="mdiTableColumnPlusAfter"
         v-if="visibleColumns.length !== availableColumns.length"
+        :icon="mdiTableColumnPlusAfter"
         @click.native="addAll"
       >
         {{ $t('addAll') }}
       </TwChip>
       <TwChip
-        :icon="mdiTableRefresh"
         v-if="!isCurrentlyDefault"
+        :icon="mdiTableRefresh"
         @click.native="resetToDefault"
       >
         {{ $t('resetToDefault') }}

components/tw/BasicDialog.vue

@@ -2,7 +2,7 @@
   <dialog
     ref="dialog"
     :data-state="state"
-    class="tw-mx-4 tw-my-auto tw-min-w-[calc(100vw-2rem)] tw-max-w-[35rem] tw-rounded-[1.75rem] tw-border-none tw-bg-neutral-99 tw-p-6 tw-text-neutralVariant-30 backdrop:tw-bg-black/75 data-[state=closing]:tw-animate-dialogClose data-[state=open]:tw-animate-dialogOpen data-[state=closing]:backdrop:tw-animate-scrimClose data-[state=open]:backdrop:tw-animate-scrimEnter dark:tw-bg-neutral-10 dark:tw-text-neutralVariant-80 md:tw-mx-auto md:tw-min-w-[17.5rem]"
+    class="tw-mx-4 tw-my-auto tw-min-w-[calc(100vw-2rem)] tw-max-w-[35rem] tw-rounded-[1.75rem] tw-border-none tw-bg-neutral-99 tw-p-6 tw-text-neutralVariant-30 backdrop:tw-bg-black/75 data-[state=closing]:tw-animate-dialogClose data-[state=open]:tw-animate-dialogOpen data-[state=closing]:backdrop:tw-animate-scrimClose data-[state=open]:backdrop:tw-animate-scrimEnter md:tw-mx-auto md:tw-min-w-[17.5rem] dark:tw-bg-neutral-10 dark:tw-text-neutralVariant-80"
   >
     <form @submit.prevent="requestClose">
       <div

components/tw/Chip.vue

@@ -7,7 +7,7 @@
     <div
       class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-lg tw-bg-neutralVariant-30 tw-bg-opacity-0 tw-transition-colors group-hover:tw-bg-opacity-8 group-focus:tw-bg-opacity-10 dark:tw-bg-neutralVariant-80 dark:tw-bg-opacity-0"
     ></div>
-    <TwIcon :path="icon" v-if="icon" class="!tw-h-4.5 !tw-w-4.5" />
+    <TwIcon v-if="icon" :path="icon" class="!tw-h-4.5 !tw-w-4.5" />
     <span
       class="tw-text-sm tw-font-medium tw-text-neutralVariant-30 dark:tw-text-neutralVariant-80"
     >

components/tw/ChoiceCard.vue

@@ -1,7 +1,7 @@
 <template>
   <!--  TODO: Improve accessibility-->
   <button
-    class="tw-relative tw-min-w-[18rem] tw-basis-1/3 tw-rounded-xl tw-border tw-border-solid tw-border-neutralVariant-50 tw-p-4 tw-text-left tw-transition-colors tw-duration-200 tw-ease-emphasized-accelerate hover:tw-border-primary-90 hover:tw-bg-primary-90 hover:tw-text-primary-10 dark:tw-border-neutralVariant-60 dark:hover:tw-border-primary-30 dark:hover:tw-bg-primary-30 dark:hover:tw-text-primary-90 md:tw-aspect-square md:tw-max-w-16"
+    class="tw-relative tw-min-w-[18rem] tw-basis-1/3 tw-rounded-xl tw-border tw-border-solid tw-border-neutralVariant-50 tw-p-4 tw-text-left tw-transition-colors tw-duration-200 tw-ease-emphasized-accelerate hover:tw-border-primary-90 hover:tw-bg-primary-90 hover:tw-text-primary-10 md:tw-aspect-square md:tw-max-w-16 dark:tw-border-neutralVariant-60 dark:hover:tw-border-primary-30 dark:hover:tw-bg-primary-30 dark:hover:tw-text-primary-90"
     @click="$emit('click')"
   >
     <b class="text-[2rem] tw-font-medium tw-leading-10 tw-tracking-normal">
@@ -11,7 +11,7 @@
     <slot />
     <TwIcon
       :path="icon"
-      class="tw-absolute tw-right-4 tw-top-4 !tw-h-8 !tw-w-8 tw-text-primary-40 dark:tw-text-primary-80 md:tw-h-8 md:tw-w-8"
+      class="tw-absolute tw-right-4 tw-top-4 !tw-h-8 !tw-w-8 tw-text-primary-40 md:tw-h-8 md:tw-w-8 dark:tw-text-primary-80"
     />
   </button>
 </template>

components/tw/Link.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-50 tw-px-2 tw-py-1 !tw-text-neutral-10 tw-no-underline dark:tw-border-neutralVariant-60 dark:!tw-text-neutral-90 xl:tw-px-4 xl:tw-py-2"
+    class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-50 tw-px-2 tw-py-1 !tw-text-neutral-10 tw-no-underline xl:tw-px-4 xl:tw-py-2 dark:tw-border-neutralVariant-60 dark:!tw-text-neutral-90"
     :title="$t('openLink')"
     :href="generatedUrl"
     target="_blank"

components/tw/NavigationBar.vue

@@ -1,9 +1,10 @@
 <template>
   <nav
-    class="tw-fixed tw-bottom-0 tw-z-10 tw-w-full tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider dark:tw-bg-neutral-10 md:tw-left-0 md:tw-top-0 md:tw-mt-16 md:tw-hidden md:tw-h-full md:tw-w-20"
+    :aria-label="$t('app.tabHome') || 'Bottom Navigation'"
+    class="tw-fixed tw-bottom-0 tw-z-10 tw-w-full tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider md:tw-left-0 md:tw-top-0 md:tw-mt-16 md:tw-hidden md:tw-h-full md:tw-w-20 dark:tw-bg-neutral-10"
   >
     <ul
-      class="tw-flex tw-list-none tw-items-center tw-justify-around tw-gap-x-2 tw-bg-primary-40/12 tw-py-1 !tw-pl-0 dark:tw-bg-primary-80/12 md:tw-h-full md:tw-flex-col md:tw-justify-center md:tw-gap-y-3 md:tw-py-0"
+      class="tw-flex tw-list-none tw-items-center tw-justify-around tw-gap-x-2 tw-bg-primary-40/12 tw-py-1 !tw-pl-0 md:tw-h-full md:tw-flex-col md:tw-justify-center md:tw-gap-y-3 md:tw-py-0 dark:tw-bg-primary-80/12"
     >
       <TwNavigationBarButton
         :to="localePath(`/regions/${region}/`)"

components/tw/NavigationRail.vue

@@ -1,13 +1,15 @@
 <template>
   <nav
-    class="tw-fixed tw-inset-y-0 tw-left-0 tw-z-30 tw-hidden tw-h-full tw-w-20 tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider dark:tw-bg-neutral-10 md:tw-block"
+    aria-label="Main Navigation"
+    class="tw-fixed tw-inset-y-0 tw-left-0 tw-z-30 tw-hidden tw-h-full tw-w-20 tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider md:tw-block dark:tw-bg-neutral-10"
   >
     <ul
       class="tw-flex tw-h-full tw-list-none tw-flex-col tw-items-center tw-gap-y-3 tw-bg-primary-40/25 tw-py-4 !tw-pl-0 dark:tw-bg-primary-80/12"
     >
       <NuxtLink
         class="tw-group tw-relative -tw-m-2 tw-my-auto tw-h-14 tw-p-2 !tw-text-primary-40 tw-no-underline focus:tw-outline-none dark:!tw-text-white"
         :to="localePath('/')"
+        :aria-label="$t('app.tabHome')"
       >
         <div
           class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-full tw-bg-white tw-bg-opacity-0 tw-transition-colors tw-duration-200 group-hover:tw-bg-opacity-8 group-focus:tw-bg-opacity-12 dark:tw-bg-primary-20 dark:tw-opacity-0"
@@ -16,6 +18,7 @@
           viewBox="0 0 295.01 403.72"
           xmlns="http://www.w3.org/2000/svg"
           class="tw-h-8 tw-fill-current"
+          aria-hidden="true"
         >
           <path
             d="m147.51 1.875c-80.34 0-145.63 65.291-145.63 145.63 0 84.709 87.863 198.79 126.94 245.63 9.708 11.651 27.428 11.651 37.137 0 39.32-46.845 127.18-160.92 127.18-245.63 0-80.34-65.291-145.63-145.63-145.63zm0 70.631c34.895 0 63.158 3.9481 63.158 31.58v78.945c0 6.948-3.0785 13.185-7.8945 17.527v10.105c0 6.553-5.3678 11.842-11.842 11.842-6.553 0-11.842-5.3678-11.842-11.842v-3.9473h-63.158v3.9473a11.826 11.826 0 0 1-11.842 11.842 11.826 11.826 0 0 1-11.844-11.842v-10.105c-4.816-4.342-7.8945-10.579-7.8945-17.527v-78.945c0-27.632 28.263-31.58 63.158-31.58zm-47.367 31.58v39.473h94.734v-39.473h-94.734zm11.842 63.156a11.826 11.826 0 0 0-11.842 11.844 11.826 11.826 0 0 0 11.842 11.842c6.552 0 11.842-5.2888 11.842-11.842a11.826 11.826 0 0 0-11.842-11.844zm71.051 0c-6.552 0-11.842 5.2908-11.842 11.844a11.826 11.826 0 0 0 11.842 11.842 11.826 11.826 0 0 0 11.842-11.842 11.826 11.826 0 0 0-11.842-11.844z"
@@ -68,13 +71,24 @@
           <span class="tw-hidden 2xl:tw-inline">xl</span>
         </span>
       </TwNavigationBarButton>
-      <TwStandardIconButton v-if="dataIsLoaded" @click="openAlerts()">
+      <TwStandardIconButton
+        v-if="dataIsLoaded"
+        :aria-label="$t('app.tabAlerts') || 'Alerts'"
+        @click="openAlerts()"
+      >
         <TwIcon :path="mdiBell" />
       </TwStandardIconButton>
-      <TwStandardIconButton v-if="dataIsLoaded" @click="openRegionSwitcher()">
+      <TwStandardIconButton
+        v-if="dataIsLoaded"
+        :aria-label="$t('changeRegion') || 'Change Region'"
+        @click="openRegionSwitcher()"
+      >
         <TwIcon :path="mdiCity" />
       </TwStandardIconButton>
-      <TwStandardIconButton @click="openSettings()">
+      <TwStandardIconButton
+        :aria-label="$t('app.tabSettings') || 'Settings'"
+        @click="openSettings()"
+      >
         <TwIcon :path="mdiCog" />
       </TwStandardIconButton>
     </ul>

components/tw/RegionSwitcher.vue

@@ -16,14 +16,14 @@
         :key="region.slug"
         :to="localePath(`/regions/${region.slug}`)"
         tag="button"
-        class="tw-group tw-relative tw-flex tw-aspect-square tw-shrink-0 tw-flex-col tw-items-start tw-justify-end tw-rounded-[1.75rem] tw-bg-cover tw-bg-center tw-bg-no-repeat tw-p-4 tw-text-left tw-text-neutral-98 tw-no-underline tw-transition-[flex-shrink] tw-duration-300 tw-ease-standard-effects-slow focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-40 disabled:tw-shrink disabled:tw-justify-between dark:focus:tw-outline-secondary-80 md:tw-aspect-auto md:tw-h-100 md:tw-w-60"
+        class="tw-group tw-relative tw-flex tw-aspect-square tw-shrink-0 tw-flex-col tw-items-start tw-justify-end tw-rounded-[1.75rem] tw-bg-cover tw-bg-center tw-bg-no-repeat tw-p-4 tw-text-left tw-text-neutral-98 tw-no-underline tw-transition-[flex-shrink] tw-duration-300 tw-ease-standard-effects-slow focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-40 disabled:tw-shrink disabled:tw-justify-between md:tw-aspect-auto md:tw-h-100 md:tw-w-60 dark:focus:tw-outline-secondary-80"
         :style="{
           backgroundImage: `url(${backendHost}/storage/content/regions/${region.image})`,
         }"
         :disabled="region.slug === currentRegion"
       >
         <div
-          class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-[1.75rem] tw-bg-gradient-to-b tw-from-primary-40/75 tw-to-primary-40/75 tw-transition-colors tw-duration-150 tw-ease-standard-effects-fast group-hover:tw-bg-neutral-10/8 group-focus:tw-bg-neutral-10/10 group-disabled:tw-bg-neutral-98/38 dark:tw-from-primary-30/75 dark:tw-to-primary-30/75 md:tw-from-transparent md:tw-via-transparent md:tw-to-primary-40/90 dark:md:tw-to-primary-30/90"
+          class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-[1.75rem] tw-bg-gradient-to-b tw-from-primary-40/75 tw-to-primary-40/75 tw-transition-colors tw-duration-150 tw-ease-standard-effects-fast group-hover:tw-bg-neutral-10/8 group-focus:tw-bg-neutral-10/10 group-disabled:tw-bg-neutral-98/38 md:tw-from-transparent md:tw-via-transparent md:tw-to-primary-40/90 dark:tw-from-primary-30/75 dark:tw-to-primary-30/75 dark:md:tw-to-primary-30/90"
         ></div>
         <div
           v-if="region.slug === currentRegion"

components/tw/SideSheet.vue

@@ -8,14 +8,14 @@
     leave-to-class="*:-tw-translate-x-full !tw-bg-opacity-0"
   >
     <div
-      class="tw-fixed tw-inset-0 tw-z-20 tw-h-screen tw-w-screen tw-bg-neutralVariant-20 tw-bg-opacity-32 tw-transition-colors tw-duration-300 tw-ease-standard-effects-slow"
       v-if="isActive"
+      class="tw-fixed tw-inset-0 tw-z-20 tw-h-screen tw-w-screen tw-bg-neutralVariant-20 tw-bg-opacity-32 tw-transition-colors tw-duration-300 tw-ease-standard-effects-slow"
     >
       <section
-        class="tw-fixed tw-inset-x-0 tw-inset-y-0 tw-z-20 tw-h-full tw-overflow-y-auto tw-bg-neutral-96 tw-transition-transform tw-duration-500 tw-ease-standard-spatial dark:tw-bg-neutral-10 md:tw-left-20 md:tw-w-1/2 md:tw-max-w-100 md:tw-rounded-r-2xl md:tw-shadow-lg"
+        class="tw-fixed tw-inset-x-0 tw-inset-y-0 tw-z-20 tw-h-full tw-overflow-y-auto tw-bg-neutral-96 tw-transition-transform tw-duration-500 tw-ease-standard-spatial md:tw-left-20 md:tw-w-1/2 md:tw-max-w-100 md:tw-rounded-r-2xl md:tw-shadow-lg dark:tw-bg-neutral-10"
       >
         <div
-          class="tw-fixed tw-z-30 tw-flex tw-w-full tw-items-center tw-gap-x-3 tw-bg-neutral-96 tw-p-4 dark:tw-bg-neutral-10 md:tw-max-w-100 md:tw-rounded-tr-2xl"
+          class="tw-fixed tw-z-30 tw-flex tw-w-full tw-items-center tw-gap-x-3 tw-bg-neutral-96 tw-p-4 md:tw-max-w-100 md:tw-rounded-tr-2xl dark:tw-bg-neutral-10"
         >
           <TwStandardIconButton v-if="showBackButton" @click="$emit('back')">
             <TwIcon :path="mdiArrowLeft" />
@@ -29,8 +29,8 @@
         </div>
         <div class="tw-min-h-full tw-px-4 tw-pb-4">
           <div
-            class="tw-flex tw-w-full tw-items-center tw-justify-center tw-pt-20"
             v-if="isLoading"
+            class="tw-flex tw-w-full tw-items-center tw-justify-center tw-pt-20"
           >
             <TwIcon
               :path="mdiLoading"
@@ -48,11 +48,6 @@
 import { mdiArrowLeft, mdiClose, mdiLoading } from '@mdi/js'
 
 export default {
-  data: () => ({
-    mdiArrowLeft,
-    mdiClose,
-    mdiLoading,
-  }),
   props: {
     showBackButton: {
       type: Boolean,
@@ -73,5 +68,10 @@ export default {
       default: false,
     },
   },
+  data: () => ({
+    mdiArrowLeft,
+    mdiClose,
+    mdiLoading,
+  }),
 }
 </script>

components/tw/Switch.vue

@@ -6,8 +6,8 @@
   >
     <div class="tw-relative">
       <input
-        type="checkbox"
         :id="id"
+        type="checkbox"
         class="tw-peer tw-sr-only"
         :checked="value"
         :disabled="disabled"

components/tw/TopAppBar.vue

@@ -1,9 +1,9 @@
 <template>
   <nav
-    class="tw-fixed tw-inset-x-0 tw-top-0 tw-z-20 tw-flex tw-h-16 tw-w-full tw-items-center tw-gap-x-4 tw-bg-primary-40 tw-px-4 dark:tw-bg-neutral-10 md:tw-hidden"
+    class="tw-fixed tw-inset-x-0 tw-top-0 tw-z-20 tw-flex tw-h-16 tw-w-full tw-items-center tw-gap-x-4 tw-bg-primary-40 tw-px-4 md:tw-hidden dark:tw-bg-neutral-10"
   >
     <NuxtLink
-      class="tw-group tw-relative -tw-mx-2 -tw-my-2 tw-flex tw-items-center tw-gap-4 tw-px-2 tw-py-2 !tw-text-white tw-no-underline focus:tw-outline-none dark:!tw-text-neutral-90 md:-tw-mr-4 md:tw-pr-4"
+      class="tw-group tw-relative -tw-mx-2 -tw-my-2 tw-flex tw-items-center tw-gap-4 tw-px-2 tw-py-2 !tw-text-white tw-no-underline focus:tw-outline-none md:-tw-mr-4 md:tw-pr-4 dark:!tw-text-neutral-90"
       :to="localePath('/')"
     >
       <div

components/tw/landing/FurtherBlock.vue

@@ -5,7 +5,7 @@
       {{ description }}
     </p>
     <a
-      class="tw-block tw-w-full tw-rounded-full tw-bg-primary-30 tw-p-2 tw-text-center tw-text-lg tw-leading-none !tw-text-white tw-no-underline hover:tw-underline hover:tw-decoration-2 hover:tw-underline-offset-8 focus:tw-underline focus:tw-decoration-2 focus:tw-underline-offset-8 focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-30 dark:focus:tw-outline-secondary-80 md:tw-max-w-[75%] md:tw-py-4"
+      class="tw-block tw-w-full tw-rounded-full tw-bg-primary-30 tw-p-2 tw-text-center tw-text-lg tw-leading-none !tw-text-white tw-no-underline hover:tw-underline hover:tw-decoration-2 hover:tw-underline-offset-8 focus:tw-underline focus:tw-decoration-2 focus:tw-underline-offset-8 focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-30 md:tw-max-w-[75%] md:tw-py-4 dark:focus:tw-outline-secondary-80"
       :href="`https://${subdomain}.transittracker.ca`"
       target="_blank"
     >

layouts/default.vue

@@ -9,6 +9,7 @@
       <TwTopAppBar />
       <TwNavigationRail />
       <main
+        role="main"
         class="tw-mb-16 tw-mt-16 tw-flex tw-max-w-full tw-shrink-0 tw-grow tw-basis-auto tw-p-0 md:tw-mb-0 md:tw-ml-20 md:tw-mt-0"
       >
         <div class="tw-relative tw-max-w-full tw-shrink tw-grow tw-basis-auto">

layouts/error.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tw-flex tw-min-h-screen tw-w-full tw-flex-col md:tw-flex-row">
     <div
-      class="tw-flex tw-min-h-[30%] tw-grow tw-items-center tw-justify-center tw-bg-gradient-to-br tw-from-error-80 tw-to-error-60 dark:tw-from-error-10 dark:tw-to-error-30 md:tw-min-h-full md:tw-min-w-[30%]"
+      class="tw-flex tw-min-h-[30%] tw-grow tw-items-center tw-justify-center tw-bg-gradient-to-br tw-from-error-80 tw-to-error-60 md:tw-min-h-full md:tw-min-w-[30%] dark:tw-from-error-10 dark:tw-to-error-30"
     >
       <TwIcon
         class="!tw-h-10 !tw-w-10 tw-py-8 tw-text-white md:!tw-h-28 md:!tw-w-28"