improve accessibility

components/app/footer.vue

@@ -8,6 +8,7 @@
         to="https://github.com/rjNemo/meal_planner"
         :external="true"
         target="_blank"
+        aria-label="navigate to the source code on GitHub"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -25,6 +26,7 @@
         to="https://ruidy.nemausat.com"
         :external="true"
         target="_blank"
+        aria-label="navigate to my website"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"

components/app/navbar.vue

@@ -42,7 +42,12 @@ if (route.path === "/search") {
   <nav class="navbar bg-base-300">
     <div class="navbar-start">
       <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <div
+          tabindex="0"
+          role="button"
+          class="btn btn-ghost lg:hidden"
+          arial-label="Menu button"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5"
@@ -66,7 +71,7 @@ if (route.path === "/search") {
         </ul>
       </div>
       <nuxt-link to="/" class="btn btn-ghost text-xl">
-        <nuxt-img src="/logo192.png" width="50" />
+        <nuxt-img src="/logo192.png" width="50" alt="logo" />
         <span style="font-family: cursive"> Chefs </span>
       </nuxt-link>
     </div>

components/recipe/card.vue

@@ -20,7 +20,11 @@ defineProps<{
       />
     </figure>
     <div class="card-actions space-between">
-      <nuxt-link :to="videoUrl" target="_blank">
+      <nuxt-link
+        :to="videoUrl"
+        target="_blank"
+        aria-label="watch the recipe in video"
+      >
         <icon name="cib:youtube" color="red" />
       </nuxt-link>
       <div class="badge badge-secondary">

nuxt.config.ts

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: "Meal Planner",
+      htmlAttrs: { lang: "en" },
       meta: [
         { charset: "utf-8" },
         { name: "viewport", content: "width=device-width, initial-scale=1" },
@@ -23,7 +24,7 @@ export default defineNuxtConfig({
           content: "Meal Planner",
         },
       ],
-      link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
+      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
     },
     pageTransition: { name: "page", mode: "out-in" },
     layoutTransition: { name: "slide", mode: "out-in" },
@@ -60,4 +61,4 @@ export default defineNuxtConfig({
 
   ssr: true,
   compatibilityDate: "2024-12-13",
-});
+});

pages/index.vue

@@ -1,17 +1,4 @@
 <script setup lang="ts">
-useHead({
-  htmlAttrs: {
-    lang: "en",
-  },
-  link: [
-    {
-      rel: "icon",
-      type: "image/png",
-      href: "/favicon.png",
-    },
-  ],
-});
-
 const url = useRequestURL();
 useSeoMeta({
   title: `Mood2Food`,
@@ -32,7 +19,8 @@ useSeoMeta({
     <div class="hero-content flex-col lg:flex-row-reverse h-full">
       <nuxt-img
         src="/chef.svg"
-        class="max-w-sm h-[80vh] object-contain rounded-lg"
+        alt="Chef holding a knife"
+        class="max-w-sm h-[50vh] lg:h-[80vh] object-contain rounded-lg"
         :placeholder="[400, 800]"
         format="webp"
       />