From 550096556388fdee1d5ea4c4e844bc7532046f24 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Tue, 11 Nov 2025 20:03:45 +0000
Subject: [PATCH] fix: add accessibility attributes, display full verse
 reference, reset tabs on verse change, add character limit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-label to close button for screen reader support
- Add dynamic aria-label to bookmark button (Add/Remove bookmark)
- Add aria-label and character counter to notes TextField
- Wrap mobile bottom sheet in proper dialog semantics (role="dialog", aria-modal="true")
- Display full verse reference (Book Chapter:Verse) instead of just verse number
- Add useEffect to reset tab to Notes when verse changes for better UX
- Add 500 character limit to notes with visual counter

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/bible/verse-details-panel.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/bible/verse-details-panel.tsx b/components/bible/verse-details-panel.tsx
index a9d475d..6be46cb 100644
--- a/components/bible/verse-details-panel.tsx
+++ b/components/bible/verse-details-panel.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Box, Paper, Typography, Tabs, Tab, IconButton, useMediaQuery, useTheme, TextField, Button } from '@mui/material'
 import { Close, Bookmark, BookmarkBorder } from '@mui/icons-material'
 import { BibleVerse } from '@/types'
@@ -26,6 +26,11 @@ export function VersDetailsPanel({
   const [tabValue, setTabValue] = useState(0)
   const [noteText, setNoteText] = useState('')
 
+  // Reset to Notes tab when verse changes
+  useEffect(() => {
+    setTabValue(0)
+  }, [verse?.id])
+
   if (!verse || !isOpen) return null
 
   const handleAddNote = () => {
@@ -39,10 +44,14 @@ export function VersDetailsPanel({
     <Box sx={{ p: 2 }}>
       {/* Verse Header */}
       <Box sx={{ mb: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
-        <Typography variant="subtitle1" fontWeight={600}>
-          Verse {verse.verseNum}
+        <Typography variant="subtitle1" fontWeight={600} id="verse-details-header">
+          {verse.chapter?.book?.name} {verse.chapter?.chapterNum}:{verse.verseNum}
         </Typography>
-        <IconButton size="small" onClick={onClose}>
+        <IconButton
+          size="small"
+          onClick={onClose}
+          aria-label="Close verse details"
+        >
           <Close />
         </IconButton>
       </Box>
@@ -57,6 +66,7 @@ export function VersDetailsPanel({
       {/* Bookmark Button */}
       <Box sx={{ mb: 2 }}>
         <Button
+          aria-label={isBookmarked ? 'Remove bookmark' : 'Add bookmark'}
           startIcon={isBookmarked ? <Bookmark /> : <BookmarkBorder />}
           onClick={onToggleBookmark}
           variant={isBookmarked ? 'contained' : 'outlined'}
@@ -88,6 +98,9 @@ export function VersDetailsPanel({
               multiline
               rows={3}
               placeholder="Add a note..."
+              aria-label="Note text"
+              helperText={`${noteText.length}/500 characters`}
+              inputProps={{ maxLength: 500 }}
               value={noteText}
               onChange={(e) => setNoteText(e.target.value)}
               size="small"
@@ -122,6 +135,9 @@ export function VersDetailsPanel({
   if (isMobile) {
     return (
       <Box
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="verse-details-header"
         sx={{
           position: 'fixed',
           bottom: 0,