ayrisdev/mugladijitalmedya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: improve accessibility with ARIA labels, focus states and contrast adjustments

Browse Source
This commit is contained in:
AyrisAI
2026-05-16 01:15:12 +03:00
parent 158e6be514
commit f6af0ba227
3 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/services/[slug]/[location]/page.tsx
View File

@@ -191,7 +191,7 @@ export default async function ServiceLocationPage({ params }: Props) {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{projects.map((project: any) => (
<Link key={project.id} href={`/works/${project.slug}`} className="group block">
<Link key={project.id} href={`/works/${project.slug}`} className="group block focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label={`${project.title} projesini incele`}>
<div className="space-y-4">
<div className="relative aspect-video overflow-hidden border border-black/10 bg-black/5">
<Image
@@ -221,9 +221,9 @@ export default async function ServiceLocationPage({ params }: Props) {
<p className="text-black/40 text-[13px] tracking-[0.1em]">
{location.name} bölgesindeki projeniz için profesyonel destek almaya hazır mısınız?
</p>
<Link href="/contact" className="button-primary mx-auto inline-flex items-center gap-2">
<Link href="/contact" className="button-primary mx-auto inline-flex items-center gap-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4" aria-label={`${location.name} projeniz için teklif alın`}>
Teklif Al
<ArrowRight className="w-3 h-3" />
<ArrowRight className="w-3 h-3" aria-hidden="true" />
</Link>
</div>
</section>

21
components/Footer.tsx
View File

@@ -30,7 +30,7 @@ export default function Footer() {
{/* Left Column - Logo & Description */}
<div className="md:col-span-4 flex flex-col justify-between gap-12">
{/* Logo */}
<Link href="/" className="inline-block">
<Link href="/" className="inline-block focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label="Muğla Dijital - Ana Sayfaya Dön">
<div className="relative w-40 h-12">
<DynamicLogo
src="/logo.png"
@@ -43,20 +43,21 @@ export default function Footer() {
</Link>
{/* Description */}
<p className="text-[11px] text-black/40 leading-[1.8] max-w-xs">
<p className="text-[11px] text-black/50 leading-[1.8] max-w-xs">
{settings?.footer_description || "Muğla Dijital olarak markaların dijital dünyada özgün bir şekilde var olmasını sağlıyoruz. Drone çekimi, video prodüksiyon ve sosyal medya yönetimi ile gerçek bağlantılar kuruyoruz."}
</p>
</div>
{/* Regions Column - Dynamic districts */}
<div className="md:col-span-2 flex flex-col gap-6">
<div className="md:col-span-2 flex flex-col gap-6" role="navigation" aria-label="Hizmet Bölgeleri">
<span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Bölgeler</span>
<div className="flex flex-col gap-2">
{locations.map((loc) => (
<Link
key={loc.id}
href={`/services?region=${loc.slug}`}
className="text-[11px] font-bold uppercase hover:text-primary transition-colors"
className="text-[11px] font-bold uppercase hover:text-primary transition-colors focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm"
aria-label={`${loc.name} bölgesi hizmetlerimiz`}
>
{loc.name}
</Link>
@@ -65,7 +66,7 @@ export default function Footer() {
</div>
{/* Center Column - Menu label + divider */}
<div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex">
<div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex" aria-hidden="true">
<div className="flex flex-col items-center gap-4">
<div className="w-px h-8 bg-black/10" />
<span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Menu</span>
@@ -73,7 +74,7 @@ export default function Footer() {
</div>
{/* Right Column - Navigation Links */}
<div className="md:col-span-4 flex flex-col items-start md:items-end gap-3">
<div className="md:col-span-4 flex flex-col items-start md:items-end gap-3" role="navigation" aria-label="Footer Navigasyon">
{[
{ label: "Çalışmalar", href: "/works" },
{ label: "Hizmetler", href: "/services" },
@@ -84,7 +85,7 @@ export default function Footer() {
<Link
key={item.label}
href={item.href}
className="text-2xl md:text-3xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight"
className="text-2xl md:text-3xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
>
{item.label}
</Link>
@@ -102,13 +103,13 @@ export default function Footer() {
© {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Tüm hakları saklıdır.
</p>
<div className="flex gap-4">
<Link href="/privacy" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase">Gizlilik Politikası</Link>
<Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase">Kullanım Şartları</Link>
<Link href="/privacy" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Gizlilik Politikası Sayfası">Gizlilik Politikası</Link>
<Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Kullanım Şartları Sayfası">Kullanım Şartları</Link>
</div>
</div>
{/* Credit */}
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-primary transition-colors uppercase">
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-primary transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Tasarım ve Yazılım: ayris.tech">
created by ayris.tech
</a>
</div>

5
components/Navbar.tsx
View File

@@ -14,7 +14,7 @@ export default function Navbar() {
>
<div className="flex items-center justify-between px-6 md:px-12 py-5">
{/* Logo */}
<Link href="/" className="flex items-center gap-3">
<Link href="/" className="flex items-center gap-3 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label="Muğla Dijital - Ana Sayfaya Dön">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
@@ -59,7 +59,7 @@ export default function Navbar() {
>
<Link
href={item.href}
className="text-[11px] tracking-[0.15em] uppercase text-black/60 hover:text-black transition-colors nav-link-hover px-3 py-2"
className="text-[11px] tracking-[0.15em] uppercase text-black/70 hover:text-black transition-colors nav-link-hover px-3 py-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
>
{item.label}
</Link>
@@ -74,6 +74,7 @@ export default function Navbar() {
animate={{ opacity: 1 }}
transition={{ delay: 1 }}
className="text-[13px] font-bold tracking-[0.1em] uppercase text-black"
aria-hidden="true"
>
Muğla Dijital
</motion.span>