starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-11-02 08:15:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: keep the mail search placeholder short and show the / shortcut as a key cap so it isn't cut off

Browse Source
This commit is contained in:
Linus Rath
2026-10-28 11:01:55 +01:00
parent 9eaf7ca754
commit 7e25b9d7fa
2 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/search/__tests__/search-box.test.tsx
+19
View File
@@ -264,3 +264,22 @@ describe('SearchBox draft', () => {
expect(input().value).toBe('from:alice');
});
});
// At 1440 the list column cut "Search mail... (press /)" to "Search mail...
// (pres". The placeholder is short now; the "/" shortcut shows as a key cap
// at the end of the empty field and is named for assistive tech.
describe('SearchBox shortcut hint', () => {
it('keeps the placeholder short and shows the / key apart', () => {
const { container } = render(<Harness />);
expect(input().getAttribute('placeholder')).toBe('search_placeholder');
expect(input().getAttribute('aria-keyshortcuts')).toBe('/');
const kbd = container.querySelector('kbd');
expect(kbd?.textContent).toBe('/');
expect(kbd?.getAttribute('aria-hidden')).toBe('true');
});
it('drops the key cap once something is typed', () => {
const { container } = render(<Harness initial="invoice" />);
expect(container.querySelector('kbd')).toBeNull();
});
});
components/search/search-box.tsx
+13 -2
View File
@@ -147,7 +147,10 @@ export function SearchBox({ value, onChange, onSubmit, onClear, onSelectContact,
<Input
type="search"
autoFocus={autoFocus}
placeholder={placeholder ?? t(touch ? "search_placeholder" : "search_placeholder_hint")}
// Short, so a narrow list column doesn't cut it; the "/" shortcut
// shows as a key cap below instead of in the text.
placeholder={placeholder ?? t("search_placeholder")}
aria-keyshortcuts={touch ? undefined : "/"}
value={draft}
onChange={(e) => {
setDraft(e.target.value);
@@ -166,7 +169,7 @@ export function SearchBox({ value, onChange, onSubmit, onClear, onSelectContact,
close();
}}
onKeyDown={handleKeyDown}
className={cn("ps-9 h-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", draft && "pe-8")}
className={cn("peer ps-9 h-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", draft ? "pe-8" : !touch && "pe-8")}
role="combobox"
aria-expanded={showDropdown}
aria-controls={listId}
@@ -178,6 +181,14 @@ export function SearchBox({ value, onChange, onSubmit, onClear, onSelectContact,
disabled={disabled}
title={title}
/>
{!draft && !touch && (
<kbd
aria-hidden="true"
className="pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 rounded border border-border px-1.5 font-sans text-[11px] leading-4 text-muted-foreground peer-focus:hidden"
>
/
</kbd>
)}
{draft && (
<button
type="button"