bitstream/fuel-price
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: accessibility and Enter key handling in SearchBar

Browse Source
This commit is contained in:
Ovidiu U
2026-04-11 18:44:34 +01:00
parent b5ee25db67
commit d11d500a35
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/components/SearchBar.vue
View File

@@ -3,14 +3,17 @@
<!-- Row 1: postcode + button --> <!-- Row 1: postcode + button -->
<div class="relative flex flex-col sm:flex-row gap-3"> <div class="relative flex flex-col sm:flex-row gap-3">
<div class="relative flex-1"> <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> <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
</span> </span>
<input <input
id="postcode-input"
v-model="postcode" v-model="postcode"
type="text" type="text"
placeholder="Enter postcode, e.g. SW1A 1AA" 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" 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> </div>
<button <button
@@ -26,6 +29,7 @@
<div class="flex gap-3"> <div class="flex gap-3">
<select <select
v-model="fuelType" 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" 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> <option value="e10">Petrol (E10)</option>
@@ -37,6 +41,7 @@
</select> </select>
<select <select
v-model="radius" 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" 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> <option :value="2">2 miles</option>