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

feat: implement high-quality accessibility patterns (skip-link, scroll-margins, reduced-motion)

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

20
app/globals.css
View File

@@ -24,6 +24,26 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
/* ===== ACCESSIBILITY ===== */
:focus-visible {
scroll-margin-top: 100px;
}
:target {
scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===== DIAGONAL LINE DECORATION ===== */ /* ===== DIAGONAL LINE DECORATION ===== */
.diagonal-line { .diagonal-line {
position: relative; position: relative;

16
app/layout.tsx
View File

@@ -131,9 +131,19 @@ export default async function RootLayout({
return ( return (
<html lang="tr"> <html lang="tr">
<body className={`${martianMono.variable} antialiased`}> <body className={`${martianMono.variable} antialiased`}>
<ClientWrapper> {/* Skip to Main Content Link */}
{children} <a
</ClientWrapper> href="#main-content"
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-primary focus:text-white focus:font-bold focus:rounded-sm focus:outline-none"
>
Ana İçeriğe Atla
</a>
<div id="main-content">
<ClientWrapper>
{children}
</ClientWrapper>
</div>
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}