From 5dd0cb53ef837ef6fb9a7347659fbb3dd6b0156a Mon Sep 17 00:00:00 2001
From: dxfareed <einstein1101@proton.me>
Date: Sat, 5 Sep 2026 18:57:52 +0100
Subject: [PATCH 1/2] a11y(wallet): give icon-only buttons an accessible name

Fifteen icon-only buttons announced as bare "button" to a screen reader.
Seven had a title tooltip but no accessible name; eight had neither.

Labelled: dashboard copy-address and its two dismiss buttons, the NFT
refresh and detail close, agent clear-history and back, contacts delete,
multisig remove-signer, the install banner dismiss, the contact picker
close, and the back arrows on settings/agent, settings/profile and
token/[code].

Labels follow the vocabulary already in the tree ("Back to settings",
"Back") rather than a new one. The two dashboard dismiss buttons, both
titled "Dismiss", get distinct labels so they are told apart out of
context. The agent toggle also picks up role="switch" and aria-checked to
match the Toggle in components/ui/primitives.tsx, which is the existing
house pattern for a switch.

Additive only: 18 lines, all ARIA attributes, no style, layout or copy
changed. Buttons whose label is rendered text were left alone.
---
 frontend/wallet/app/InstallBanner.tsx              | 1 +
 frontend/wallet/app/agent/page.tsx                 | 2 ++
 frontend/wallet/app/contacts/page.tsx              | 1 +
 frontend/wallet/app/dashboard/page.tsx             | 3 +++
 frontend/wallet/app/multisig/components/Wizard.tsx | 1 +
 frontend/wallet/app/nfts/page.tsx                  | 2 ++
 frontend/wallet/app/settings/agent/page.tsx        | 5 +++++
 frontend/wallet/app/settings/profile/page.tsx      | 1 +
 frontend/wallet/app/token/[code]/page.tsx          | 1 +
 frontend/wallet/components/ContactPicker.tsx       | 1 +
 10 files changed, 18 insertions(+)

