From 1177c5b90a925f31b14da4a0aef41d02eb90e950 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Tue, 11 Nov 2025 19:44:20 +0000
Subject: [PATCH] fix: add accessibility attributes, fix CSS margins, complete
 textAlign support, remove unused variable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added role="button", tabIndex, aria-label, and onKeyDown handler to verse spans for keyboard accessibility
- Fixed CSS margin/padding conflict by using py/px instead of p/margin for proper variable margin width
- Added --text-align CSS variable to getCSSVariables() and applied it in reading view
- Removed unused isTablet variable

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/bible/reading-view.tsx | 15 ++++++++++++---
 lib/reading-preferences.ts        |  1 +
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/bible/reading-view.tsx b/components/bible/reading-view.tsx
index ef48268..d7fe10e 100644
--- a/components/bible/reading-view.tsx
+++ b/components/bible/reading-view.tsx
@@ -28,7 +28,6 @@ export function ReadingView({
 }: ReadingViewProps) {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const [preferences, setPreferences] = useState(loadPreferences())
   const [showControls, setShowControls] = useState(!isMobile)
 
@@ -93,23 +92,33 @@ export function ReadingView({
       <Box
         sx={{
           flex: 1,
-          p: 3,
+          py: 3,
           maxWidth: 700,
           mx: 'auto',
           width: '100%',
-          margin: 'var(--margin-width)',
+          px: 'var(--margin-width)',
           lineHeight: 'var(--line-height)',
           fontSize: 'var(--font-size)',
           fontFamily: 'var(--font-family)',
+          textAlign: 'var(--text-align)' as any,
         } as CSSProperties}
       >
         {chapter.verses.map((verse) => (
           <span
             key={verse.id}
+            role="button"
+            tabIndex={0}
+            aria-label={`Verse ${verse.verseNum}: ${verse.text}`}
             onClick={(e) => {
               e.stopPropagation()
               onVerseClick(verse.id)
             }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onVerseClick(verse.id)
+              }
+            }}
             style={{
               cursor: 'pointer',
               transition: 'background-color 0.15s',
diff --git a/lib/reading-preferences.ts b/lib/reading-preferences.ts
index a6ad0f3..f8e799a 100644
--- a/lib/reading-preferences.ts
+++ b/lib/reading-preferences.ts
@@ -82,6 +82,7 @@ export function getCSSVariables(prefs: ReadingPreference): Record<string, string
     '--font-size': `${prefs.fontSize}px`,
     '--line-height': `${prefs.lineHeight}`,
     '--letter-spacing': `${prefs.letterSpacing}em`,
+    '--text-align': prefs.textAlign,
     '--bg-color': prefs.backgroundColor,
     '--text-color': prefs.textColor,
     '--margin-width': getMarginWidth(prefs.margin),