From d11d500a35f4e156e0ce864dc9530621b009c83d Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 18:44:34 +0100
Subject: [PATCH] fix: accessibility and Enter key handling in SearchBar

---
 resources/js/components/SearchBar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/SearchBar.vue b/resources/js/components/SearchBar.vue
index 5043a6a..3ed83ff 100644
--- a/resources/js/components/SearchBar.vue
+++ b/resources/js/components/SearchBar.vue
@@ -3,14 +3,17 @@
         <!-- Row 1: postcode + button -->
         <div class="relative flex flex-col sm:flex-row gap-3">
             <div class="relative flex-1">
-                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
+                <label for="postcode-input" class="sr-only">Postcode or city</label>
+                <span aria-hidden="true" class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
                     <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
                 </span>
                 <input
+                    id="postcode-input"
                     v-model="postcode"
                     type="text"
                     placeholder="Enter postcode, e.g. SW1A 1AA"
                     class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
+                    @keyup.enter="onSearch"
                 />
             </div>
             <button
@@ -26,6 +29,7 @@
         <div class="flex gap-3">
             <select
                 v-model="fuelType"
+                aria-label="Fuel type"
                 class="flex-1 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
             >
                 <option value="e10">Petrol (E10)</option>
@@ -37,6 +41,7 @@
             </select>
             <select
                 v-model="radius"
+                aria-label="Search radius"
                 class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
             >
                 <option :value="2">2 miles</option>