chore(template): a11y optimization

Signed-off-by: Frederik Bußmann <frederik@bussmann.io>

Author: freb97

template/app/components/Footer.vue

@@ -95,7 +95,7 @@ const items = computed<NavigationMenuItem[]>(() => [
 
         <template #left>
             <p class="text-muted text-sm">
-                Published under the MIT License.
+                {{ $t('footer.message') }}
             </p>
         </template>
 
@@ -120,6 +120,7 @@ const items = computed<NavigationMenuItem[]>(() => [
                 :default-value="locale"
                 icon="i-lucide-globe"
                 variant="ghost"
+                :aria-label="$t('footer.country')"
                 @update:model-value="async value => switchLocale(value)"
             />
         </template>

template/app/components/Logo.vue

@@ -26,7 +26,7 @@ const { data: logo } = await useStorefrontData('logo', `#graphql
     >
         <NuxtImg
             :src="logo?.url"
-            :alt="logo?.altText || 'Nuxt Shopify'"
+            :alt="logo?.altText || 'Nuxt Shopify Store Logo'"
             provider="shopify"
             class="h-5 w-auto hue-rotate-300"
             width="50"

template/app/components/cart/Add.vue

@@ -22,6 +22,7 @@ const addToCart = async () => {
         variant="ghost"
         trailing-icon="i-lucide-shopping-bag"
         :label="$t('product.add')"
+        :aria-label="$t('product.choose')"
         :ui="{
             trailingIcon: 'size-5',
             label: [

template/app/components/cart/Choose.vue

@@ -24,6 +24,7 @@ const open = ref(false)
             variant="ghost"
             trailing-icon="i-lucide-shopping-bag"
             :label="$t('product.choose')"
+            :aria-label="$t('product.choose')"
             :ui="{
                 trailingIcon: 'size-5',
                 label: [

template/app/components/cart/LineItem.vue

@@ -26,7 +26,10 @@ watch(state, state => update(props.line.id, state.quantity))
 
 <template>
     <UCard :ui="{ body: 'relative flex justify-between gap-8' }">
-        <NuxtLink :to="to">
+        <NuxtLink
+            :to="to"
+            :aria-label="`${$t('product.view')}: '${variant.product.title}'`"
+        >
             <NuxtImg
                 provider="shopify"
                 :src="variant.image?.url"

template/app/components/cart/Modal.vue

@@ -17,6 +17,11 @@ watch(() => route.path, () => open.value = false)
                 icon="i-lucide-shopping-cart"
                 variant="ghost"
                 color="neutral"
+                :label="$t('cart.open')"
+                :ui="{
+                    label: 'sr-only',
+                    base: 'px-1.5 lg:px-2',
+                }"
             />
 
             <ClientOnly>

template/app/components/collection/Products.vue

@@ -128,7 +128,7 @@ watch(() => collection.value?.products.pageInfo, async () => await nextTick().th
                     :key="product.id"
                     :product="product"
                     class="pb-14 border-b border-b-default"
-                    :loading="index === 0 ? 'eager' : 'lazy'"
+                    :loading="index < 3 ? 'eager' : 'lazy'"
                     carousel
                 />
             </div>

template/app/components/collection/Slider.vue

@@ -85,7 +85,7 @@ const { data: products } = await useStorefrontData(key, `#graphql
     >
         <ProductCard
             :product="product"
-            :loading="index === 0 ? props.loading : 'lazy'"
+            :loading="index < 3 ? props.loading : 'lazy'"
         />
     </UCarousel>
 </template>

template/app/components/product/Card.vue

@@ -37,26 +37,33 @@ const variant = ref(variants.value[0])
                 arrows
                 loop
             >
-                <NuxtLink :to="url">
+                <NuxtLink
+                    :to="url"
+                    :aria-label="`${$t('product.view')}: '${props.product.title}'`"
+                >
                     <ProductImage
                         :image="item"
                         :loading="index === 0 ? props.loading : 'lazy'"
+                        :title="`${props.product.title}${index !== 0 ? ` (${index})` : ''}`"
                     />
                 </NuxtLink>
             </UCarousel>
 
             <NuxtLink
                 v-else
                 :to="url"
+                :aria-label="`${$t('product.view')}: '${props.product.title}'`"
             >
                 <ProductImage
                     :image="images?.[0] ?? undefined"
                     :loading="props.loading"
+                    :title="props.product.title"
                 />
 
                 <ProductImage
                     v-if="images?.[1]"
                     :image="images[1]"
+                    :title="`${props.product.title} (1)`"
                     class="hidden absolute inset-0 bg-default group-hover:block"
                 />
             </NuxtLink>

template/app/components/product/Gallery.vue

@@ -45,12 +45,14 @@ watch(() => props.selectedVariant, () => carousel.value?.emblaApi?.scrollTo(0))
             <ProductImage
                 :image="item"
                 :loading="index === 0 ? 'eager' : 'lazy'"
+                :title="`${props.product.title}${index !== 0 ? ` (${index})` : ''}`"
             />
         </UCarousel>
 
         <ProductImage
             v-else
             :image="sliderImages[0]"
+            :title="props.product.title"
             class="mb-6 lg:mb-8"
             loading="eager"
         />
@@ -60,9 +62,10 @@ watch(() => props.selectedVariant, () => carousel.value?.emblaApi?.scrollTo(0))
             class="hidden lg:grid grid-cols-12 gap-8 mb-6 lg:mb-8"
         >
             <ProductImage
-                v-for="image in images"
+                v-for="(image, index) in images"
                 :key="image.url"
                 :image="image ?? undefined"
+                :title="`${props.product.title} Thumbnail ${index !== 0 ? ` (${index})` : ''}`"
                 class="col-span-6"
             />
         </div>