refactor(a11y): 44×44 touch targets + normalize accent-bg alpha
This commit is contained in:
@@ -317,7 +317,8 @@ function SidebarFooter({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => i18n.changeLanguage(next)}
|
||||
className="h-7 px-2.5 rounded-md border border-line bg-surface text-cap text-ink-2 hover:bg-surface-2 hover:text-ink transition-colors"
|
||||
// h-11 + min-w-11 — DESIGN.md §13 touch target enforcement.
|
||||
className="h-11 min-w-11 px-2.5 rounded-md border border-line bg-surface text-cap text-ink-2 hover:bg-surface-2 hover:text-ink transition-colors inline-flex items-center justify-center"
|
||||
aria-label={`Language: ${cur.toUpperCase()}, click to switch`}
|
||||
>
|
||||
{cur.toUpperCase()}
|
||||
@@ -398,7 +399,8 @@ function AuthedUserBlock({
|
||||
onClick={() => auth.signoutRedirect().catch(() => auth.removeUser())}
|
||||
title={t('auth.logout', { defaultValue: 'Logout' })}
|
||||
aria-label={t('auth.logout', { defaultValue: 'Logout' })}
|
||||
className="size-7 rounded-md text-mute hover:text-ink hover:bg-surface-2 inline-flex items-center justify-center transition-colors shrink-0"
|
||||
// size-11 = 44×44 WCAG AAA per DESIGN.md §13.
|
||||
className="size-11 rounded-md text-mute hover:text-ink hover:bg-surface-2 inline-flex items-center justify-center transition-colors shrink-0"
|
||||
>
|
||||
<span aria-hidden>⎋</span>
|
||||
</button>
|
||||
|
||||
@@ -27,7 +27,9 @@ export function ThemeSwitch() {
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label={t('theme.label')}
|
||||
className="inline-flex items-center rounded-md border border-line bg-surface h-7 overflow-hidden"
|
||||
// h-11 = 44px WCAG AAA touch target per DESIGN.md §13.
|
||||
// Segmented control: 3 buttons × w-11 = 132px total width.
|
||||
className="inline-flex items-center rounded-md border border-line bg-surface h-11 overflow-hidden"
|
||||
>
|
||||
{items.map((item) => {
|
||||
const Icon = item.icon
|
||||
@@ -42,7 +44,8 @@ export function ThemeSwitch() {
|
||||
title={item.label}
|
||||
onClick={() => setPreference(item.id)}
|
||||
className={cn(
|
||||
'inline-flex h-full w-7 items-center justify-center transition-colors',
|
||||
// w-11 paired с parent h-11 → 44×44 per button.
|
||||
'inline-flex h-full w-11 items-center justify-center transition-colors',
|
||||
active
|
||||
? 'bg-accent text-on-accent'
|
||||
: 'text-mute hover:text-ink hover:bg-surface-2',
|
||||
|
||||
@@ -29,7 +29,9 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
|
||||
type="button"
|
||||
aria-label={t('nav.menu', { defaultValue: 'Меню' })}
|
||||
onClick={onMenuClick}
|
||||
className="lg:hidden -ml-1 p-1.5 rounded-sm text-ink-2 hover:text-ink hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"
|
||||
// size-11 = 44×44 touch target per DESIGN.md §13.
|
||||
// Icon stays 20px; padding wrapper provides hit area.
|
||||
className="lg:hidden -ml-1 size-11 inline-flex items-center justify-center rounded-sm text-ink-2 hover:text-ink hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"
|
||||
>
|
||||
<Menu size={20} strokeWidth={1.75} />
|
||||
</button>
|
||||
@@ -153,7 +155,9 @@ function NotificationsBell() {
|
||||
title={t('topbar.notifications', { defaultValue: 'Уведомления' })}
|
||||
aria-label={t('topbar.notifications', { defaultValue: 'Уведомления' })}
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="relative size-7 rounded-md text-ink-2 hover:text-ink hover:bg-surface-2 inline-flex items-center justify-center transition-colors"
|
||||
// size-11 = 44×44 WCAG AAA touch target per DESIGN.md §13.
|
||||
// Bell icon stays size=14; wrapper provides hit area.
|
||||
className="relative size-11 rounded-md text-ink-2 hover:text-ink hover:bg-surface-2 inline-flex items-center justify-center transition-colors"
|
||||
>
|
||||
<Bell size={14} strokeWidth={1.75} />
|
||||
{totalUnread > 0 && (
|
||||
|
||||
Reference in New Issue
Block a user