improve accessibility and clean up tailwind classes

lang/nl.json

@@ -12,10 +12,8 @@
     "Already logged in": "Al ingelogd",
     "Amount": "Bedrag",
     "An email is send with a password reset link if an account exists with the provided email address.": "Een e-mail is verzonden met een link om het wachtwoord te resetten, als er een account bestaat met het opgegeven e-mailadres.",
-    "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
-    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met je bestelling.",
     "Back to credentials": "Terug naar inloggegevens",
     "Back to dashboard": "Terug naar dashboard",
     "Back to login": "Terug naar inloggen",
@@ -45,6 +43,7 @@
     "Enter your email address below, you will receive an email within minutes to reset the password.": "Voer hieronder uw e-mailadres in, u ontvangt binnen enkele minuten een e-mail om het wachtwoord te resetten.",
     "Everything centralized in 1 place such as returns, exchanges and customer service": "Alles gecentraliseerd op 1 plek zoals retouren, ruilingen en klantenservice",
     "Free": "Gratis",
+    "Go to step :step": "Ga naar stap :step",
     "Go to your account": "Ga naar uw account",
     "Is this not your account?": "Is dit niet uw account?",
     "Log out": "Uitloggen",
@@ -79,6 +78,7 @@
     "Thank you for your order": "Bedankt voor uw bestelling",
     "This is a business account": "Dit is een zakelijke account",
     "This product is out of stock, remove it to continue your order.": "Dit product is op dit moment niet op voorraad, verwijder deze om verder te gaan met de bestelling.",
+    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met je bestelling.",
     "To checkout": "Naar afrekenen",
     "Total price": "Totale prijs",
     "Total price (incl. VAT)": "Totale prijs (incl. BTW)",
@@ -92,5 +92,6 @@
     "You already have an account with this e-mail address. Please log in to continue.": "U heeft al een account met dit e-mailadres. Log in om verder te gaan.",
     "You do not have any orders yet.": "U heeft nog geen bestellingen.",
     "You will receive this newsletter approximately 2x a year": "U ontvangt deze nieuwsbrief ongeveer 2x per jaar",
-    "Your password has been changed, please login.": "Uw wachtwoord is gewijzigd, log alstublieft in."
+    "Your password has been changed, please login.": "Uw wachtwoord is gewijzigd, log alstublieft in.",
+    "and use a different e-mail address.": "en gebruik een ander e-mailadres."
 }

resources/core-overwrites/layouts/checkout/header.blade.php

@@ -1,16 +1,18 @@
 <div class="bg-inactive-100 text-muted relative py-3 text-xs font-semibold">
-    <slider reference="header-usp-slider" autoplay loop>
-        <div
+    <slider reference="header-usp-slider" autoplay>
+        <ul
             ref="header-usp-slider"
             class="scrollbar-hide flex snap-x snap-mandatory items-center gap-7 overflow-x-auto lg:justify-center"
             slot-scope="{ navigate, currentSlide, slidesTotal }"
+            tabindex="0"
+            aria-label="USP features"
         >
             @foreach (['Wide range of products', 'Free returns', 'All items shown are in stock', 'Free shipping'] as $usp)
-                <div class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
+                <li class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
                     <x-heroicon-o-check class="size-4 text-primary stroke-2" />
                     <span>{{ $usp }}</span>
-                </div>
+                </li>
             @endforeach
-        </div>
+        </ul>
     </slider>
 </div>

resources/views/account/partials/account-features.blade.php

@@ -4,15 +4,15 @@
     </x-rapidez-ct::title.lg>
     <x-rapidez-ct::usp-list>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Track status of your order and view order history')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Quick and easy ordering without having to fill in your details every time')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Everything centralized in 1 place such as returns, exchanges and customer service')</span>
         </li>
     </x-rapidez-ct::usp-list>

resources/views/account/partials/default-addresses.blade.php

@@ -5,7 +5,7 @@
         v-bind:set-billing="data.customer.billing_address = data.customer.addresses.find(e => e.default_billing)"
         v-bind:set-shipping="data.customer.shipping_address = data.customer.addresses.find(e => e.default_shipping)"
     >
