fix: add accessibility attributes, fix placeholder, ensure consistent abbreviation matching
- 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>
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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))
|
||||
|
||||
Reference in New Issue
Block a user