From 4287a748055d5f536b76052568bb1c01c1226e3b Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Tue, 11 Nov 2025 19:31:30 +0000
Subject: [PATCH] fix: add accessibility attributes, fix placeholder, ensure
 consistent abbreviation matching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-label and role attributes to search TextField for screen readers
- Add role="listbox" and aria-label to search results Paper
- Add role="option", aria-selected, and minHeight to ListItemButton for accessibility
- Update placeholder from "John 3:16" to "John 3" to match chapter-level search
- Change parseReference abbreviation matching from === to startsWith() for consistency with searchBooks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/bible/search-navigator.tsx | 13 +++++++++++--
 lib/bible-search.ts                   |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/bible/search-navigator.tsx b/components/bible/search-navigator.tsx
index fab75dd..1bec3c8 100644
--- a/components/bible/search-navigator.tsx
+++ b/components/bible/search-navigator.tsx
@@ -32,7 +32,9 @@ export function SearchNavigator({ onNavigate }: SearchNavigatorProps) {
   return (
     <Box sx={{ position: 'relative', width: '100%' }}>
       <TextField
-        placeholder="Search Bible (e.g., Genesis 1, John 3:16)"
+        aria-label="Search Bible books and chapters"
+        role="searchbox"
+        placeholder="Search Bible (e.g., Genesis 1, John 3)"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         onFocus={() => query && setIsOpen(true)}
@@ -64,6 +66,8 @@ export function SearchNavigator({ onNavigate }: SearchNavigatorProps) {
 
       {isOpen && results.length > 0 && (
         <Paper
+          role="listbox"
+          aria-label="Search results"
           sx={{
             position: 'absolute',
             top: '100%',
@@ -78,7 +82,12 @@ export function SearchNavigator({ onNavigate }: SearchNavigatorProps) {
           <List>
             {results.map((result, idx) => (
               <ListItem key={idx} disablePadding>
-                <ListItemButton onClick={() => handleSelect(result)}>
+                <ListItemButton
+                  role="option"
+                  aria-selected={false}
+                  sx={{ minHeight: '44px', py: 1.5 }}
+                  onClick={() => handleSelect(result)}
+                >
                   <Box>
                     <Typography variant="body2" fontWeight={500}>
                       {result.reference}
diff --git a/lib/bible-search.ts b/lib/bible-search.ts
index 6bb0d15..d959087 100644
--- a/lib/bible-search.ts
+++ b/lib/bible-search.ts
@@ -131,7 +131,7 @@ export function parseReference(ref: string): { bookId: number; chapter: number }
 
   for (const book of BIBLE_BOOKS) {
     if (book.name.toLowerCase().startsWith(bookQuery) ||
-        book.abbr.toLowerCase() === bookQuery) {
+        book.abbr.toLowerCase().startsWith(bookQuery)) {
       return {
         bookId: book.id,
         chapter: Math.max(1, Math.min(chapterNum, book.chapters))