From 9527532a311f18e069681f2db0fe25c0b94c4d94 Mon Sep 17 00:00:00 2001
From: 25Ericcheong <ericcheongkaikit@gmail.com>
Date: Sun, 5 May 2024 10:54:37 +0800
Subject: [PATCH] chore: Added alt text to all images throughot web app

---
 src/components/about-us.vue              | 1 +
 src/components/footer.vue                | 1 +
 src/components/header/main-header.vue    | 3 +++
 src/components/header/wrapper-header.vue | 6 +++++-
 src/components/our-mentions.vue          | 1 +
 src/components/product.vue               | 7 +++++++
 6 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/about-us.vue b/src/components/about-us.vue
index 73cfa03..19490a6 100644
--- a/src/components/about-us.vue
+++ b/src/components/about-us.vue
@@ -9,6 +9,7 @@ import { getImageUrl } from "../util/Image";
     <img
       class="w-full h-full lg:w-1/2"
       :src="getImageUrl('bingsu-about-us', 'about-us')"
+      alt="Owner carrying a tray containing a typical bingsu set at Binq"
     />
     <div
       class="flex flex-col justify-center items-center pt-10 lg:pt-0 pl-0 lg:pl-32 text-darkorangebq"
diff --git a/src/components/footer.vue b/src/components/footer.vue
index d706c91..84adead 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -98,6 +98,7 @@ const CURRENT_YEAR = new Date().getFullYear();
           <img
             class="w-[60%] h-full lg:h-1/4 xxl:h-1/2"
             src="../assets/logo/binq.png"
+            alt="Binq logo representing our store and brand"
           />
         </div>
       </div>
diff --git a/src/components/header/main-header.vue b/src/components/header/main-header.vue
index 0ee32c0..7d777c4 100644
--- a/src/components/header/main-header.vue
+++ b/src/components/header/main-header.vue
@@ -36,6 +36,7 @@ function openNewTab(url: string) {
         <img
           class="h-full w-full drop-shadow-2xl"
           src="../../assets/images/header/cheesey-bingsu.jpg"
+          alt="Binq homemade cheese oozing over bing su located at the centre of header for attention"
         />
       </div>
     </div>
@@ -80,6 +81,7 @@ function openNewTab(url: string) {
         <img
           class="block lg:hidden xl:block h-full w-full sm:w-1/12 xl:w-1/5 mt-5 sm:mt-0"
           src="../../assets/images/header/bingsu-in-store.jpg"
+          alt="Signage of Binq's store front that reads 'binq binq binq'"
         />
       </div>
       <div class="flex w-full xl:w-3/4 justify-center items-center">
@@ -100,6 +102,7 @@ function openNewTab(url: string) {
         <img
           class="lg:hidden xl:block w-full h-full sm:w-1/12 xl:w-1/5 mt-5 sm:mt-0"
           src="../../assets/images/header/bingsu.jpg"
+          alt="An innovate bingsu created at home at Binq"
         />
       </div>
     </div>
diff --git a/src/components/header/wrapper-header.vue b/src/components/header/wrapper-header.vue
index c8ede26..9366842 100644
--- a/src/components/header/wrapper-header.vue
+++ b/src/components/header/wrapper-header.vue
@@ -10,7 +10,11 @@ import MainHeader from "./main-header.vue";
     <div
       class="flex justify-center h-[64px] w-[80px] bg-creamwhitebq absolute top-0 right-0 m-5 rounded-full"
     >
-      <img class="p-5 h-full w-full" src="../../assets/logo/binq.png" />
+      <img
+        class="p-5 h-full w-full"
+        src="../../assets/logo/binq.png"
+        alt="Binq logo that signifies a bingsu dessert"
+      />
     </div>
   </header>
 </template>
diff --git a/src/components/our-mentions.vue b/src/components/our-mentions.vue
index 7507b89..6db1c59 100644
--- a/src/components/our-mentions.vue
+++ b/src/components/our-mentions.vue
@@ -89,6 +89,7 @@ onMounted(() => {
       <img
         class="h-fit w-full lg:w-3/4 p-0 lg:pl-40"
         :src="getImageUrl('bingsu-our-mentions', 'our-mentions')"
+        alt="A blurred background containing the owners of Binq and a tray of Bingsu on the main counter in the store"
       />
     </section>
     <section
diff --git a/src/components/product.vue b/src/components/product.vue
index a89bf33..eae9955 100644
--- a/src/components/product.vue
+++ b/src/components/product.vue
@@ -33,19 +33,23 @@ import { getImageUrl } from "../util/Image";
             :src="
               getImageUrl('more-prep-bing-product-intro', 'products', 'intro')
             "
+            alt="Shaving machine used to create our special bing su at Binq"
           />
           <img
             class="my-20 w-full md:w-4/5 h-1/4 xxl:my-40 self-center"
             :src="getImageUrl('topping-product-intro', 'products', 'intro')"
+            alt="Our famous side dishes used to complement our perfect bingsu"
           />
           <img
             class="w-full md:w-4/5 h-1/4 self-center"
             :src="getImageUrl('binq-store-product-intro', 'products', 'intro')"
+            alt="Store front of our main branch in Damansara that reads binq binq binq"
           />
         </div>
         <img
           :src="getImageUrl('bingsus-product-intro', 'products', 'intro')"
           class="h-1/3 rounded-full mb-32 lg:sticky lg:top-0"
+          alt="Consists of a variety of bingsu desserts which we have readily available"
         />
       </div>
     </section>
@@ -67,15 +71,18 @@ import { getImageUrl } from "../util/Image";
         <img
           class="w-full h-3/4 pt-12 self-center"
           :src="getImageUrl('watermelon-topping-product', 'products', 'detail')"
+          alt="Watermelon topping side dish which we have available at the store"
         />
         <img
           class="w-full h-3/4 pt-16 self-center"
           :src="getImageUrl('topping-product', 'products', 'detail')"
+          alt="Coated mochi topping side dish which we have available at the store"
         />
       </div>
       <img
         class="w-full h-3/4 lg:w-1/2 rounded-full pt-20 lg:pt-0"
         :src="getImageUrl('bingsu-set-product', 'products', 'detail')"
+        alt="Our best selling bingsu set at binq. Has 4 toppings and our best selling bingsu; Soybean flavoured bingsu"
       />
     </section>
   </div>