fix: address accessibility issues for issues #52, #69, #75, #72

messages/en.json

@@ -1,4 +1,9 @@
 {
+  "Common": {
+    "copyAddress": "Copy {label}",
+    "copied": "Copied",
+    "viewOnExplorer": "View {label} on Stellar Expert"
+  },
   "Nav": {
     "explore": "Explore",
     "how": "How it works",
@@ -19,6 +24,7 @@
     "demoSession": "Demo session"
   },
   "Footer": {
+    "trustLinks": "Trust links",
     "verify": "Verify everything",
     "risk": "Risk disclosure",
     "learn": "Learn",
@@ -235,6 +241,8 @@
     "actionSave": "Save"
   },
   "Creator": {
+    "title": "Creator space",
+    "description": "Apply for the whitelist, build your project page, and watch the pool fund it. The oracle scores your credit quality and green impact, and we show you exactly what moves them.",
     "h1": "Creator space",
     "subtitle": "Apply for the whitelist, build your project page, and watch the pool fund it. The oracle scores your credit quality and green impact, and we show you exactly what moves them.",
     "tabApply": "Apply",

messages/fr.json

@@ -1,4 +1,9 @@
 {
+  "Common": {
+    "copyAddress": "Copier {label}",
+    "copied": "Copié",
+    "viewOnExplorer": "Voir {label} sur Stellar Expert"
+  },
   "Nav": {
     "explore": "Explorer",
     "how": "Comment ça marche",
@@ -19,6 +24,7 @@
     "demoSession": "Session démo"
   },
   "Footer": {
+    "trustLinks": "Liens de confiance",
     "verify": "Tout vérifier",
     "risk": "Avertissement sur les risques",
     "learn": "Comprendre",

src/components/AddressChip.tsx

@@ -1,4 +1,7 @@
+'use client'
+
 import { useState, type CSSProperties } from 'react'
+import { useTranslations } from 'next-intl'
 
 /**
  * Heliobond AddressChip — a Stellar address or tx hash, truncated in the
@@ -22,6 +25,7 @@ export function AddressChip({
   label = 'address',
   style,
 }: AddressChipProps) {
+  const t = useTranslations('Common')
   const [copied, setCopied] = useState(false)
   const [hover, setHover] = useState(false)
 
@@ -66,7 +70,7 @@ export function AddressChip({
       </span>
       <button
         type="button"
-        aria-label={copied ? 'Copied' : `Copy ${label}`}
+        aria-label={copied ? t('copied') : t('copyAddress', { label })}
         onClick={copy}
         style={iconBtn}
       >
@@ -77,7 +81,7 @@ export function AddressChip({
           href={explorerUrl}
           target="_blank"
           rel="noreferrer"
-          aria-label={`View ${label} on Stellar Expert`}
+          aria-label={t('viewOnExplorer', { label })}
           style={iconBtn}
         >
           <ExternalIcon />

src/screens/Landing.tsx

@@ -85,19 +85,13 @@ export function Landing({ onConnect, onNav }: LandingProps) {
           }}
         >
           <div style={counterCell}>
-            <StatBlock
-              label={t('poolValue')}
-              value="$4,862,014"
-              decimals=".55"
-              size="lg"
-              href="#"
-            />
+            <StatBlock label={t('poolValue')} value="$4,862,014" decimals=".55" size="lg" />
           </div>
           <div style={counterCell}>
-            <StatBlock label={t('projectsFunded')} value="14" size="lg" href="#" />
+            <StatBlock label={t('projectsFunded')} value="14" size="lg" />
           </div>
           <div style={counterCell}>
-            <StatBlock label={t('returnRate')} value="7.4" unit="%" size="lg" href="#" />
+            <StatBlock label={t('returnRate')} value="7.4" unit="%" size="lg" />
           </div>
         </div>
         <p
@@ -258,9 +252,7 @@ export function Landing({ onConnect, onNav }: LandingProps) {
                 padding: '16px 18px',
               }}
             >
-              <span
-                style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--ink-60)' }}
-              >
+              <span style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--ink-60)' }}>
                 {k}
               </span>
               <span style={{ fontFamily: 'var(--font-data)', fontSize: 13.5, color: 'var(--ink)' }}>
@@ -274,4 +266,4 @@ export function Landing({ onConnect, onNav }: LandingProps) {
   )
 }
 
-const counterCell = { background: 'var(--surface)', padding: '28px 24px' } as const
+const counterCell = { background: 'var(--surface)', padding: '28px 24px' } as const

src/screens/admin/OracleForms.tsx

@@ -73,7 +73,7 @@ export function OracleForms({ projects, liquid, onPushScores, onFund }: OracleFo
       {/* Push score update */}
       <Panel title={t('panelPushTitle')} hint={t('panelPushHint')}>
         <Field label={t('fieldProject')}>
-          <Select value={scoreId} onChange={setScoreId} projects={projects} />
+          <Select value={scoreId} onChange={setScoreId} projects={projects} label={t('fieldProject')} />
         </Field>
         <div style={{ display: 'flex', gap: 12 }}>
           <Field label={t('fieldCredit')} style={{ flex: 1 }}>
@@ -110,7 +110,7 @@ export function OracleForms({ projects, liquid, onPushScores, onFund }: OracleFo
       {/* Fund a project */}
       <Panel title={t('panelFundTitle')} hint={t('panelFundHint')}>
         <Field label={t('fieldProject')}>
-          <Select value={fundId} onChange={setFundId} projects={projects} />
+          <Select value={fundId} onChange={setFundId} projects={projects} label={t('fieldProject')} />
         </Field>
         <Field label={t('fieldAmount')}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
@@ -196,13 +196,20 @@ function Select({
   value,
   onChange,
   projects,
+  label,
 }: {
   value: number
   onChange: (id: number) => void
   projects: RegistryEntry[]
+  label: string
 }) {
   return (
-    <select value={value} onChange={(e) => onChange(Number(e.target.value))} style={selectStyle}>
+    <select
+      aria-label={label}
+      value={value}
+      onChange={(e) => onChange(Number(e.target.value))}
+      style={selectStyle}
+    >
       {projects.map((p) => (
         <option key={p.id} value={p.id}>
           {p.name}
@@ -277,4 +284,4 @@ const helpText: CSSProperties = {
   fontSize: 12.5,
   lineHeight: 1.5,
   color: 'var(--ink-60)',
-}
+}

src/shell/Footer.tsx

@@ -10,7 +10,6 @@ import { Mark } from '../brand/Mark'
  */
 export function Footer() {
   const t = useTranslations('Footer')
-  const links = [t('verify'), t('risk'), t('learn')]
   return (
     <footer style={{ borderTop: '1px solid var(--ink-12)', background: 'var(--surface)' }}>
       <div
@@ -38,7 +37,7 @@ export function Footer() {
             heliobond
           </span>
         </div>
-        <div
+        <nav
           style={{
             display: 'flex',
             gap: 22,
@@ -48,25 +47,58 @@ export function Footer() {
             color: 'var(--ink-60)',
             flexWrap: 'wrap',
           }}
+          aria-label={t('trustLinks')}
         >
-          {links.map((l) => (
-            <button
-              key={l}
-              className="hb-textlink"
-              style={{
-                background: 'none',
-                border: 'none',
-                padding: 0,
-                cursor: 'pointer',
-                fontFamily: 'inherit',
-                fontSize: 'inherit',
-                color: 'var(--ink-60)',
-              }}
-            >
-              {l}
-            </button>
-          ))}
-          <button
+          <a
+            href="/verify"
+            className="hb-textlink"
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              fontSize: 'inherit',
+              color: 'var(--ink-60)',
+              textDecoration: 'none',
+            }}
+          >
+            {t('verify')}
+          </a>
+          <a
+            href="/risk"
+            className="hb-textlink"
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              fontSize: 'inherit',
+              color: 'var(--ink-60)',
+              textDecoration: 'none',
+            }}
+          >
+            {t('risk')}
+          </a>
+          <a
+            href="/learn"
+            className="hb-textlink"
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              fontSize: 'inherit',
+              color: 'var(--ink-60)',
+              textDecoration: 'none',
+            }}
+          >
+            {t('learn')}
+          </a>
+          <a
+            href="/talk"
             className="hb-textlink"
             style={{
               background: 'none',
@@ -77,10 +109,11 @@ export function Footer() {
               fontSize: 'inherit',
               color: 'var(--ink)',
               fontWeight: 600,
+              textDecoration: 'none',
             }}
           >
             {t('talk')}
-          </button>
+          </a>
           <Link
             href="/admin"
             className="hb-textlink"
@@ -93,7 +126,7 @@ export function Footer() {
           >
             {t('admin')}
           </Link>
-        </div>
+        </nav>
       </div>
     </footer>
   )