feat: add accessibility features to UI

This commit is contained in:
gosangam
2026-04-18 12:25:36 +05:30
parent 5235f479b3
commit c865b59088
30 changed files with 557 additions and 233 deletions
+10 -10
View File
@@ -121,7 +121,7 @@ function VerseContent({ verse }: { verse: NoiVerse }) {
{/* Transliteration */}
<section>
<div className="text-foreground/80 italic whitespace-pre-line leading-relaxed text-center">
<div className="text-base text-foreground/80 italic whitespace-pre-line leading-relaxed text-center">
{verse.transliteration}
</div>
</section>
@@ -129,10 +129,10 @@ function VerseContent({ verse }: { verse: NoiVerse }) {
{/* Synonyms */}
{verse.synonyms.length > 0 && (
<section>
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">
<h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
Synonyms
</h2>
<div className="text-sm text-foreground/70 leading-relaxed">
<div className="text-base text-foreground leading-relaxed">
{verse.synonyms.map((s, i) => (
<span key={i}>
{i > 0 && "; "}
@@ -149,11 +149,11 @@ function VerseContent({ verse }: { verse: NoiVerse }) {
{/* Translation */}
<section>
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">
<h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
Translation
</h2>
<div
className="text-foreground font-medium leading-relaxed"
className="text-base text-foreground font-medium leading-relaxed"
dangerouslySetInnerHTML={{ __html: verse.translation }}
/>
</section>
@@ -161,14 +161,14 @@ function VerseContent({ verse }: { verse: NoiVerse }) {
{/* Purport */}
{verse.purport.length > 0 && (
<section>
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">
<h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
Purport
</h2>
<div className="space-y-4">
{verse.purport.map((p, i) => (
<div
key={i}
className="text-foreground leading-relaxed"
className="text-base text-foreground leading-relaxed"
dangerouslySetInnerHTML={{ __html: p }}
/>
))}
@@ -192,7 +192,7 @@ function IntroContent({ intro }: { intro: NoiIntroSegment }) {
{intro.paragraphs.map((paragraph, i) => (
<div
key={i}
className="text-foreground leading-relaxed"
className="text-base text-foreground leading-relaxed"
dangerouslySetInnerHTML={{ __html: paragraph }}
/>
))}
@@ -228,7 +228,7 @@ function NoiSidebar({
{/* Front Matter */}
{frontMatterItems.length > 0 && (
<>
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
<h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
Front Matter
</h2>
<nav className="flex flex-col gap-0.5 mb-4">
@@ -246,7 +246,7 @@ function NoiSidebar({
{/* Texts */}
{textItems.length > 0 && (
<>
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
<h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
Texts
</h2>
<nav className="flex flex-col gap-0.5 mb-4">