fix: comprehensive UI/UX accessibility and usability improvements
Public site: skip-to-content link, mobile menu focus trap + Escape key, aria-current on nav, keyboard navigation for carousels/tabs/articles, ARIA roles (tablist/tab/tabpanel, combobox/listbox, region, dialog), form labels + aria-describedby, 44px touch targets, semantic HTML (<time>, <del>), prefers-reduced-motion on Hero scroll hijack, mobile schedule filters, URL hash sync on scroll for correct refresh. Admin panel: password toggle aria-label, toast aria-live regions, SelectField keyboard navigation (Arrow/Enter/Escape), aria-invalid on validation errors, sidebar hamburger aria-label/expanded, nav aria-label, ArrayEditor aria-expanded on collapsible items.
This commit is contained in:
@@ -71,7 +71,7 @@ export function OpenDay({ data, popups, teamMembers }: OpenDayProps) {
|
||||
<div className="mt-4 text-center">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-gold/10 border border-gold/20 px-5 py-2.5 text-sm font-medium text-gold">
|
||||
<Calendar size={16} />
|
||||
{formatDateRu(event.date)}
|
||||
<time dateTime={event.date}>{formatDateRu(event.date)}</time>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -177,12 +177,12 @@ function ClassCard({
|
||||
<div className="rounded-xl border border-white/[0.06] bg-white/[0.02] p-3 sm:p-4 opacity-50">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<span className="rounded-md bg-neutral-800 px-2 py-0.5 text-[11px] font-bold text-neutral-500">
|
||||
{cls.startTime}–{cls.endTime}
|
||||
<span className="rounded-md bg-neutral-800 px-2 py-0.5 text-xs font-bold text-neutral-500">
|
||||
<time dateTime={`${cls.startTime}-${cls.endTime}`}>{cls.startTime}–{cls.endTime}</time>
|
||||
</span>
|
||||
<p className="text-sm text-neutral-500 line-through">{cls.trainer} · {cls.style}</p>
|
||||
<p className="text-sm text-neutral-500"><del>{cls.trainer} · {cls.style}</del></p>
|
||||
</div>
|
||||
<span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2.5 py-0.5 font-medium">
|
||||
<span className="text-xs text-neutral-500 bg-neutral-800 rounded-full px-2.5 py-0.5 font-medium">
|
||||
Отменено
|
||||
</span>
|
||||
</div>
|
||||
@@ -205,11 +205,11 @@ function ClassCard({
|
||||
window.dispatchEvent(new CustomEvent("openTrainerProfile", { detail: cls.trainer }));
|
||||
}}
|
||||
aria-label={`Профиль тренера: ${cls.trainer}`}
|
||||
className="relative flex items-center justify-center h-10 w-10 rounded-full overflow-hidden shrink-0 ring-1 ring-white/10 hover:ring-gold/30 transition-all cursor-pointer mt-0.5"
|
||||
className="relative flex items-center justify-center h-11 w-11 rounded-full overflow-hidden shrink-0 ring-1 ring-white/10 hover:ring-gold/30 transition-all cursor-pointer mt-0.5"
|
||||
title={`Подробнее о ${cls.trainer}`}
|
||||
>
|
||||
{trainerPhoto ? (
|
||||
<Image src={trainerPhoto} alt={cls.trainer} fill className="object-cover" sizes="40px" />
|
||||
<Image src={trainerPhoto} alt={cls.trainer} fill className="object-cover" sizes="44px" />
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full w-full bg-white/[0.06]">
|
||||
<User size={16} className="text-white/40" />
|
||||
@@ -231,8 +231,8 @@ function ClassCard({
|
||||
{/* Time + style */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="rounded-md bg-gold/10 px-2 py-0.5 text-[11px] font-bold text-gold min-w-[80px] text-center">
|
||||
{cls.startTime}–{cls.endTime}
|
||||
<span className="rounded-md bg-gold/10 px-2 py-0.5 text-xs font-bold text-gold min-w-[80px] text-center">
|
||||
<time dateTime={`${cls.startTime}-${cls.endTime}`}>{cls.startTime}–{cls.endTime}</time>
|
||||
</span>
|
||||
<span className="text-sm font-medium text-white/60">{cls.style}</span>
|
||||
</div>
|
||||
@@ -241,7 +241,7 @@ function ClassCard({
|
||||
{/* Badges */}
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{maxParticipants > 0 && (
|
||||
<span className={`rounded-full px-2.5 py-0.5 text-[10px] font-semibold ${
|
||||
<span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
|
||||
isFull
|
||||
? "bg-amber-500/15 border border-amber-500/25 text-amber-400"
|
||||
: "bg-white/[0.04] border border-white/[0.08] text-white/45"
|
||||
@@ -255,7 +255,7 @@ function ClassCard({
|
||||
{/* Book button */}
|
||||
<button
|
||||
onClick={() => onSignup({ classId: cls.id, label })}
|
||||
className={`shrink-0 self-center rounded-xl px-4 py-2 text-xs font-semibold transition-all cursor-pointer ${
|
||||
className={`shrink-0 self-center rounded-xl px-4 py-2.5 text-xs font-semibold transition-all cursor-pointer ${
|
||||
isFull
|
||||
? "bg-amber-500/10 border border-amber-500/25 text-amber-400 hover:bg-amber-500/20 hover:border-amber-500/40"
|
||||
: "bg-gold/10 border border-gold/25 text-gold hover:bg-gold/20 hover:border-gold/40"
|
||||
|
||||
Reference in New Issue
Block a user