lashman/typogenie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 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
src/components/Preview.tsx
+3 -3
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
src/components/StyleSelector.tsx
+9 -8
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>
);