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={{

6
src/components/Preview.tsx
View File

@@ -313,7 +313,7 @@ export const Preview: React.FC<PreviewProps> = ({
// Inject CSS directly as inline style tag
const html = `
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -390,9 +390,9 @@ export const Preview: React.FC<PreviewProps> = ({
<div className="flex flex-col sm:flex-row items-center gap-6">
<FontList fonts={usedFonts} />
<div className="h-4 w-px bg-zinc-800 hidden sm:block" />
<div className="h-4 w-px bg-zinc-800 hidden sm:block" aria-hidden="true" />
<ZoomControl zoom={uiZoom} onZoomChange={onZoomChange} />
<div className="h-4 w-px bg-zinc-800 hidden sm:block" />
<div className="h-4 w-px bg-zinc-800 hidden sm:block" aria-hidden="true" />
<div className="flex items-center gap-4">
<span className="text-zinc-400 text-sm hidden sm:inline">Format: {paperSize}</span>
<motion.button

17
src/components/StyleSelector.tsx
View File

@@ -190,7 +190,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
const html = `
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -318,7 +318,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
<div className="lg:col-span-4 flex flex-col gap-4 min-h-0 bg-zinc-900/30 rounded-2xl border border-zinc-800/50 overflow-hidden">
{/* Category Filter Tabs */}
<div className="flex flex-col border-b border-zinc-800/50 bg-zinc-900/20">
<nav aria-label="Style filters" className="flex flex-col border-b border-zinc-800/50 bg-zinc-900/20">
<div className="p-4 overflow-x-auto no-scrollbar pb-2">
<div className="flex gap-2" role="group" aria-label="Filter by category">
<button
@@ -376,11 +376,11 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
{searchQuery.trim() ? `${filteredStyles.length} template${filteredStyles.length !== 1 ? 's' : ''} found` : ''}
</div>
</div>
</div>
</nav>
{/* Scrollable List */}
<section aria-label="Style list" className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar">
<div
className="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar"
role="listbox"
aria-label="Typography styles"
aria-activedescendant={selectedStyle ? `style-${selectedStyle}` : undefined}
@@ -441,20 +441,21 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
</div>
))}
</div>
</section>
</div>
{/* RIGHT COLUMN: Preview Window */}
<div className="lg:col-span-8 flex flex-col min-h-0 bg-zinc-950 rounded-2xl border border-zinc-800 shadow-2xl relative overflow-hidden">
<section aria-label="Style preview" className="lg:col-span-8 flex flex-col min-h-0 bg-zinc-950 rounded-2xl border border-zinc-800 shadow-2xl relative overflow-hidden">
{/* Preview Header */}
<div className="h-12 border-b border-zinc-800 bg-zinc-900/50 flex items-center px-4 justify-between">
<div className="flex items-center gap-2">
<div className="flex gap-1.5">
<div className="flex gap-1.5" aria-hidden="true">
<div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div>
<div className="w-3 h-3 rounded-full bg-amber-500/20 border border-amber-500/50"></div>
<div className="w-3 h-3 rounded-full bg-emerald-500/20 border border-emerald-500/50"></div>
</div>
<div className="h-4 w-px bg-zinc-800 mx-2"></div>
<div className="h-4 w-px bg-zinc-800 mx-2" aria-hidden="true"></div>
<span className="text-xs text-zinc-400 font-medium">Live Preview</span>
</div>
{currentStyleObj && (
@@ -491,7 +492,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
<Printer size={18} aria-hidden="true" />
</button>
</div>
</div>
</section>
</div>
</div>
);