-        <x-rapidez-ct::separated-listing>
+        <x-rapidez-ct::separated-listing tag="div">
             <template v-if="data.customer.addresses.length">
                 <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
                     <x-rapidez-ct::address v-bind:address="data.customer.shipping_address" shipping billing/>
@@ -23,7 +23,7 @@
             </div>
             <a href="{{ route('account.edit') }}" class="font-medium">
                 <span>@lang('Account settings')</span>
-                <x-heroicon-o-cog class="h-6 stroke-[1.5px]" />
+                <x-heroicon-o-cog class="size-6 stroke-[1.5px]" />
             </a>
         </x-rapidez-ct::separated-listing>
     </x-rapidez-ct::card>

resources/views/account/partials/forgotpassword.blade.php

@@ -32,7 +32,7 @@ class="flex items-center gap-1"
                 loader
             >
                 @lang('Send')
-                <x-heroicon-o-arrow-right class="h-4" />
+                <x-heroicon-o-arrow-right class="size-4" />
             </x-rapidez::button.secondary>
         </div>
     </form>

resources/views/account/partials/login.blade.php

@@ -28,7 +28,7 @@ class="flex items-center gap-1"
                 loader
             >
                 @lang('Login')
-                <x-heroicon-o-arrow-right class="h-4" />
+                <x-heroicon-o-arrow-right class="size-4" />
             </x-rapidez::button.secondary>
         </div>
     </form>

resources/views/account/partials/order/products.blade.php

@@ -15,7 +15,7 @@
             <div class="flex h-[100px] w-[150px] items-center justify-center">
                 <img
                     class="max-h-[100px] max-w-[150px]"
-                    :alt="item.name"
+                    :alt="item.product_name"
                     :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
                     height="100"
                     v-if="item.product_sku"

resources/views/account/partials/orders.blade.php

@@ -7,7 +7,7 @@
                         @lang('Order') #@{{ order.number }}
                     </x-rapidez-ct::title.lg>
                     <x-rapidez-ct::card.white class="mt-5 flex flex-wrap items-center gap-x-3 md:gap-x-8">
-                        <x-heroicon-s-shopping-cart class="h-5 text-muted" />
+                        <x-heroicon-s-shopping-cart class="size-5 text-muted" />
                         <div class="flex flex-col">
                             <span class="font-medium">
                                 @lang('Number of products')
@@ -19,7 +19,7 @@
                                 @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                             </span>
                         </div>
-                        <x-heroicon-o-chevron-right class="ml-auto h-4 max-sm:hidden" />
+                        <x-heroicon-o-chevron-right class="ml-auto size-4 max-sm:hidden" />
                     </x-rapidez-ct::card.white>
                 </x-rapidez-ct::card.inactive>
             </a>

resources/views/account/partials/register.blade.php

@@ -6,5 +6,5 @@
 </p>
 <x-rapidez::button.outline :href="route('account.register')" class="flex w-fit items-center gap-1">
     @lang('Register')
-    <x-heroicon-o-arrow-right class="h-4" />
+    <x-heroicon-o-arrow-right class="size-4" />
 </x-rapidez::button.outline>

resources/views/cart/partials/product/image.blade.php

@@ -7,4 +7,3 @@ class="object-contain"
     />
     <x-rapidez::no-image v-else />
 </td>
-

resources/views/cart/partials/sidebar/summary.blade.php

@@ -32,11 +32,11 @@
 
     <x-rapidez::button.conversion :href="route('checkout')" class="flex w-full items-center justify-center gap-1 mt-6" dusk="checkout">
         @lang('To checkout')
-        <x-heroicon-o-arrow-right class="h-4" />
+        <x-heroicon-o-arrow-right class="size-4" />
     </x-rapidez::button.conversion>
 
     <div class="mt-4 flex items-center justify-center gap-1 text-center text-sm">
-        <x-heroicon-o-check class="h-5 text-primary" stroke-width="2.5" />
+        <x-heroicon-o-check class="size-5 text-primary" stroke-width="2.5" />
         @lang('Ordered within 2 minutes')
     </div>
 </x-rapidez-ct::card>

resources/views/checkout/pages/credentials.blade.php

