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
3 files src/popup/styles/popup.css+7 −0src/popup/styles/vars.css+4 −0src/popup/views/Vault.tsx+9 −0
src/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; }

view file

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 {

view file

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

view file