From 816e8f218b1d510facb2478d9a2e7ec75fcf6681 Mon Sep 17 00:00:00 2001
From: JoyLight00 <rafaelaajumi@gmail.com>
Date: Tue, 30 Jun 2026 18:33:30 +0100
Subject: [PATCH] fix: address accessibility issues for issues #52, #69, #75,
 #72

#52 Internationalize AddressChip control labels
- Add useTranslations hook to AddressChip component
- Replace hardcoded 'Copied' and 'Copy' strings with localized Common.copyAddress and Common.copied
- Replace hardcoded 'View on Stellar Expert' with localized Common.viewOnExplorer

#69 Associate labels with OracleForms select
- Add aria-label prop to Select component for accessible name
- Pass label to Select from Field wrapper for project dropdowns

#75 Replace placeholder anchor links on landing counters
- Remove href='#' from StatBlock in Landing.tsx
- Counters now render as plain figures until real links are wired

#72 Make footer trust links real or mark them clearly
- Convert non-functional buttons to anchor links pointing to /verify, /risk, /learn, /talk
- Add nav element with aria-label for trust links section
---
 messages/en.json                  |  8 ++++
 messages/fr.json                  |  6 +++
 src/components/AddressChip.tsx    |  8 +++-
 src/screens/Landing.tsx           | 18 ++------
 src/screens/admin/OracleForms.tsx | 15 ++++--
 src/shell/Footer.tsx              | 77 ++++++++++++++++++++++---------
 6 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 433c62a..546d677 100644
--- a/messages/en.json
+++ b/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",
diff --git a/messages/fr.json b/messages/fr.json
index 0752b1f..0d92972 100644
--- a/messages/fr.json
+++ b/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",
diff --git a/src/components/AddressChip.tsx b/src/components/AddressChip.tsx
index 615a6ac..35245f5 100644
--- a/src/components/AddressChip.tsx
+++ b/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 />
diff --git a/src/screens/Landing.tsx b/src/screens/Landing.tsx
index 43c63ee..71a51b4 100644
--- a/src/screens/Landing.tsx
+++ b/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
\ No newline at end of file
diff --git a/src/screens/admin/OracleForms.tsx b/src/screens/admin/OracleForms.tsx
index 73a0d56..378b6f6 100644
--- a/src/screens/admin/OracleForms.tsx
+++ b/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)',
-}
+}
\ No newline at end of file
diff --git a/src/shell/Footer.tsx b/src/shell/Footer.tsx
index d78e895..1e20c63 100644
--- a/src/shell/Footer.tsx
+++ b/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>
   )