From 0ea5d0d0bd87f0d0ba6c5948424c6c35d88884a1 Mon Sep 17 00:00:00 2001
From: faveteamz <bonattimothy18@gmail.com>
Date: Mon, 1 Jun 2026 12:16:04 +0000
Subject: [PATCH] feat: add ARIA labels to all interactive elements (#279)

- Add label/htmlFor associations and aria-describedby on all form inputs
- Add role=alert and aria-live regions for error/status messages
- Add aria-label to icon-only and wallet connect/disconnect buttons
- Add role=article + aria-label to NFTCard
- Add role=status + aria-label to VerificationBadge
- Add aria-busy to submit buttons during loading
---
 frontend/src/components/NFTCard.jsx           |  5 ++++-
 frontend/src/components/VerificationBadge.jsx |  8 +++++++-
 frontend/src/pages/IssuerDashboard.jsx        | 13 ++++++++-----
 frontend/src/pages/Landing.jsx                |  5 +++--
 frontend/src/pages/PatientDashboard.jsx       |  8 ++++----
 frontend/src/pages/VerifyPage.jsx             | 15 ++++++++++-----
 6 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/NFTCard.jsx b/frontend/src/components/NFTCard.jsx
index c8b64ff..25a45b5 100644
--- a/frontend/src/components/NFTCard.jsx
+++ b/frontend/src/components/NFTCard.jsx
@@ -1,6 +1,9 @@
 export default function NFTCard({ record }) {
   return (
-    <div style={{
+    <div
+      role="article"
+      aria-label={`Vaccination record: ${record.vaccine_name}, administered ${record.date_administered}`}
+      style={{
       background: '#1e293b',
       border: '1px solid #334155',
       borderRadius: 12,
diff --git a/frontend/src/components/VerificationBadge.jsx b/frontend/src/components/VerificationBadge.jsx
index 9480e17..b2087fc 100644
--- a/frontend/src/components/VerificationBadge.jsx
+++ b/frontend/src/components/VerificationBadge.jsx
@@ -1,6 +1,12 @@
 export default function VerificationBadge({ vaccinated, recordCount }) {
+  const label = vaccinated
+    ? `Vaccinated with ${recordCount} record${recordCount !== 1 ? 's' : ''}`
+    : 'No vaccination records found';
   return (
-    <div style={{
+    <div
+      role="status"
+      aria-label={label}
+      style={{
       display: 'inline-flex',
       alignItems: 'center',
       gap: '0.5rem',
diff --git a/frontend/src/pages/IssuerDashboard.jsx b/frontend/src/pages/IssuerDashboard.jsx
index b689a42..1699a0e 100644
--- a/frontend/src/pages/IssuerDashboard.jsx
+++ b/frontend/src/pages/IssuerDashboard.jsx
@@ -42,29 +42,32 @@ export default function IssuerDashboard() {
   return (
     <div style={styles.page}>
       <h2 style={{ marginBottom: '1.5rem', color: '#e2e8f0' }}>Issue Vaccination NFT</h2>
-      <form style={styles.form} onSubmit={handleSubmit}>
+      <form style={styles.form} onSubmit={handleSubmit} aria-label="Issue vaccination NFT">
         {[
           { key: 'patient_address', label: 'Patient Stellar Address', placeholder: 'G...' },
           { key: 'vaccine_name', label: 'Vaccine Name', placeholder: 'e.g. COVID-19' },
           { key: 'date_administered', label: 'Date Administered', placeholder: 'YYYY-MM-DD' },
         ].map(({ key, label, placeholder }) => (
           <div key={key}>
-            <p style={styles.label}>{label}</p>
+            <label htmlFor={key} style={styles.label}>{label}</label>
             <input
+              id={key}
               style={styles.input}
               placeholder={placeholder}
               value={form[key]}
               onChange={(e) => setForm((f) => ({ ...f, [key]: e.target.value }))}
+              aria-describedby={error ? 'issuer-error' : undefined}
               required
             />
           </div>
         ))}
-        <button style={styles.btn} type="submit" disabled={loading}>
+        <button style={styles.btn} type="submit" disabled={loading}
+          aria-busy={loading}>
           {loading ? 'Minting…' : 'Issue Vaccination NFT'}
         </button>
       </form>
-      {error && <p style={{ color: '#f87171', marginTop: '1rem' }}>Error: {error}</p>}
-      {success && <p style={{ color: '#4ade80', marginTop: '1rem' }}>✅ {success}</p>}
+      {error && <p id="issuer-error" role="alert" style={{ color: '#f87171', marginTop: '1rem' }}>Error: {error}</p>}
+      {success && <p aria-live="polite" style={{ color: '#4ade80', marginTop: '1rem' }}>✅ {success}</p>}
     </div>
   );
 }
diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx
index 05b46e5..df06e2b 100644
--- a/frontend/src/pages/Landing.jsx
+++ b/frontend/src/pages/Landing.jsx
@@ -22,12 +22,13 @@ export default function Landing() {
           <p style={{ color: '#4ade80', marginBottom: '1rem' }}>
             ✅ Connected: {publicKey.slice(0, 8)}…{publicKey.slice(-4)}
           </p>
-          <button style={{ ...styles.btn, background: '#475569' }} onClick={disconnect}>
+          <button style={{ ...styles.btn, background: '#475569' }} onClick={disconnect}
+            aria-label="Disconnect Freighter wallet">
             Disconnect
           </button>
         </>
       ) : (
-        <button style={styles.btn} onClick={connect}>
+        <button style={styles.btn} onClick={connect} aria-label="Connect Freighter wallet">
           Connect Freighter Wallet
         </button>
       )}
diff --git a/frontend/src/pages/PatientDashboard.jsx b/frontend/src/pages/PatientDashboard.jsx
index 193a6ad..2306b9c 100644
--- a/frontend/src/pages/PatientDashboard.jsx
+++ b/frontend/src/pages/PatientDashboard.jsx
@@ -25,7 +25,7 @@ export default function PatientDashboard() {
     return (
       <div style={styles.page}>
         <p style={{ color: '#94a3b8', marginBottom: '1rem' }}>Connect your wallet to view records.</p>
-        <button style={styles.btn} onClick={connect}>Connect Wallet</button>
+        <button style={styles.btn} onClick={connect} aria-label="Connect wallet to view vaccination records">Connect Wallet</button>
       </div>
     );
   }
@@ -36,10 +36,10 @@ export default function PatientDashboard() {
       <p style={{ color: '#64748b', fontSize: '0.85rem', marginBottom: '1.5rem' }}>
         Wallet: {publicKey}
       </p>
-      {loading && <p style={{ color: '#94a3b8' }}>Loading…</p>}
-      {error && <p style={{ color: '#f87171' }}>Error: {error}</p>}
+      {loading && <p aria-live="polite" style={{ color: '#94a3b8' }}>Loading…</p>}
+      {error && <p role="alert" style={{ color: '#f87171' }}>Error: {error}</p>}
       {!loading && records.length === 0 && (
-        <p style={{ color: '#94a3b8' }}>No vaccination records found.</p>
+        <p aria-live="polite" style={{ color: '#94a3b8' }}>No vaccination records found.</p>
       )}
       {records.map((r) => <NFTCard key={r.token_id} record={r} />)}
     </div>
diff --git a/frontend/src/pages/VerifyPage.jsx b/frontend/src/pages/VerifyPage.jsx
index 9043f0b..52e3459 100644
--- a/frontend/src/pages/VerifyPage.jsx
+++ b/frontend/src/pages/VerifyPage.jsx
@@ -34,23 +34,28 @@ export default function VerifyPage() {
   return (
     <div style={styles.page}>
       <h2 style={{ marginBottom: '1.5rem', color: '#e2e8f0' }}>Verify Vaccination Status</h2>
-      <form onSubmit={handleVerify}>
+      <form onSubmit={handleVerify} aria-label="Verify vaccination status">
+        <label htmlFor="verify-wallet" style={{ display: 'block', color: '#94a3b8', fontSize: '0.85rem', marginBottom: '0.25rem' }}>
+          Stellar Wallet Address
+        </label>
         <input
+          id="verify-wallet"
           style={styles.input}
-          placeholder="Enter Stellar wallet address (G...)"
+          placeholder="G..."
           value={wallet}
           onChange={(e) => setWallet(e.target.value)}
+          aria-describedby={error ? 'verify-error' : undefined}
           required
         />
-        <button style={styles.btn} type="submit" disabled={loading}>
+        <button style={styles.btn} type="submit" disabled={loading} aria-busy={loading}>
           {loading ? 'Checking…' : 'Verify'}
         </button>
       </form>
 
-      {error && <p style={{ color: '#f87171', marginTop: '1rem' }}>Error: {error}</p>}
+      {error && <p id="verify-error" role="alert" style={{ color: '#f87171', marginTop: '1rem' }}>Error: {error}</p>}
 
       {result && (
-        <div style={{ marginTop: '1.5rem' }}>
+        <div aria-live="polite" style={{ marginTop: '1.5rem' }}>
           <VerificationBadge vaccinated={result.vaccinated} recordCount={result.record_count} />
           <div style={{ marginTop: '1.5rem' }}>
             {result.records?.map((r) => <NFTCard key={r.token_id} record={r} />)}