From 88f4e4765b37c38a2355f87c7b05e8005e1070a4 Mon Sep 17 00:00:00 2001
From: rays <ray.slakinski@gmail.com>
Date: Sat, 7 Nov 2026 17:28:56 +0000
Subject: [PATCH] The search box says Search (#417)

On a phone it read "Search All S", the list's name cut off by the narrow box.
The placeholder is Search everywhere; the list it searches stays in the box's
accessible name.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RqkrVDqdiQEMWAkNGQ2tYA
---
 tests/ui/app.spec.ts | 3 +++
 web/CHANGELOG.md     | 1 +
 web/index.html       | 2 +-
 web/src/dialogs.ts   | 2 +-
 web/src/feedpage.ts  | 4 +++-
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/tests/ui/app.spec.ts b/tests/ui/app.spec.ts
index 4da04d3..6ee770d 100644
--- a/tests/ui/app.spec.ts
+++ b/tests/ui/app.spec.ts
@@ -1552,6 +1552,9 @@ test('All Subscriptions marks everything read, across every feed', async ({ page
   // Checking every feed is the top bar's alone; the header had a second button for it (#416).
   await expect(page.locator('#content .acts button')).toHaveCount(1);
   await expect(page.locator('#scanAll')).toBeVisible();
+  // The box says Search, which fits a phone; what it searches is its name (#417).
+  await expect(page.locator('#epSearch')).toHaveAttribute('placeholder', 'Search');
+  await expect(page.locator('#epSearch')).toHaveAccessibleName('Search All Subscriptions');
 
   page.once('dialog', d => d.accept());
   await page.locator('#content .acts [data-a="readall"]').click();
diff --git a/web/CHANGELOG.md b/web/CHANGELOG.md
index 0a64d6a..edea008 100644
--- a/web/CHANGELOG.md
+++ b/web/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- The search box says Search, which fits on a phone, rather than the list's name cut off part way (#417).
 - An item opens from the keyboard and with a screen reader: its title is a button. The feed list's rows and the Directory's shows are links to a screen reader, the open one marked current (#298).
 - An item's Play, Download and Delete buttons show while the keyboard is on one, as they do under the pointer (#299).
 - A screen reader names an item's read button for what it does, Mark read or Mark unread, not "●" (#300).
diff --git a/web/index.html b/web/index.html
index e483cd1..65be1e0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -28,7 +28,7 @@
     <button id="tbFlag" title="Pin the selected item, so it is never deleted" aria-label="Pin" data-icon="pin" disabled></button>
   </div>
   <span class="grow"></span>
-  <span class="clearable" id="epBox"><input type="search" id="epSearch" placeholder="Search items…" aria-label="Search"><button type="button" class="clearx" title="Clear" aria-label="Clear" data-icon="close"></button></span>
+  <span class="clearable" id="epBox"><input type="search" id="epSearch" placeholder="Search" aria-label="Search"><button type="button" class="clearx" title="Clear" aria-label="Clear" data-icon="close"></button></span>
   <div class="tgroup" id="admintools">
     <button id="prefs" title="Settings" aria-label="Settings" data-icon="settings"></button>
     <a id="admin" href="/admin" title="Admin: the server's settings, accounts and the log" aria-label="Admin" data-icon="admin"></a>
diff --git a/web/src/dialogs.ts b/web/src/dialogs.ts
index ffbca05..4b2b4c4 100644
--- a/web/src/dialogs.ts
+++ b/web/src/dialogs.ts
@@ -310,7 +310,7 @@ async function renderListed(v: {title: string, icon: string, url?: string, blurb
     await renderDirectory(v.url!,$('#directory'),n=>{ if(VIEWS[S.feed ?? '']===v) $('#count').textContent=`${v.title}: ${plural(n,'feed')}`; });
     return;
   }
-  $<HTMLInputElement>('#epSearch').placeholder='Search items…';
+  $<HTMLInputElement>('#epSearch').setAttribute('aria-label','Search items');
   box.innerHTML=`
     <div class="fhead slim">
       <div class="art">${v.icon}</div>
diff --git a/web/src/feedpage.ts b/web/src/feedpage.ts
index 360ec6d..2d04782 100644
--- a/web/src/feedpage.ts
+++ b/web/src/feedpage.ts
@@ -29,7 +29,9 @@ function renderFeed(){
   syncTools(null);
   if(!v&&!f&&!sg){ box.innerHTML='<p class="empty">Add a feed to get started.</p>'; $('#count').textContent=''; return; }
   const name=f?(f.title||f.id):sg?sg.name:v.title;
-  $<HTMLInputElement>('#epSearch').placeholder=`Search ${name}…`;
+  // The box says only Search: a list's name ran past a phone's narrow box (#417). What it
+  // searches is in its name for a screen reader.
+  $<HTMLInputElement>('#epSearch').setAttribute('aria-label',`Search ${name}`);
   const kids=f?S.feeds.filter(c=>c.group===f.id):[];
   const unreadAll=unreadInAll();
   box.innerHTML = (f&&kids.length ? groupHead(f,kids) : f ? `