From 92cae416babc61051c4cfe805ab69451cfb74bd6 Mon Sep 17 00:00:00 2001
From: Tugamer89 <61603718+Tugamer89@users.noreply.github.com>
Date: Tue, 26 May 2026 05:02:01 +0000
Subject: [PATCH] feat(ui): improve keyboard accessibility of book search
 results

- Add `role="button"` and `tabindex="0"` to the Google Books search result container.
- Add keyboard event listeners (`@keydown.enter.prevent` and `@keydown.space.prevent`) to allow selection via keyboard.
- Add an `aria-label` to provide context for screen readers.
- Add `focus-visible` utility classes to show a focus ring for keyboard navigation.
- Convert the inner `<button>` to a `<span>` to prevent invalid nested interactive elements.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 static/js/components/BookSearchResult.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/js/components/BookSearchResult.js b/static/js/components/BookSearchResult.js
index 3af1a67..6ec216d 100644
--- a/static/js/components/BookSearchResult.js
+++ b/static/js/components/BookSearchResult.js
@@ -25,7 +25,7 @@ export default {
         return { thumbnail, title, authors, publisher, isbn };
     },
     template: `
-        <div class="flex items-center gap-4 p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition cursor-pointer" @click="$emit('select', book)">
+        <div class="flex items-center gap-4 p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500" @click="$emit('select', book)" @keydown.enter.prevent="$emit('select', book)" @keydown.space.prevent="$emit('select', book)" role="button" tabindex="0" :aria-label="'Select ' + title">
             <img :src="thumbnail" :alt="title" class="w-16 h-24 object-cover rounded shadow-md flex-shrink-0" loading="lazy">
             <div class="flex-grow overflow-hidden">
                 <h4 class="font-bold truncate">{{ title }}</h4>
@@ -33,7 +33,7 @@ export default {
                 <p class="text-xs text-slate-500 truncate">{{ publisher }}</p>
                 <p v-if="isbn" class="text-xs text-slate-500">ISBN: {{ isbn }}</p>
             </div>
-            <button class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 transition flex-shrink-0">Select</button>
+            <span class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 transition flex-shrink-0">Select</span>
         </div>
     `,
 };