From 34a1f62813e58410d8e7aecc7e772c1ad8be8ede Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Mon, 16 Dec 2024 09:32:13 +0100
Subject: [PATCH] improve accessibility

---
 components/app/footer.vue  |  2 ++
 components/app/navbar.vue  |  9 +++++++--
 components/recipe/card.vue |  6 +++++-
 nuxt.config.ts             |  5 +++--
 pages/index.vue            | 16 ++--------------
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/app/footer.vue b/components/app/footer.vue
index 3107bce..bf7fcd2 100644
--- a/components/app/footer.vue
+++ b/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"
diff --git a/components/app/navbar.vue b/components/app/navbar.vue
index 7bfb144..5a5e638 100644
--- a/components/app/navbar.vue
+++ b/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>
diff --git a/components/recipe/card.vue b/components/recipe/card.vue
index 06cfdbe..627c9fd 100644
--- a/components/recipe/card.vue
+++ b/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">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4b65173..94cd192 100644
--- a/nuxt.config.ts
+++ b/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",
-});
\ No newline at end of file
+});
diff --git a/pages/index.vue b/pages/index.vue
index 6ef1a19..a6a8915 100644
--- a/pages/index.vue
+++ b/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"
       />