lashman/typogenie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

a11y: add landmarks, semantic structure, skip nav, iframe lang

Browse Source
This commit is contained in:
TypoGenie
2026-02-18 23:43:48 +02:00
parent e460f4df68
commit 1458210d88
3 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.tsx
View File

@@ -194,7 +194,7 @@ const App: React.FC = () => {
style={{ fontSize: `${uiZoom}%` }}
>
<div role="status" aria-live="polite" className="sr-only">{statusMessage}</div>
<div className="h-full w-full flex flex-col">
<main id="main-content" className="h-full w-full flex flex-col">
<Preview
htmlContent={generatedHtml}
onBack={handleBackToConfig}
@@ -205,7 +205,7 @@ const App: React.FC = () => {
onZoomChange={setUiZoom}
templates={templates}
/>
</div>
</main>
</div>
);
}
@@ -278,18 +278,20 @@ const App: React.FC = () => {
<AnimatePresence mode="wait">
{appState !== AppState.UPLOAD && (
<motion.div
<motion.nav
aria-label="Progress"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="flex items-center gap-4 text-sm text-zinc-400"
>
<span className={appState === AppState.CONFIG ? "text-indigo-400 font-medium" : ""}>Configure</span>
<span>/</span>
<span className={appState === AppState.GENERATING ? "text-indigo-400 font-medium" : ""}>Generate</span>
<span>/</span>
<span>Preview</span>
</motion.div>
<ol className="flex items-center gap-4 text-sm text-zinc-400">
<li className={appState === AppState.CONFIG ? "text-indigo-400 font-medium" : ""} aria-current={appState === AppState.CONFIG ? "step" : undefined}>Configure</li>
<li aria-hidden="true">/</li>
<li className={appState === AppState.GENERATING ? "text-indigo-400 font-medium" : ""} aria-current={appState === AppState.GENERATING ? "step" : undefined}>Generate</li>
<li aria-hidden="true">/</li>
<li className={appState === AppState.PREVIEW ? "text-indigo-400 font-medium" : ""} aria-current={appState === AppState.PREVIEW ? "step" : undefined}>Preview</li>
</ol>
</motion.nav>
)}
</AnimatePresence>
</div>
@@ -297,9 +299,9 @@ const App: React.FC = () => {
</motion.header>
{/* Main Content - Takes remaining space */}
<main className="flex-1 relative overflow-hidden">
<main id="main-content" className="flex-1 relative overflow-hidden">
{/* Animated background blobs */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<motion.div
className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] bg-indigo-900/10 rounded-full blur-3xl"
animate={{