c7e727f5191e
a11y/font/dark: aria-label on entry rows (TalkBack reads 'Title — username (login)'); text-size-adjust:none opt-out for fonts; color-scheme:dark light for native form widgets
- time
- 2026-05-01 04:22 UTC · 5 months ago
- machine
- koh2
- parent
- 97e4539146b7
↓ peach-browser-c7e727f5.tar.gzatlas at this save
files changed3 files
src/popup/styles/popup.css+7 −0src/popup/styles/vars.css+4 −0src/popup/views/Vault.tsx+9 −0src/popup/styles/popup.css+7 −0
@@ -7206,3 +7206,10 @@72067206 20% { background: rgba(217, 153, 51, 0.32); }72077207 100% { background: transparent; }72087208 }7209+7210+/* Font scaling — Capacitor's WebView ignores Android system font scale by7211+ default (WebSettings.textZoom=100). We opt out explicitly so behavior is7212+ consistent across platforms. Migrating to rem and enabling textZoom is a7213+ future accessibility improvement, but requires reflow-safe layouts across7214+ the entire UI. */7215+html { -webkit-text-size-adjust: none; text-size-adjust: none; }src/popup/styles/vars.css+4 −0
@@ -147,6 +147,10 @@147147 --peach-dur-600: 600ms;148148 --peach-copy-clear: 1.4s;149149 --peach-rune-idle: rgba(245, 240, 234, 0.16);150+ /* Tell the browser engine which color schemes the UI knows how to render —151+ this gets us correct form-control colors and scrollbar tinting in the152+ WebView when the user follows the system theme. */153+ color-scheme: dark light;150154 }151155 152156 .light {src/popup/views/Vault.tsx+9 −0
@@ -554,10 +554,19 @@554554 entryMatchesDomain(entry, props.currentTabDomain);555555 const isSelected = () => selectedIds().has(entry.id);556556 557+ const ariaLabel = (() => {558+ const tag = isPasskey ? "passkey" : isNote ? "note" : "login";559+ const sub = entry.username || domain || "";560+ return sub561+ ? `${entry.title} — ${sub} (${tag})`562+ : `${entry.title} (${tag})`;563+ })();557564 return (558565 <button559566 class={`peach-entry-row${!selecting() && props.selectedEntryId === entry.id ? " is-active" : ""}${!selecting() && isTabMatch() ? " is-tab-match" : ""}${selecting() && isSelected() ? " is-selected" : ""}${flashId() === entry.id ? " is-copy-flash" : ""}`}560567 style={{ "animation-delay": `${Math.min(index(), 24) * 20}ms` }}568+ aria-label={ariaLabel}569+ aria-pressed={selecting() ? isSelected() : undefined}561570 onTouchStart={(e) => handleRowTouchStart(entry, e)}562571 onTouchMove={handleRowTouchMove}563572 onTouchEnd={(e) => void handleRowTouchEnd(entry, e)}