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

a11y: fix keyboard access, listbox pattern, ARIA labels, target sizes

Browse Source
This commit is contained in:
TypoGenie
2026-02-18 23:32:21 +02:00
parent 242e16f75d
commit d0f88625b5
4 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Preview.tsx
View File

@@ -33,20 +33,20 @@ const ZoomControl: React.FC<{ zoom: number; onZoomChange: (zoom: number) => void
onClick={decreaseZoom}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="p-1 text-zinc-400 hover:text-white transition-colors"
className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
aria-label="Zoom out"
>
<ZoomOut size={16} />
<ZoomOut size={16} aria-hidden="true" />
</motion.button>
<span className="text-xs font-medium text-zinc-300 min-w-[3rem] text-center">{zoom}%</span>
<motion.button
onClick={increaseZoom}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="p-1 text-zinc-400 hover:text-white transition-colors"
className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
aria-label="Zoom in"
>
<ZoomIn size={16} />
<ZoomIn size={16} aria-hidden="true" />
</motion.button>
</div>
);
@@ -96,18 +96,20 @@ const FontList: React.FC<{ fonts: string[] }> = ({ fonts }) => {
disabled={downloadingFont === font}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
aria-label={`Download ${font} font`}
className="px-2 py-1 bg-zinc-900 border border-zinc-800 hover:border-zinc-600 rounded-l text-zinc-300 hover:text-white transition-all flex items-center gap-1.5 text-xs font-medium"
>
{downloadingFont === font ? <Loader2 size={10} className="animate-spin" /> : <Download size={10} />}
{downloadingFont === font ? <Loader2 size={10} className="animate-spin" aria-hidden="true" /> : <Download size={10} aria-hidden="true" />}
{font}
</motion.button>
<motion.button
onClick={() => openGoogleFonts(font)}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
aria-label="View on Google Fonts"
className="px-1.5 py-1 bg-zinc-900 border border-l-0 border-zinc-800 hover:border-zinc-600 rounded-r text-zinc-400 hover:text-white transition-all"
>
<ExternalLink size={10} />
<ExternalLink size={10} aria-hidden="true" />
</motion.button>
</div>
{downloadStatus[font] && (
@@ -381,7 +383,7 @@ export const Preview: React.FC<PreviewProps> = ({
<motion.div className="sticky top-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800 p-4" initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}>
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
<motion.button ref={backButtonRef} onClick={onBack} onFocus={() => setFocusedElement('back')} whileHover={{ x: -3 }} whileTap={{ scale: 0.95 }} className="flex items-center gap-2 text-zinc-400 hover:text-white transition-colors outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-zinc-950 rounded-lg px-2 py-1">
<ArrowLeft size={20} />
<ArrowLeft size={20} aria-hidden="true" />
<span>Back to Editor</span>
</motion.button>
@@ -404,12 +406,12 @@ export const Preview: React.FC<PreviewProps> = ({
<AnimatePresence mode="wait">
{successMsg ? (
<motion.div key="success" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="flex items-center gap-2">
<CheckCircle2 size={18} />
<CheckCircle2 size={18} aria-hidden="true" />
<span>Saved!</span>
</motion.div>
) : (
<motion.div key="default" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="flex items-center gap-2">
{isExporting ? <Loader2 size={18} className="animate-spin" /> : <FileText size={18} />}
{isExporting ? <Loader2 size={18} className="animate-spin" aria-hidden="true" /> : <FileText size={18} aria-hidden="true" />}
<span>{isExporting ? 'Generating...' : 'Save Word Doc'}</span>
</motion.div>
)}