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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{projects.map((project: any) => ( {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="space-y-4">
<div className="relative aspect-video overflow-hidden border border-black/10 bg-black/5"> <div className="relative aspect-video overflow-hidden border border-black/10 bg-black/5">
<Image <Image
@@ -221,9 +221,9 @@ export default async function ServiceLocationPage({ params }: Props) {
<p className="text-black/40 text-[13px] tracking-[0.1em]"> <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? {location.name} bölgesindeki projeniz için profesyonel destek almaya hazır mısınız?
</p> </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 Teklif Al
<ArrowRight className="w-3 h-3" /> <ArrowRight className="w-3 h-3" aria-hidden="true" />
</Link> </Link>
</div> </div>
</section> </section>

21
components/Footer.tsx
View File

@@ -30,7 +30,7 @@ export default function Footer() {
{/* Left Column - Logo & Description */} {/* Left Column - Logo & Description */}
<div className="md:col-span-4 flex flex-col justify-between gap-12"> <div className="md:col-span-4 flex flex-col justify-between gap-12">
{/* Logo */} {/* 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"> <div className="relative w-40 h-12">
<DynamicLogo <DynamicLogo
src="/logo.png" src="/logo.png"
@@ -43,20 +43,21 @@ export default function Footer() {
</Link> </Link>
{/* Description */} {/* 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."} {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> </p>
</div> </div>
{/* Regions Column - Dynamic districts */} {/* 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> <span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Bölgeler</span>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{locations.map((loc) => ( {locations.map((loc) => (
<Link <Link
key={loc.id} key={loc.id}
href={`/services?region=${loc.slug}`} 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} {loc.name}
</Link> </Link>
@@ -65,7 +66,7 @@ export default function Footer() {
</div> </div>
{/* Center Column - Menu label + divider */} {/* 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="flex flex-col items-center gap-4">
<div className="w-px h-8 bg-black/10" /> <div className="w-px h-8 bg-black/10" />
<span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Menu</span> <span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Menu</span>
@@ -73,7 +74,7 @@ export default function Footer() {
</div> </div>
{/* Right Column - Navigation Links */} {/* 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: "Çalışmalar", href: "/works" },
{ label: "Hizmetler", href: "/services" }, { label: "Hizmetler", href: "/services" },
@@ -84,7 +85,7 @@ export default function Footer() {
<Link <Link
key={item.label} key={item.label}
href={item.href} 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} {item.label}
</Link> </Link>
@@ -102,13 +103,13 @@ export default function Footer() {
© {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Tüm hakları saklıdır. © {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Tüm hakları saklıdır.
</p> </p>
<div className="flex gap-4"> <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="/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">Kullanım Şartları</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>
</div> </div>
{/* Credit */} {/* 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 created by ayris.tech
</a> </a>
</div> </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"> <div className="flex items-center justify-between px-6 md:px-12 py-5">
{/* Logo */} {/* 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 <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
@@ -59,7 +59,7 @@ export default function Navbar() {
> >
<Link <Link
href={item.href} 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} {item.label}
</Link> </Link>
@@ -74,6 +74,7 @@ export default function Navbar() {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 1 }} transition={{ delay: 1 }}
className="text-[13px] font-bold tracking-[0.1em] uppercase text-black" className="text-[13px] font-bold tracking-[0.1em] uppercase text-black"
aria-hidden="true"
> >
Muğla Dijital Muğla Dijital
</motion.span> </motion.span>