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 (
|
return (
|
||||||
<Box sx={{ position: 'relative', width: '100%' }}>
|
<Box sx={{ position: 'relative', width: '100%' }}>
|
||||||
<TextField
|
<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}
|
value={query}
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
onFocus={() => query && setIsOpen(true)}
|
onFocus={() => query && setIsOpen(true)}
|
||||||
@@ -64,6 +66,8 @@ export function SearchNavigator({ onNavigate }: SearchNavigatorProps) {
|
|||||||
|
|
||||||
{isOpen && results.length > 0 && (
|
{isOpen && results.length > 0 && (
|
||||||
<Paper
|
<Paper
|
||||||
|
role="listbox"
|
||||||
|
aria-label="Search results"
|
||||||
sx={{
|
sx={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '100%',
|
top: '100%',
|
||||||
@@ -78,7 +82,12 @@ export function SearchNavigator({ onNavigate }: SearchNavigatorProps) {
|
|||||||
<List>
|
<List>
|
||||||
{results.map((result, idx) => (
|
{results.map((result, idx) => (
|
||||||
<ListItem key={idx} disablePadding>
|
<ListItem key={idx} disablePadding>
|
||||||
<ListItemButton onClick={() => handleSelect(result)}>
|
<ListItemButton
|
||||||
|
role="option"
|
||||||
|
aria-selected={false}
|
||||||
|
sx={{ minHeight: '44px', py: 1.5 }}
|
||||||
|
onClick={() => handleSelect(result)}
|
||||||
|
>
|
||||||
<Box>
|
<Box>
|
||||||
<Typography variant="body2" fontWeight={500}>
|
<Typography variant="body2" fontWeight={500}>
|
||||||
{result.reference}
|
{result.reference}
|
||||||
|
|||||||
@@ -131,7 +131,7 @@ export function parseReference(ref: string): { bookId: number; chapter: number }
|
|||||||
|
|
||||||
for (const book of BIBLE_BOOKS) {
|
for (const book of BIBLE_BOOKS) {
|
||||||
if (book.name.toLowerCase().startsWith(bookQuery) ||
|
if (book.name.toLowerCase().startsWith(bookQuery) ||
|
||||||
book.abbr.toLowerCase() === bookQuery) {
|
book.abbr.toLowerCase().startsWith(bookQuery)) {
|
||||||
return {
|
return {
|
||||||
bookId: book.id,
|
bookId: book.id,
|
||||||
chapter: Math.max(1, Math.min(chapterNum, book.chapters))
|
chapter: Math.max(1, Math.min(chapterNum, book.chapters))
|
||||||
|
|||||||
Reference in New Issue
Block a user