From 025aaea67fd2b5371ddeb4a070c229fd0fa588ad Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Sat, 15 Aug 2026 05:20:52 +0000
Subject: [PATCH] fix: label instance form controls (#4156)

---
 .changelog/next/changed-issue-4156.md |  1 +
 client/src/a11yConventions.test.js    | 17 +++++++++++++++++
 client/src/pages/Instances.jsx        | 14 ++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 .changelog/next/changed-issue-4156.md

diff --git a/.changelog/next/changed-issue-4156.md b/.changelog/next/changed-issue-4156.md
new file mode 100644
index 0000000000..3589942d11
--- /dev/null
+++ b/.changelog/next/changed-issue-4156.md
@@ -0,0 +1 @@
+- Instance and peer settings now have clear screen-reader labels.
diff --git a/client/src/a11yConventions.test.js b/client/src/a11yConventions.test.js
index 994b0749c0..c2c68e68d2 100644
--- a/client/src/a11yConventions.test.js
+++ b/client/src/a11yConventions.test.js
@@ -432,6 +432,23 @@ describe('a11y conventions', () => {
     expect(offenders, `Icon-only <button> with no aria-label/aria-labelledby — title alone isn't touch-discoverable and isn't reliably read as the accessible name; see media/MediaCard.jsx's Annotate button for the convention:\n${offenders.join('\n')}`).toEqual([]);
   });
 
+  it('gives the inline Instances form controls accessible names', () => {
+    // These controls live in compact peer-management rows where visible labels
+    // would break the layout. Keep explicit names on each input so placeholders
+    // never become their only screen-reader context.
+    const file = 'src/pages/Instances.jsx';
+    const src = readFileSync(join(CLIENT_ROOT, file), 'utf8');
+    const offenders = [];
+    const re = /<input\b/g;
+    let m;
+    while ((m = re.exec(src))) {
+      const tag = openingTagAt(src, m.index, '<input'.length);
+      if (!tag || /\baria-label\s*=|\baria-labelledby\s*=/.test(tag)) continue;
+      offenders.push(`${file}:${lineOf(src, m.index)}`);
+    }
+    expect(offenders, `Instances input without an accessible name:\n${offenders.join('\n')}`).toEqual([]);
+  });
+
   it('meets the 44px touch-target minimum on Close buttons', () => {
     // Close buttons keep shipping sized to their bare icon (w-4 h-4, p-1,
     // p-1.5) instead of a real tap target. components/Drawer.jsx:106 is the
diff --git a/client/src/pages/Instances.jsx b/client/src/pages/Instances.jsx
index 7d87821de9..363bc171f2 100644
--- a/client/src/pages/Instances.jsx
+++ b/client/src/pages/Instances.jsx
@@ -250,6 +250,7 @@ function SelfCard({ self, onUpdate, syncStatus, tailnetInfo }) {
           {editing ? (
             <div className="flex items-center gap-2 flex-1">
               <input
+                aria-label="Instance name"
                 value={name}
                 onChange={e => setName(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && saveName()}
@@ -369,6 +370,7 @@ function AddPeerForm({ onAdd }) {
       </h3>
       <div className="flex flex-wrap gap-2">
         <input
+          aria-label="Peer address"
           value={address}
           onChange={e => setAddress(e.target.value)}
           placeholder="100.64.x.x"
@@ -377,6 +379,7 @@ function AddPeerForm({ onAdd }) {
           className="bg-port-bg border border-port-border rounded px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-hidden focus:border-port-accent flex-1 min-w-[140px]"
         />
         <input
+          aria-label="Peer port"
           value={port}
           onChange={e => setPort(e.target.value)}
           placeholder="5554"
@@ -386,6 +389,7 @@ function AddPeerForm({ onAdd }) {
           className="bg-port-bg border border-port-border rounded px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-hidden focus:border-port-accent w-20"
         />
         <input
+          aria-label="Peer name"
           value={name}
           onChange={e => setName(e.target.value)}
           placeholder="Name (optional)"
@@ -411,6 +415,7 @@ function AddPeerForm({ onAdd }) {
         {showAuth && (
           <div className="flex flex-wrap gap-2 mt-2">
             <input
+              aria-label="Peer username"
               value={username}
               onChange={e => setUsername(e.target.value)}
               placeholder="Username (optional)"
@@ -418,6 +423,7 @@ function AddPeerForm({ onAdd }) {
               className="bg-port-bg border border-port-border rounded px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-hidden focus:border-port-accent flex-1 min-w-[120px]"
             />
             <input
+              aria-label="Peer password"
               value={password}
               onChange={e => setPassword(e.target.value)}
               placeholder="Password"
@@ -931,6 +937,7 @@ function PeerHostEditor({ peer, onRefresh, tailnetInfo }) {
     return (
       <div className="mt-1 flex items-center gap-1 flex-wrap">
         <input
+          aria-label="Peer hostname"
           value={value}
           onChange={e => setValue(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && save()}
@@ -938,7 +945,7 @@ function PeerHostEditor({ peer, onRefresh, tailnetInfo }) {
           className="bg-port-bg border border-port-border rounded px-2 py-0.5 text-xs text-white font-mono focus:outline-hidden focus:border-port-accent flex-1 min-w-[180px]"
           autoFocus
         />
-        <button onClick={save} disabled={saving} aria-label="Save name" className="text-port-success hover:text-port-success/80 disabled:opacity-50"><Check size={14} /></button>
+        <button onClick={save} disabled={saving} aria-label="Save hostname" className="text-port-success hover:text-port-success/80 disabled:opacity-50"><Check size={14} /></button>
         <button onClick={() => setEditing(false)} aria-label="Cancel" className="text-gray-500 hover:text-white"><X size={14} /></button>
         {suggestion && suggestion !== value && (
           <button
@@ -1036,6 +1043,7 @@ function PeerAuthEditor({ peer, onRefresh }) {
     return (
       <div className="mt-1 flex items-center gap-1 flex-wrap">
         <input
+          aria-label="Peer username"
           value={username}
           onChange={e => setUsername(e.target.value)}
           placeholder="user (optional)"
@@ -1043,6 +1051,7 @@ function PeerAuthEditor({ peer, onRefresh }) {
           className="bg-port-bg border border-port-border rounded px-2 py-0.5 text-xs text-white focus:outline-hidden focus:border-port-accent w-28"
         />
         <input
+          aria-label="Peer password"
           value={password}
           onChange={e => setPassword(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && save()}
@@ -1052,7 +1061,7 @@ function PeerAuthEditor({ peer, onRefresh }) {
           className="bg-port-bg border border-port-border rounded px-2 py-0.5 text-xs text-white focus:outline-hidden focus:border-port-accent flex-1 min-w-[120px]"
           autoFocus
         />
-        <button onClick={save} disabled={saving || !password} aria-label="Save name" className="text-port-success hover:text-port-success/80 disabled:opacity-50"><Check size={14} /></button>
+        <button onClick={save} disabled={saving || !password} aria-label="Save credentials" className="text-port-success hover:text-port-success/80 disabled:opacity-50"><Check size={14} /></button>
         <button onClick={() => setEditing(false)} aria-label="Cancel" className="text-gray-500 hover:text-white"><X size={14} /></button>
         {hasAuth && (
           <button onClick={clear} disabled={saving} className="text-[10px] text-gray-500 hover:text-port-error underline disabled:opacity-50">remove</button>
@@ -1249,6 +1258,7 @@ function PeerCard({ peer, onRefresh, syncStatus, tailnetInfo }) {
           {editingName ? (
             <div className="flex items-center gap-1">
               <input
+                aria-label="Peer name"
                 value={name}
                 onChange={e => setName(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && saveName()}