Fix nested button HTML error in PatternCard

Change favorite toggle from <button> to <span role="button"> to avoid
invalid nested button elements. Adds proper keyboard accessibility
with tabIndex and onKeyDown handlers for Enter/Space keys.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/BrowsePage.tsx

@@ -1381,20 +1381,29 @@ function PatternCard({ pattern, isSelected, isFavorite, playTime, onToggleFavori
         <span className="text-xs font-bold text-foreground truncate" title={pattern.name}>
           {pattern.name}
         </span>
-        <button
-          className={`shrink-0 transition-colors ${
+        <span
+          role="button"
+          tabIndex={0}
+          className={`shrink-0 transition-colors cursor-pointer ${
             isFavorite ? 'text-red-500 hover:text-red-600' : 'text-muted-foreground hover:text-red-500'
           }`}
           onClick={(e) => {
             e.stopPropagation()
             onToggleFavorite(pattern.path, e)
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              e.stopPropagation()
+              onToggleFavorite(pattern.path, e as unknown as React.MouseEvent)
+            }
+          }}
           title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
         >
           <span className="material-icons" style={{ fontSize: '16px' }}>
             {isFavorite ? 'favorite' : 'favorite_border'}
           </span>
-        </button>
+        </span>
       </div>
     </button>
   )