test: vitest unit + playwright e2e suites; fix a11y, contrast, no-JS reveal
- vitest: dictionary parity, slug-map bijection, content-schema validation, JSON-LD (23) - playwright: both locales, language-switch mapping (incl. no-JS), CV downloads, form happy-path + honeypot, axe a11y on 5 templates x 2 themes (23) - fix: raise ink-faint + light accent to meet WCAG AA 4.5:1 (axe-verified) - fix: gate reveal animations behind html.js so content is visible without JS (progressive enhancement - was hidden at opacity 0); scan reduced-motion path - fix: validate contact form before the anti-bot time-trap (no false success) - chore: ESLint node globals, typed diagram props, resvg fontFiles, prettier pass Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
cesnimda
@@ -21,8 +21,8 @@ const fieldClass =
|
||||
<div class="mx-auto grid max-w-[--content-max] gap-12 px-6 py-14 lg:grid-cols-12">
|
||||
<div class="lg:col-span-7">
|
||||
<SectionLabel text={d.nav.contact} />
|
||||
<h1 class="mt-4 text-h1">{profile.contactHeading}</h1>
|
||||
<p class="mt-3 text-body-lg text-ink-muted">{profile.contactBody}</p>
|
||||
<h1 class="text-h1 mt-4">{profile.contactHeading}</h1>
|
||||
<p class="text-body-lg text-ink-muted mt-3">{profile.contactBody}</p>
|
||||
|
||||
<form
|
||||
id="contact-form"
|
||||
@@ -32,21 +32,27 @@ const fieldClass =
|
||||
novalidate
|
||||
>
|
||||
<div>
|
||||
<label for="cf-name" class="mb-1.5 block text-small font-medium text-ink">{d.form.name}</label>
|
||||
<label for="cf-name" class="text-small text-ink mb-1.5 block font-medium"
|
||||
>{d.form.name}</label
|
||||
>
|
||||
<input id="cf-name" name="name" type="text" autocomplete="name" class={fieldClass} />
|
||||
<p data-error-for="name" hidden role="alert" class="mt-1.5 text-small text-danger"></p>
|
||||
<p data-error-for="name" hidden role="alert" class="text-small text-danger mt-1.5"></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="cf-email" class="mb-1.5 block text-small font-medium text-ink">{d.form.email}</label>
|
||||
<label for="cf-email" class="text-small text-ink mb-1.5 block font-medium"
|
||||
>{d.form.email}</label
|
||||
>
|
||||
<input id="cf-email" name="email" type="email" autocomplete="email" class={fieldClass} />
|
||||
<p data-error-for="email" hidden role="alert" class="mt-1.5 text-small text-danger"></p>
|
||||
<p data-error-for="email" hidden role="alert" class="text-small text-danger mt-1.5"></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="cf-message" class="mb-1.5 block text-small font-medium text-ink">{d.form.message}</label>
|
||||
<label for="cf-message" class="text-small text-ink mb-1.5 block font-medium"
|
||||
>{d.form.message}</label
|
||||
>
|
||||
<textarea id="cf-message" name="message" rows="5" class={fieldClass}></textarea>
|
||||
<p data-error-for="message" hidden role="alert" class="mt-1.5 text-small text-danger"></p>
|
||||
<p data-error-for="message" hidden role="alert" class="text-small text-danger mt-1.5"></p>
|
||||
</div>
|
||||
|
||||
{/* Honeypot — hidden from users and assistive tech */}
|
||||
@@ -58,27 +64,39 @@ const fieldClass =
|
||||
<button
|
||||
type="submit"
|
||||
data-sending={d.form.sending}
|
||||
class="inline-flex w-fit items-center justify-center rounded-sm bg-accent px-5 py-2.5 text-body font-semibold text-accent-ink transition-[filter] duration-[--dur-quick] hover:brightness-105"
|
||||
class="bg-accent text-body text-accent-ink inline-flex w-fit items-center justify-center rounded-sm px-5 py-2.5 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
|
||||
>
|
||||
<span data-label>{d.form.send}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="form-success" hidden class="mt-8 rounded-md border border-accent/40 bg-surface-2 p-6">
|
||||
<p class="flex items-center gap-2 text-body font-semibold text-accent">
|
||||
<div
|
||||
id="form-success"
|
||||
hidden
|
||||
class="border-accent/40 bg-surface-2 mt-8 rounded-md border p-6"
|
||||
>
|
||||
<p class="text-body text-accent flex items-center gap-2 font-semibold">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path class="check-path" d="M5 12l5 5 9-11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path
|
||||
class="check-path"
|
||||
d="M5 12l5 5 9-11"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
{d.form.successTitle}
|
||||
</p>
|
||||
<p class="mt-2 text-body text-ink-muted">{d.form.successBody}</p>
|
||||
<p class="text-body text-ink-muted mt-2">{d.form.successBody}</p>
|
||||
</div>
|
||||
|
||||
<div id="form-error" hidden class="mt-8 rounded-md border border-danger/40 bg-surface-2 p-6">
|
||||
<p class="text-body font-semibold text-danger">{d.form.errorTitle}</p>
|
||||
<p class="mt-2 text-body text-ink-muted">
|
||||
<div id="form-error" hidden class="border-danger/40 bg-surface-2 mt-8 rounded-md border p-6">
|
||||
<p class="text-body text-danger font-semibold">{d.form.errorTitle}</p>
|
||||
<p class="text-body text-ink-muted mt-2">
|
||||
{d.form.errorBody}
|
||||
<a class="text-accent hover:underline" href={`mailto:${profile.links.email}`}>{profile.links.email}</a>
|
||||
<a class="text-accent hover:underline" href={`mailto:${profile.links.email}`}
|
||||
>{profile.links.email}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,15 +109,31 @@ const fieldClass =
|
||||
href={`mailto:${profile.links.email}`}
|
||||
data-copy={profile.links.email}
|
||||
data-copied-label={d.form.copied}
|
||||
class="inline-flex items-center gap-2 text-body text-ink hover:text-accent"
|
||||
class="text-body text-ink hover:text-accent inline-flex items-center gap-2"
|
||||
>
|
||||
<span data-copy-label>{profile.links.email}</span>
|
||||
<span class="text-ink-faint" aria-hidden="true">⧉</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href={profile.links.linkedin} rel="me noopener" class="text-body text-ink hover:text-accent">LinkedIn ↗</a></li>
|
||||
<li><a href={profile.links.gitea} rel="me noopener" class="text-body text-ink hover:text-accent">git.cesnimda.uk ↗</a></li>
|
||||
<li><a href={profile.links.phoneHref} class="text-body text-ink hover:text-accent">{profile.links.phone}</a></li>
|
||||
<li>
|
||||
<a
|
||||
href={profile.links.linkedin}
|
||||
rel="me noopener"
|
||||
class="text-body text-ink hover:text-accent">LinkedIn ↗</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={profile.links.gitea}
|
||||
rel="me noopener"
|
||||
class="text-body text-ink hover:text-accent">git.cesnimda.uk ↗</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href={profile.links.phoneHref} class="text-body text-ink hover:text-accent"
|
||||
>{profile.links.phone}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user