@@ -7,11 +7,11 @@
 @section('content')
     <div class="container">
         <x-rapidez-ct::layout class="lg:items-end">
-            <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+            <x-rapidez-ct::title-progress-bar :aria-label="__('Back to cart')" :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Credentials')
             </x-rapidez-ct::title-progress-bar>
             <x-slot:sidebar class="max-lg:hidden">
-                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
+                <a href="{{ url('/') }}" aria-label="Home" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
                     <x-rapidez-ct::logo />
                 </a>
             </x-slot:sidebar>

resources/views/checkout/pages/login.blade.php

@@ -7,11 +7,11 @@
 @section('content')
     <div class="container">
         <x-rapidez-ct::layout class="lg:items-end">
-            <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+            <x-rapidez-ct::title-progress-bar :aria-label="__('Back to cart')" :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Login')
             </x-rapidez-ct::title-progress-bar>
             <x-slot:sidebar class="max-lg:hidden">
-                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
+                <a href="{{ url('/') }}" aria-label="Home" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
                     <x-rapidez-ct::logo />
                 </a>
             </x-slot:sidebar>

resources/views/checkout/pages/payment.blade.php

@@ -7,11 +7,11 @@
 @section('content')
     <div class="container">
         <x-rapidez-ct::layout class="lg:items-end">
-            <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
+            <x-rapidez-ct::title-progress-bar :aria-label="__('Back to credentials')" :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Payment')
             </x-rapidez-ct::title-progress-bar>
             <x-slot:sidebar class="max-lg:hidden">
-                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
+                <a href="{{ url('/') }}" aria-label="Home" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
                     <x-rapidez-ct::logo />
                 </a>
             </x-slot:sidebar>

resources/views/checkout/partials/sections/payment/payment-methods.blade.php

@@ -15,7 +15,8 @@
                 class="absolute right-5 size-8"
                 v-bind:src="`/payment-icons/${method.code}.svg`"
                 onerror="this.onerror=null; this.src=`/payment-icons/default.svg`"
+                v-bind:alt="method.title"
             >
         </div>
     </x-rapidez-ct::input.radio.tile>
-</template>
+</template>

resources/views/checkout/partials/sections/success/features.blade.php

@@ -4,15 +4,15 @@
     </x-rapidez-ct::title.lg>
     <x-rapidez-ct::usp-list>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Success usp 1')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Success usp 2')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Success usp 3')</span>
         </li>
     </x-rapidez-ct::usp-list>

resources/views/components/dashboard/item/index.blade.php

@@ -5,7 +5,7 @@
     'is' => isset($item['href']) ? 'a' : 'button',
 ]) }}>
     @if ($item['icon'] ?? false)
-        <x-icon name="{{ $item['icon'] }}" class="h-6 w-6 stroke-[1.5px]"/>
+        <x-icon name="{{ $item['icon'] }}" class="size-6 stroke-[1.5px]"/>
     @endif
     <div class="flex flex-col gap-y-1">
         @if ($item['heading'] ?? false)
@@ -26,5 +26,5 @@
             </p>
         @endif
     </div>
-    <x-heroicon-o-chevron-right class="ml-auto h-4" />
+    <x-heroicon-o-chevron-right class="ml-auto size-4" />
 </x-rapidez::tag>

resources/views/components/dashboard/sidebar-item/index.blade.php

@@ -12,5 +12,5 @@
             </template>
         </graphql>
     @endif
-    <x-heroicon-o-chevron-right class="h-4" />
+    <x-heroicon-o-chevron-right class="size-4" />
 </x-rapidez::tag>

resources/views/components/input/quantity.blade.php

@@ -6,26 +6,28 @@
     :error-callback="checkResponseForExpiredCart"
     v-slot="{ mutate, variables }"
 >
