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

@@ -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();

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).

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>

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>

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 ? `