fix(ui): wave 2 from critique re-run — AA contrast, unified PageHeader, checkout confirm
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m46s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m46s
Nav: teams/settings/services back out of the nav until product-ready (user decision); teams page was already half-finished (UUID member display is a backend limitation). Payment: explicit confirmation dialog (plan, amount, billing period, Stripe note) before any redirect; ?plan= URL now pre-opens the dialog instead of triggering a silent checkout. Contrast AA sweep (71 replacements): functional micro-labels raised to >=60-65% opacity and >=10px across sidebar, header, pricing, landing; decorative all-caps 'interface' label removed. Design unification: new PageHeader component (accent pill + serif base/accent title) applied to settings, services, reviews, teams; pricing header returned to the editorial voice (serif + accent pill); dead GlossaryCard deleted. i18n residuals: suggestion chips, 'Standard' provider label, notification close, model-combobox strings extracted (+broken bg-surface/border-border- subtle tokens fixed); ~45 new keys EN+FR; 13 dead keys removed; zero missing keys verified. Reviews: icon-only row actions now carry visible text; 'Approve all' is two-step armed-confirm. Accelerators: Ctrl/Cmd+Enter submits; arrow-key navigation in the language combobox; recent-jobs history cap 8->20 with per-job download; source=target config rejected; empty 'Master Quality' badge removed. Cookie consent: reopenable via footer link, emoji replaced with drawn icon. Verified: build exit 0, vitest 9/9, eslint 64 errors = previous level, 0 missing i18n keys.
This commit is contained in:
@@ -70,16 +70,34 @@ function Combobox({
|
||||
|
||||
const label = value === 'auto' ? autoLabel : allOptions.find(l => l.code === value)?.name ?? value;
|
||||
|
||||
const handleListboxKeys = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && open) {
|
||||
e.stopPropagation();
|
||||
closeAndRefocus();
|
||||
return;
|
||||
}
|
||||
if (!open || (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')) return;
|
||||
e.preventDefault();
|
||||
const options = Array.from(
|
||||
ref.current?.querySelectorAll<HTMLButtonElement>('[role="option"]') ?? []
|
||||
);
|
||||
if (options.length === 0) return;
|
||||
const idx = options.indexOf(document.activeElement as HTMLButtonElement);
|
||||
const next = e.key === 'ArrowDown'
|
||||
? options[Math.min(options.length - 1, idx + 1)]
|
||||
: options[Math.max(0, idx - 1)];
|
||||
// from the search input, ArrowDown goes to the first option
|
||||
(idx === -1 && document.activeElement === inputRef.current
|
||||
? options[e.key === 'ArrowDown' ? 0 : options.length - 1]
|
||||
: next
|
||||
).focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="relative text-left"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Escape' && open) {
|
||||
e.stopPropagation();
|
||||
closeAndRefocus();
|
||||
}
|
||||
}}
|
||||
onKeyDown={handleListboxKeys}
|
||||
>
|
||||
<button
|
||||
ref={triggerRef}
|
||||
|
||||
Reference in New Issue
Block a user