-    <form v-on:submit.prevent="mutate" class="flex w-20 overflow-hidden border rounded">
-        <button
-            class="flex-1 bg transition hover:bg-opacity-80"
-            v-on:click.prevent="variables.quantity <= (item.product.stock_item?.min_sale_qty || 1) ? variables.quantity = variables.quantity : variables.quantity = +variables.quantity - (item.product.stock_item?.qty_increments || 1);mutate()"
-        >-</button>
-        <input
-            class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-            name="qty"
-            type="number"
-            {{ $attributes }}
-            v-model="variables.quantity"
-            v-on:change="mutate"
-            v-bind:min="Math.max(item.product.stock_item?.min_sale_qty, item.product.stock_item?.qty_increments) || null"
-            v-bind:max="item.product.stock_item?.max_sale_qty"
-            v-bind:step="item.qty_increments"
-            v-bind:dusk="'qty-'+index"
-        />
-        <button
-            class="flex-1 bg transition hover:bg-opacity-80"
-            v-on:click.prevent="variables.quantity = +variables.quantity + (item.product.stock_item?.qty_increments || 1);mutate()"
-        >+</button>
+    <form v-on:submit.prevent="mutate" class="w-20">
+        <label class="flex overflow-hidden border rounded">
+            <button
+                class="flex-1 bg transition hover:bg-opacity-80"
+                v-on:click.prevent="variables.quantity <= (item.product.stock_item?.min_sale_qty || 1) ? variables.quantity = variables.quantity : variables.quantity = +variables.quantity - (item.product.stock_item?.qty_increments || 1);mutate()"
+            >-</button>
+            <input
+                class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                name="qty"
+                type="number"
+                {{ $attributes }}
+                v-model="variables.quantity"
+                v-on:change="mutate"
+                v-bind:min="Math.max(item.product.stock_item?.min_sale_qty, item.product.stock_item?.qty_increments) || null"
+                v-bind:max="item.product.stock_item?.max_sale_qty"
+                v-bind:step="item.qty_increments"
+                v-bind:dusk="'qty-'+index"
+            />
+            <button
+                class="flex-1 bg transition hover:bg-opacity-80"
+                v-on:click.prevent="variables.quantity = +variables.quantity + (item.product.stock_item?.qty_increments || 1);mutate()"
+            >+</button>
+        </label>
     </form>
 </graphql-mutation>

resources/views/components/newsletter-visual.blade.php

@@ -1,5 +1,5 @@
 <div class="absolute right-7 top-1/2 -translate-y-1/2 max-lg:hidden">
     <div class="bg text-muted items-center justify-center rounded-full p-4">
-        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
     </div>
 </div>

resources/views/components/popup.blade.php

@@ -4,7 +4,7 @@
 <div class="fixed inset-0 opacity-0 transition z-popup flex justify-center items-center pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto lg:py-5">
     <x-rapidez-ct::sections class="relative z-10 max-h-full overflow-y-auto scrollbar-hide">
         <x-rapidez-ct::card.inactive>
-            <label for="{{ $id }}" class="absolute cursor-pointer z-10 top-7 right-7 w-5 h-5">
+            <label for="{{ $id }}" class="absolute cursor-pointer z-10 top-7 right-7 size-5">
                 <x-heroicon-o-x-mark />
             </label>
             @if($title)

resources/views/components/progress-bar/index.blade.php

@@ -8,11 +8,12 @@
     </span>
     @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
         <a href="{{ route('checkout', $checkoutStep) }}"
+            aria-label="@lang('Go to step :step', ['step' => $checkoutStepKey + 1])"
             @class([
                 'size-3 rounded text-center bg-primary',
                 'cursor-pointer' => $currentStepKey < $checkoutStepKey,
                 'pointer-events-none !bg-emphasis' => $checkoutStepKey > $currentStepKey,
-                'outline-4 outline outline-primary/20' => $checkoutStepKey === $currentStepKey
+                'outline-4 outline outline-primary/20' => $checkoutStepKey === $currentStepKey,
             ])
         ></a>
     @endforeach

resources/views/components/separated-listing/index.blade.php

@@ -1,4 +1,4 @@
 @props(['tag' => 'ul'])
-<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm mt-1 divide-y [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0 [&>*]:flex [&>*]:flex-wrap [&>*]:justify-between') }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm mt-1 divide-y *:py-4 *:first:pt-0 *:first:pb-0 *:flex *:flex-wrap *:justify-between') }}>
     {{ $slot }}
 </x-rapidez::tag>