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

src/App.tsx

@@ -106,6 +106,10 @@ const App: React.FC = () => {
   // Global keydown listener for shortcuts help
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName;
+      const isEditable = tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable;
+      if (isEditable) return;
+
       if (e.key === '?' || e.key === '/') {
         e.preventDefault();
         setShowShortcuts(prev => !prev);
@@ -206,20 +210,22 @@ const App: React.FC = () => {
         className="flex-none border-b border-zinc-800 bg-zinc-950/50 backdrop-blur-sm z-40"
       >
         <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-          <motion.div
-            className="flex items-center gap-2 cursor-pointer"
+          <motion.button
+            className="flex items-center gap-2 cursor-pointer bg-transparent border-none"
             onClick={handleReset}
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
+            aria-label="TypoGenie - Reset to home"
           >
             <motion.div
               className="bg-gradient-to-br from-indigo-500 to-violet-600 p-2 rounded-lg"
               whileHover={{ rotate: [0, -10, 10, 0], transition: { duration: 0.5 } }}
+              aria-hidden="true"
             >
               <FileType className="text-white" size={20} />
             </motion.div>
             <h1 className="text-xl font-bold tracking-tight text-white">TypoGenie</h1>
-          </motion.div>
+          </motion.button>
 
           <div className="flex items-center gap-4">
             {/* UI Zoom Control */}
@@ -234,7 +240,7 @@ const App: React.FC = () => {
                 className="hidden sm:flex items-center gap-2 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-300 bg-zinc-900 hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-800"
                 title="Reload templates from disk"
               >
-                <RefreshCw size={14} />
+                <RefreshCw size={14} aria-hidden="true" />
                 <span>Refresh</span>
               </motion.button>
             )}
@@ -247,7 +253,7 @@ const App: React.FC = () => {
               className="hidden sm:flex items-center gap-2 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-300 bg-zinc-900 hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-800"
               title="Show keyboard shortcuts"
             >
-              <Keyboard size={14} />
+              <Keyboard size={14} aria-hidden="true" />
               <span>Shortcuts</span>
               <kbd className="px-1.5 py-0.5 bg-zinc-800 rounded text-zinc-400 font-mono">?</kbd>
             </motion.button>
@@ -402,7 +408,7 @@ const App: React.FC = () => {
                     animate={{ scale: [1, 1.2, 1], opacity: [0.2, 0.4, 0.2] }}
                     transition={{ duration: 1.5, repeat: Infinity }}
                   />
-                  <Loader2 size={64} className="text-indigo-400 relative z-10" />
+                  <Loader2 size={64} className="text-indigo-400 relative z-10" aria-hidden="true" />
                 </motion.div>
                 <motion.h3
                   className="mt-8 text-2xl font-bold text-white"