diff --git a/frontend/wallet/app/InstallBanner.tsx b/frontend/wallet/app/InstallBanner.tsx
index 92ff152ea..99638974c 100644
--- a/frontend/wallet/app/InstallBanner.tsx
+++ b/frontend/wallet/app/InstallBanner.tsx
@@ -103,6 +103,7 @@ export function InstallBanner() {
         </div>
         <button 
           onClick={handleDismiss} 
+          aria-label="Dismiss install prompt"
           style={{ background: 'none', border: 'none', color: 'var(--warm-grey)', cursor: 'pointer', padding: '4px' }}
         >
           <X size={20} strokeWidth={1.5} />
diff --git a/frontend/wallet/app/agent/page.tsx b/frontend/wallet/app/agent/page.tsx
index 8c19d123e..cdf5dd1ba 100644
--- a/frontend/wallet/app/agent/page.tsx
+++ b/frontend/wallet/app/agent/page.tsx
@@ -390,6 +390,7 @@ export default function AgentPage() {
         <header className="wallet-nav">
           <button
             onClick={() => router.back()}
+            aria-label="Back"
             style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem', color: 'var(--warm-grey)', display: 'flex' }}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
@@ -579,6 +580,7 @@ export default function AgentPage() {
         <button
           onClick={clearHistory}
           className="agent-header__action"
+          aria-label="Clear history"
           title="Clear history"
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
diff --git a/frontend/wallet/app/contacts/page.tsx b/frontend/wallet/app/contacts/page.tsx
index c81e5901a..727e9717f 100644
--- a/frontend/wallet/app/contacts/page.tsx
+++ b/frontend/wallet/app/contacts/page.tsx
@@ -139,6 +139,7 @@ export default function ContactsPage() {
                 <button
                   onClick={() => removeContact(contact.id)}
                   style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(246,247,248,0.3)', padding: '0.5rem' }}
+                  aria-label="Delete contact"
                   title="Delete contact"
                 >
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
diff --git a/frontend/wallet/app/dashboard/page.tsx b/frontend/wallet/app/dashboard/page.tsx
index 250c6d025..27403d652 100644
--- a/frontend/wallet/app/dashboard/page.tsx
+++ b/frontend/wallet/app/dashboard/page.tsx
@@ -655,6 +655,7 @@ function DashboardPageContent() {
             }}
             className='settings-button'
             style={{ color: "var(--color-muted)"}}
+            aria-label="Copy wallet address"
             title="Copy wallet address"
           >
             <span className="address-chip">
@@ -791,6 +792,7 @@ function DashboardPageContent() {
                 id="dashboard-prf-downgrade-dismiss"
                 onClick={() => setPrfDowngradeDismissed(true)}
                 style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-muted)', fontSize: '1rem', lineHeight: 1, padding: '0 0 0 0.5rem' }}
+                aria-label="Dismiss fee-payer warning"
                 title="Dismiss"
               >
                 ×
@@ -826,6 +828,7 @@ function DashboardPageContent() {
               <button
                 onClick={() => setSweepDismissed(true)}
                 style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-muted)', fontSize: '1rem', lineHeight: 1, padding: '0 0 0 0.5rem' }}
+                aria-label="Dismiss stranded balance notice"
                 title="Dismiss"
               >
                 ×
diff --git a/frontend/wallet/app/multisig/components/Wizard.tsx b/frontend/wallet/app/multisig/components/Wizard.tsx
index a535dde0d..61fe75667 100644
--- a/frontend/wallet/app/multisig/components/Wizard.tsx
+++ b/frontend/wallet/app/multisig/components/Wizard.tsx
@@ -120,6 +120,7 @@ export default function Wizard({ onDeploySuccess }: WizardProps) {
                   justifyContent: "center",
                   fontSize: "1.125rem"
                 }}
+                aria-label="Remove signer"
                 title="Remove signer"
               >
                 ×
diff --git a/frontend/wallet/app/nfts/page.tsx b/frontend/wallet/app/nfts/page.tsx
index bcff70e02..10e66602f 100644
--- a/frontend/wallet/app/nfts/page.tsx
+++ b/frontend/wallet/app/nfts/page.tsx
@@ -226,6 +226,7 @@ export default function NFTGalleryPage() {
                 color: 'var(--off-white)',
                 cursor: 'pointer',
               }}
+              aria-label="Refresh NFTs"
               title="Refresh NFTs"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ animation: loading ? 'spin 1s linear infinite' : 'none' }}>
@@ -606,6 +607,7 @@ export default function NFTGalleryPage() {
                   setSelectedNFT(null)
                   setShowRawJson(false)
                 }}
