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/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>

template/i18n/locales/de.json

@@ -1,14 +1,16 @@
 {
     "footer": {
         "message": "Veröffentlicht unter der MIT License.",
-        "github": "Auf GitHub ansehen"
+        "github": "Auf GitHub ansehen",
+        "country": "Land und Währung auswählen"
     },
     "cart": {
         "title": "Warenkorb",
         "description": "Überprüfen Sie Ihre ausgewählten Artikel",
         "empty": "Ihr Warenkorb ist leer.",
         "subtotal": "Summe",
         "checkout": "Zur Kasse",
+        "open": "Warenkorb öffnen",
         "toast": {
             "add": "Artikel zum Warenkorb hinzugefügt.",
             "update": "Ihr Warenkorb wurde aktualisiert.",
@@ -44,6 +46,7 @@
     "product": {
         "add": "Hinzufügen",
         "choose": "Auswählen",
+        "view": "Produkt ansehen",
         "recommendations": "Das könnte Ihnen auch gefallen"
     },
     "collection": {

template/i18n/locales/en.json

@@ -1,14 +1,16 @@
 {
     "footer": {
         "message": "Published under the MIT License.",
-        "github": "View on GitHub"
+        "github": "View on GitHub",
+        "country": "Select country and currency"
     },
     "cart": {
         "title": "Cart",
         "description": "Review your selected items",
         "empty": "Your cart is empty.",
         "subtotal": "Subtotal",
         "checkout": "Checkout",
+        "open": "Open Cart",
         "toast": {
             "add": "Item added to cart.",
             "update": "Cart updated.",
@@ -44,6 +46,7 @@
     "product": {
         "add": "Add",
         "choose": "Choose",
+        "view": "View product",
         "recommendations": "You may also like"
     },
     "collection": {