root/sase.tr
1
0
Fork 0
Code Issues 5 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

a11y(web): footer landmarks, headings & contrast

Browse Source 
Wrap each footer link column in a labelled <nav aria-labelledby> with an
<h3> (was an ungrouped <h4>), add a top border to delineate the footer,
and raise low-contrast text from muted-foreground/70 to full
muted-foreground (column titles to text-foreground).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Semih Yesilyurt
2026-05-26 20:52:13 +03:00
parent 6cefd2d560
commit a0e822c082
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/web/src/components/site-footer.tsx
View File

@@ -6,19 +6,21 @@ export function SiteFooter() {
const { t } = useTranslation();
return (
<footer className="bg-background px-4 sm:px-6">
<footer className="border-t border-border bg-background px-4 sm:px-6">
<div className="mx-auto max-w-7xl">
<div className="grid grid-cols-2 gap-8 py-16 sm:grid-cols-4">
{/* Brand */}
<div className="col-span-2 sm:col-span-1">
<span className="text-lg font-bold">Sase.tr</span>
<p className="mt-3 text-sm text-muted-foreground">{t("footer.tagline")}</p>
<p className="mt-2 text-sm text-muted-foreground/70">info@sase.tr</p>
<p className="mt-2 text-sm text-muted-foreground">info@sase.tr</p>
</div>
{/* Product */}
<div>
<h4 className="text-sm font-semibold text-muted-foreground">{t("footer.product")}</h4>
<nav aria-labelledby="footer-product">
<h3 id="footer-product" className="text-sm font-semibold text-foreground">
{t("footer.product")}
</h3>
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
<li>
<a href="#features" className="transition hover:text-foreground">
@@ -41,11 +43,13 @@ export function SiteFooter() {
</Link>
</li>
</ul>
</div>
</nav>
{/* Company */}
<div>
<h4 className="text-sm font-semibold text-muted-foreground">{t("footer.company")}</h4>
<nav aria-labelledby="footer-company">
<h3 id="footer-company" className="text-sm font-semibold text-foreground">
{t("footer.company")}
</h3>
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
<li>
<Link to="/about" className="transition hover:text-foreground">
@@ -63,11 +67,13 @@ export function SiteFooter() {
</Link>
</li>
</ul>
</div>
</nav>
{/* Legal */}
<div>
<h4 className="text-sm font-semibold text-muted-foreground">{t("footer.legal")}</h4>
<nav aria-labelledby="footer-legal">
<h3 id="footer-legal" className="text-sm font-semibold text-foreground">
{t("footer.legal")}
</h3>
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
<li>
<Link to="/privacy" className="transition hover:text-foreground">
@@ -85,22 +91,22 @@ export function SiteFooter() {
</Link>
</li>
</ul>
</div>
</nav>
</div>
<Separator className="bg-border" />
<div className="flex flex-col items-center justify-between gap-4 py-6 sm:flex-row">
<div className="flex flex-col items-center gap-3 sm:flex-row">
<p className="text-sm text-muted-foreground/70">
<p className="text-sm text-muted-foreground">
&copy; {new Date().getFullYear()} Sase.tr. {t("footer.rights")}
</p>
<div className="flex items-center gap-2 text-sm text-muted-foreground/70">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="size-2 rounded-full bg-brand" />
{t("footer.allServicesActive")}
</div>
</div>
<div className="flex items-center gap-4 text-muted-foreground/70">
<div className="flex items-center gap-4 text-muted-foreground">
<a href="mailto:info@sase.tr" className="text-sm transition hover:text-foreground">
info@sase.tr
</a>