+                aria-label="Close NFT details"
                 style={{ background: 'var(--surface-md)', border: 'none', color: 'var(--off-white)', width: '32px', height: '32px', borderRadius: '50%', cursor: 'pointer', fontSize: '1.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
               >
                 ✕
diff --git a/frontend/wallet/app/settings/agent/page.tsx b/frontend/wallet/app/settings/agent/page.tsx
index 60828fe76..e2b678fbb 100644
--- a/frontend/wallet/app/settings/agent/page.tsx
+++ b/frontend/wallet/app/settings/agent/page.tsx
@@ -45,6 +45,7 @@ export default function AgentSettingsPage() {
       <header className="wallet-nav">
         <button
           onClick={() => router.back()}
+          aria-label="Back to settings"
           style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem', color: 'var(--warm-grey)', display: 'flex' }}
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
@@ -77,6 +78,10 @@ export default function AgentSettingsPage() {
             </div>
             <button
               onClick={() => setAgentEnabled(!agentEnabled)}
+              type="button"
+              role="switch"
+              aria-checked={agentEnabled}
+              aria-label="Enable AI agent"
               style={{
                 position: 'relative', width: '44px', height: '24px', borderRadius: '100px',
                 background: agentEnabled ? 'var(--gold)' : 'var(--surface-md)',
diff --git a/frontend/wallet/app/settings/profile/page.tsx b/frontend/wallet/app/settings/profile/page.tsx
index dabd4f4c2..756bfb8ae 100644
--- a/frontend/wallet/app/settings/profile/page.tsx
+++ b/frontend/wallet/app/settings/profile/page.tsx
@@ -87,6 +87,7 @@ export default function ProfileSettingsPage() {
       <header className="wallet-nav">
         <button
           onClick={() => router.back()}
+          aria-label="Back to settings"
           style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem', color: 'var(--warm-grey)', display: 'flex' }}
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
diff --git a/frontend/wallet/app/token/[code]/page.tsx b/frontend/wallet/app/token/[code]/page.tsx
index 9154453f5..292c45376 100644
--- a/frontend/wallet/app/token/[code]/page.tsx
+++ b/frontend/wallet/app/token/[code]/page.tsx
@@ -228,6 +228,7 @@ export default function TokenPage() {
       {/* Nav */}
       <nav className="wallet-nav">
         <button onClick={() => router.back()}
+          aria-label="Back"
           style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--warm-grey)', display: 'flex', padding: '0.25rem' }}>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
             <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
diff --git a/frontend/wallet/components/ContactPicker.tsx b/frontend/wallet/components/ContactPicker.tsx
index 3ad1eeed1..0e841eb0d 100644
--- a/frontend/wallet/components/ContactPicker.tsx
+++ b/frontend/wallet/components/ContactPicker.tsx
@@ -47,6 +47,7 @@ export function ContactPicker({ onSelect, onClose }: ContactPickerProps) {
             </h3>
             <button
               onClick={onClose}
+              aria-label="Close contact picker"
               style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(246,247,248,0.4)', padding: '0.5rem' }}
             >
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

From 3d26e6047a96b3bdcd9711c2be8e2e954b804cb6 Mon Sep 17 00:00:00 2001
From: Miracle656 <iupacnumen2020@gmail.com>
Date: Sun, 6 Sep 2026 07:45:13 +0100
Subject: [PATCH 2/2] a11y(wallet): keep visible text inside the accessible
 name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two of the labels added here replaced a visible label rather than
supplying a missing one, which is the case WCAG 2.5.3 (Label in Name)
covers: a speech-input user says what they can see, so the accessible
name has to contain it.

The dashboard copy button is not icon-only — it renders the truncated
address, and the dashboard is the only place that address appears. A
bare "Copy wallet address" said what the button does but took the
address away from screen reader users entirely. The label now carries
both.

The agent toggle sits beside a visible "Veil Agent" heading, so that is
its name; role="switch" and aria-checked already announce the on/off
state, which "Enable AI agent" was duplicating in words and, when the
switch was already on, contradicting.

Claude-Session: https://claude.ai/code/session_01USgemLt4Rnz4SGB1Srf3GB
---
 frontend/wallet/app/dashboard/page.tsx      | 2 +-
 frontend/wallet/app/settings/agent/page.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/wallet/app/dashboard/page.tsx b/frontend/wallet/app/dashboard/page.tsx
index 27403d652..4338fb912 100644
--- a/frontend/wallet/app/dashboard/page.tsx
+++ b/frontend/wallet/app/dashboard/page.tsx
@@ -655,7 +655,7 @@ function DashboardPageContent() {
             }}
             className='settings-button'
             style={{ color: "var(--color-muted)"}}
-            aria-label="Copy wallet address"
+            aria-label={`Copy wallet address ${walletAddress.slice(0, 6)}…${walletAddress.slice(-6)}`}
             title="Copy wallet address"
           >
             <span className="address-chip">
diff --git a/frontend/wallet/app/settings/agent/page.tsx b/frontend/wallet/app/settings/agent/page.tsx
index e2b678fbb..5ee8bb65e 100644
--- a/frontend/wallet/app/settings/agent/page.tsx
+++ b/frontend/wallet/app/settings/agent/page.tsx
@@ -81,7 +81,7 @@ export default function AgentSettingsPage() {
               type="button"
               role="switch"
               aria-checked={agentEnabled}
-              aria-label="Enable AI agent"
+              aria-label="Veil Agent"
               style={{
                 position: 'relative', width: '44px', height: '24px', borderRadius: '100px',
                 background: agentEnabled ? 'var(--gold)' : 'var(--surface-md)',