feat(vue-demo-store): a11y improvements

.changeset/good-countries-allow.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": patch
+"@shopware-pwa/cms-base": patch
+---
+
+Alignment to a11y standards

apps/e2e-tests/tests/checkForSeoUrl.spec.ts

@@ -25,7 +25,7 @@ test.describe.only("Check for seo-url requests", () => {
     await page.waitForLoadState("networkidle");
     await expect(SeoUrlRequest).toBe(false);
     await page
-      .getByRole("link", { name: "Summer Trends", exact: true })
+      .getByRole("menuitem", { name: "Summer Trends", exact: true })
       .click();
     await page.waitForLoadState("networkidle");
     await expect(SeoUrlRequest).toBe(false);

packages/cms-base/components/SwProductCard.vue

@@ -212,8 +212,8 @@ const srcPath = computed(() => {
           @click="addToCartProxy"
           class="justify-center w-full md:w-auto my-8 md-m-0 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition duration-400 md:hover:scale-120 flex"
           :class="{
-            'text-white bg-blue-500 hover:bg-blue-600': !isInCart,
-            'text-gray-500 bg-gray-100': isInCart,
+            'text-white bg-blue-600 hover:bg-blue-700': !isInCart,
+            'text-gray-600 bg-gray-100': isInCart,
           }"
           data-testid="add-to-cart-button"
         >

packages/cms-base/components/SwProductListingFilters.vue

@@ -177,7 +177,7 @@ onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
 </script>
 <template>
   <div class="bg-white">
-    <main class="mx-auto m-0 px-5">
+    <div class="mx-auto m-0 px-5">
       <div
         class="relative lg:flex lg:items-baseline lg:justify-between pt-6 pb-6 border-b border-gray-200"
       >
@@ -230,7 +230,7 @@ onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
                       ? 'font-medium text-gray-900'
                       : 'text-gray-500',
                   ]"
-                  class="block px-4 py-2 text-sm"
+                  class="block px-4 py-2 text-sm bg-transparent"
                   role="menuitem"
                   tabindex="-1"
                 >
@@ -268,6 +268,6 @@ onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
           </button>
         </div>
       </div>
-    </main>
+    </div>
   </div>
 </template>

packages/cms-base/components/SwSlider.vue

@@ -279,7 +279,7 @@ defineExpose({
     </div>
     <div :class="{ hidden: navigationArrowsValue === 'none' }">
       <button
-        aria-label="Chevron left"
+        aria-label="Previous slide"
         :class="{
           'absolute bg-transparent top-1/2 left-0 transform -translate-y-1/2 py-4': true,
           'transition bg-white/20 hover:bg-white/50':
@@ -290,7 +290,7 @@ defineExpose({
         <div class="w-15 h-15 i-carbon-chevron-left"></div>
       </button>
       <button
-        aria-label="Chevron right"
+        aria-label="Next slide"
         :class="{
           'absolute bg-transparent top-1/2 right-0 transform -translate-y-1/2 py-4': true,
           'transition bg-white/20 hover:bg-white/50':

packages/cms-base/components/listing-filters/SwFilterProperties.vue

@@ -19,7 +19,7 @@ const toggle = () => {
 
 <template>
   <div class="border-b border-gray-200 py-6 px-5">
-    <h3 class="-my-3 flow-root">
+    <h2 class="-my-3 flow-root">
       <button
         type="button"
         class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
@@ -38,10 +38,11 @@ const toggle = () => {
           />
         </span>
       </button>
-    </h3>
+    </h2>
     <transition name="fade" mode="out-in">
-      <div v-show="isFilterVisible" id="filter-section-0" class="pt-6">
-        <div class="space-y-4">
+      <div v-show="isFilterVisible" :id="filter.code" class="pt-6">
+        <fieldset class="space-y-4">
+          <legend class="sr-only">{{ filter.name }}</legend>
           <div
             v-for="option in filter.options || filter.entities"
             :key="`${option.id}-${selectedOptionIds?.includes(option.id)}`"
@@ -55,6 +56,7 @@ const toggle = () => {
               :checked="selectedOptionIds?.includes(option.id)"
               :name="filter.name"
               :value="option.name"
+              :aria-label="`${option.name} filter`"
               type="checkbox"
               class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
             />
@@ -80,11 +82,14 @@ const toggle = () => {
                 'border-blue border-2': selectedOptionIds?.includes(option.id),
               }"
             />
-            <label for="filter-color-0" class="ml-3 text-gray-600">
+            <label
+              :for="`filter-mobile-${filter.code}-${option.id}`"
+              class="ml-3 text-gray-600"
+            >
               {{ getTranslatedProperty(option, "name") }}
             </label>
           </div>
-        </div>
+        </fieldset>
       </div>
     </transition>
   </div>

packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue

@@ -151,6 +151,7 @@ function next() {
         v-if="mediaGallery.length > slidesToShow"
         class="disabled:opacity-10 p-1"
         @click="previous"
+        aria-label="Previous image"
       >
         <div
           class="h-7 w-7"
@@ -160,6 +161,7 @@ function next() {
           }"
         />
       </button>
+      <span class="sr-only">Previous image</span>
       <div
         class="overflow-hidden -my-2.5"
         ref="imageThumbs"
@@ -203,7 +205,9 @@ function next() {
         v-if="mediaGallery.length > slidesToShow"
         class="disabled:opacity-10 p-1"
         @click="next"
+        aria-label="Next image"
       >
+        <span class="sr-only">Next image</span>
         <div
           class="h-7 w-7"
           :class="{

templates/vue-demo-store/components/LanguageSwitcher.vue

@@ -17,6 +17,7 @@ const onChangeHandler = async (option: Event) => {
 </script>
 <template>
   <select
+    aria-label="Select language"
     class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
     @change="onChangeHandler"
   >
@@ -25,6 +26,7 @@ const onChangeHandler = async (option: Event) => {
       :key="language.id"
       :value="language.id"
       :selected="languageIdChain === language.id"
+      :label="getLanguageName(language)"
     >
       {{ getLanguageName(language) }}
     </option>

templates/vue-demo-store/components/account/AccountAddressCard.vue

@@ -86,6 +86,7 @@ const addressSaved = () => {
       </h5>
       <button
         v-if="canEdit"
+        title="Open address editor"
         class="cursor-pointer i-carbon-edit text-xl inline-block"
         data-testid="address-edit"
         @click.prevent="addAddressModalController.open"

templates/vue-demo-store/components/account/AccountChangePassword.vue

@@ -172,7 +172,7 @@ const invokeChange = async (): Promise<void> => {
             v-model="state.password.newPasswordConfirm"
             name="confirm-password"
             type="password"
-            autocomplete="repeat-password"
+            autocomplete="off"
             required
             class="appearance-none rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-brand-primary focus:border-brand-primary focus:z-10 sm:text-sm"
             placeholder="••••••••"

templates/vue-demo-store/components/account/AccountLoginForm.vue

@@ -47,11 +47,19 @@ useFocus(emailImputElement, { initialValue: true });
 </script>
 <template>
   <div
+    id="modal-headline"
+    role="form"
+    title="Login form"
+    aria-label="Login form"
     class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
   >
     <div v-if="!isLoggedIn" class="max-w-md w-full space-y-8">
       <div>
-        <img class="mx-auto h-12 w-auto" src="/logo.svg" alt="Logo" />
+        <img
+          class="mx-auto h-12 w-auto"
+          src="/logo.svg"
+          alt="logo of the shop"
+        />
         <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
           {{ $t("account.signInLabel") }}
         </h2>

templates/vue-demo-store/components/account/AccountOrder.vue

@@ -26,15 +26,16 @@ export default {
 <template>
   <div class="border border-gray-200 mb-8 rounded">
     <AccountOrderSummary>
-      <div class="lg:col-span-2">
+      <div class="lg:col-span-2 text-gray-600">
         {{ order.orderNumber }}
       </div>
-      <div>{{ order.amountTotal }} {{ currency?.symbol }}</div>
-      <div>{{ orderDate }}</div>
-      <div>{{ order.stateMachineState.name }}</div>
+      <div class="text-gray-600">
+        {{ order.amountTotal }} {{ currency?.symbol }}
+      </div>
+      <div class="text-gray-600">{{ orderDate }}</div>
+      <div class="text-gray-600">{{ order.stateMachineState.name }}</div>
       <div
         class="hidden sm:block justify-self-end text-brand-dark cursor-pointer"
-        :aria-expanded="isExpand"
         @click="toggleView"
       >
         {{ !isExpand ? t("account.view") : t("account.hide") }}

templates/vue-demo-store/components/account/AccountPersonalData.vue

@@ -160,7 +160,7 @@ onBeforeMount(async () => {
             v-model="state.firstName"
             name="firstname"
             type="text"
-            autocomplete="firstname"
+            autocomplete="on"
             required
             class="appearance-none rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-brand-primary focus:border-brand-primary focus:z-10 sm:text-sm"
             :placeholder="$t('form.firstNamePlaceholder')"
@@ -187,7 +187,7 @@ onBeforeMount(async () => {
             v-model="state.lastName"
             name="lastname"
             type="text"
-            autocomplete="lastname"
+            autocomplete="on"
             required
             class="appearance-none rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-brand-primary focus:border-brand-primary focus:z-10 sm:text-sm"
             :placeholder="$t('form.lastNamePlaceholder')"

templates/vue-demo-store/components/account/AccountResetPasswordForm.vue

@@ -104,7 +104,7 @@ const invokeReset = async (): Promise<void> => {
               v-model="state.password.newPasswordConfirm"
               name="confirm-password"
               type="password"
-              autocomplete="repeat-password"
+              autocomplete="off"
               required
               class="appearance-none rounded-none shadow-sm relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-brand-primary focus:border-brand-primary focus:z-10 sm:text-sm"
               :placeholder="$t('form.repeatPasswordPlaceholder')"

templates/vue-demo-store/components/checkout/CheckoutCartItem.vue

@@ -57,7 +57,7 @@ const removeCartItem = async () => {
   >
     <img
       :src="getSmallestThumbnailUrl(cartItem.cover)"
-      alt="Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt."
+      :alt="`${cartItem.label || cartItem.payload.name || ''} cart item`"
       class="h-full w-full object-cover object-center"
       data-testid="cart-product-image"
     />
@@ -106,6 +106,7 @@ const removeCartItem = async () => {
         :step="cartItem.quantityInformation?.purchaseSteps || 1"
         data-testid="cart-product-qty-select"
         name="quantity"
+        aria-label="Cart item quantity"
         class="w-18 mt-1 inline-block py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
       />
       <div class="flex">

templates/vue-demo-store/components/checkout/CheckoutSideCart.vue

@@ -10,7 +10,7 @@ const { formatLink } = useInternationalization(localePath);
 
 <template>
   <LayoutSidebar :controller="props.controller" side="right">
-    <div class="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
+    <aside class="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
       <div class="flex items-start justify-between">
         <h2
           id="slide-over-title"
@@ -51,9 +51,12 @@ const { formatLink } = useInternationalization(localePath);
           </div>
         </div>
       </div>
-    </div>
+    </aside>
 
-    <div class="border-t border-gray-200 py-6 px-4 sm:px-6">
+    <aside
+      aria-label="Side Cart Links"
+      class="border-t border-gray-200 py-6 px-4 sm:px-6"
+    >
       <div class="flex justify-between text-base font-medium text-gray-900">
         <p>Subtotal</p>
         <SharedPrice :value="totalPrice" data-testid="cart-subtotal" />
@@ -96,6 +99,6 @@ const { formatLink } = useInternationalization(localePath);
           </button>
         </p>
       </div>
-    </div>
+    </aside>
   </LayoutSidebar>
 </template>

templates/vue-demo-store/components/layout/LayoutCheckoutHeader.vue

@@ -4,7 +4,7 @@ const { formatLink } = useInternationalization(localePath);
 </script>
 
 <template>
-  <div class="relative bg-white">
+  <nav class="relative bg-white">
     <div class="mx-auto px-4 sm:px-6">
       <div
         class="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10"
@@ -15,7 +15,7 @@ const { formatLink } = useInternationalization(localePath);
             <img
               class="h-8 w-auto sm:h-10"
               src="/logo.svg"
-              alt="Logo"
+              alt="logo of the shop"
               width="40px"
               height="40px"
             />
@@ -24,5 +24,5 @@ const { formatLink } = useInternationalization(localePath);
         <AccountMenu />
       </div>
     </div>
-  </div>
+  </nav>
 </template>

templates/vue-demo-store/components/layout/LayoutFooter.vue

@@ -25,16 +25,20 @@ const gridColumns = computed<number>(() =>
         <div class="hidden md:block">
           <NuxtLink :to="formatLink(`/`)">
             <span class="sr-only">Shopware</span>
-            <img class="h-15 w-auto sm:h-15" src="/logo.svg" alt="Logo" />
+            <img
+              class="h-15 w-auto sm:h-15"
+              src="/logo.svg"
+              alt="logo of the shop"
+            />
           </NuxtLink>
         </div>
         <div
           v-for="navigationElement in navigationElements"
           :key="navigationElement.id"
         >
-          <h4 class="mb-5">
+          <h3 class="mb-5">
             {{ getTranslatedProperty(navigationElement, "name") }}
-          </h4>
+          </h3>
           <template v-if="navigationElement.childCount > 0">
             <ul class="list-none p-0 mb-5">
               <li

templates/vue-demo-store/components/layout/LayoutHeader.vue

@@ -8,7 +8,7 @@ const sidebarController = useModal();
 </script>
 
 <template>
-  <div class="relative bg-white">
+  <header class="relative bg-white" aria-label="top-navigation">
     <div class="mx-auto px-4 sm:px-6">
       <div class="flex items-center border-b-2 border-gray-100 py-6 space-x-4">
         <div class="flex justify-start items-center min-w-10 lg:min-w-12">
@@ -18,7 +18,7 @@ const sidebarController = useModal();
               <img
                 class="h-10 w-10 lg:h-12 lg:w-12"
                 src="/logo.svg"
-                alt="Logo"
+                alt="logo of the shop"
                 width="40px"
                 height="40px"
               />
@@ -50,7 +50,7 @@ const sidebarController = useModal();
               />
               <span
                 v-if="wishlistCount > 0"
-                class="text-3 font-sm text-white absolute bg-red-500 rounded-full min-w-5 min-h-5 top-0 right-0 leading-5"
+                class="text-3 font-sm text-white absolute bg-red-600 rounded-full min-w-5 min-h-5 top-0 right-0 leading-5"
               >
                 {{ wishlistCount }}
               </span>
@@ -60,7 +60,7 @@ const sidebarController = useModal();
           <div class="flex ml-4 flow-root lg:ml-6">
             <button
               class="group bg-transparent -m-2 p-2 flex items-center relative"
-              aria-label="cart"
+              aria-label="Mini cart"
               data-testid="cart-button"
               @click="sidebarController.open"
             >
@@ -70,7 +70,7 @@ const sidebarController = useModal();
               />
               <span
                 v-if="count > 0"
-                class="text-3 font-sm text-white absolute bg-blue rounded-full min-w-5 min-h-5 top-0 right-0 leading-5"
+                class="text-3 font-sm text-white absolute bg-blue-600 rounded-full min-w-5 min-h-5 top-0 right-0 leading-5"
               >
                 {{ count || "" }}
               </span>
@@ -83,5 +83,5 @@ const sidebarController = useModal();
         </div>
       </div>
     </div>
-  </div>
+  </header>
 </template>