feat: improve accessibility of icon-only buttons (#221)

Added `aria-label`s, `aria-hidden="true"` to SVGs, and proper `focus-visible` states to icon-only buttons in `VeoProjectForm.tsx` and `AssetLibrary.tsx` to improve keyboard navigation and screen reader support.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: thebearwithabite <216692431+thebearwithabite@users.noreply.github.com>

Author: thebearwithabite

.jules/palette.md

@@ -1,6 +1,6 @@
 ## 2024-03-16 - Make hover-only actions keyboard accessible
 **Learning:** Actions hidden behind `opacity-0` and revealed with `group-hover:opacity-100` are completely inaccessible to keyboard-only users navigating via Tab. This is a common pattern for "secondary" actions like undo/delete buttons in lists.
 **Action:** When using `opacity-0 group-hover:opacity-100` to hide secondary actions, always pair it with `focus-visible:opacity-100`, `focus-visible:ring-2`, and `focus-visible:outline-none` to ensure the action becomes visible and clearly highlighted when focused via keyboard navigation.
-## 2024-04-12 - Sidebar Navigation Accessibility
-**Learning:** React Router Links used for navigation items without `aria-current` lack semantic indication of the active page for screen readers, while visible text is sufficient without additional `aria-label`. Redundant `aria-hidden="true"` on decorative icons inside the link improves screen reader experience.
-**Action:** Always add `aria-current={isActive ? 'page' : undefined}` to active navigation links, apply explicit `focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none` classes for keyboard accessibility, and hide decorative inner icons with `aria-hidden="true"`.
+## 2024-05-23 - Accessible Icon-Only Buttons in Custom Design System
+**Learning:** In the liquid glass design system, visually hidden icon-only buttons (like remove buttons on hover) require specific focus-visible utility classes (`focus-visible:opacity-100 focus-visible:scale-100`) combined with standard focus rings to remain keyboard accessible.
+**Action:** Always pair `group-hover:opacity-100` on hidden icon buttons with explicit `focus-visible:opacity-100` and standard focus ring utilities (`focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none`) to ensure keyboard users can discover and interact with them. Apply `aria-hidden="true"` to the inner SVGs and `aria-label` to the buttons.

frontend_v2/src/components/veo/AssetLibrary.tsx

@@ -237,8 +237,9 @@ const AssetCard = ({ asset, onRemove, onUpload }: AssetCardProps) => {
             <button
                 onClick={onRemove}
                 type="button"
-                className="absolute top-2 right-2 z-20 bg-black/60 backdrop-blur-md text-white/60 hover:text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-all border border-white/10 scale-90 group-hover:scale-100">
-                <XMarkIcon className="w-3 h-3" />
+                aria-label="Remove asset"
+                className="absolute top-2 right-2 z-20 bg-black/60 backdrop-blur-md text-white/60 hover:text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:scale-100 transition-all border border-white/10 scale-90 group-hover:scale-100 focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none">
+                <XMarkIcon className="w-3 h-3" aria-hidden="true" />
             </button>
 
             <div className="aspect-[4/3] bg-black/40 relative overflow-hidden">
@@ -289,9 +290,10 @@ const AssetCard = ({ asset, onRemove, onUpload }: AssetCardProps) => {
                     <button
                         type="button"
                         onClick={handleCopyDescription}
-                        className="text-white/20 hover:text-white transition-colors flex-shrink-0 mt-0.5"
+                        aria-label="Copy description"
+                        className="text-white/20 hover:text-white transition-colors flex-shrink-0 mt-0.5 focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none"
                         title="Copy Name & Description">
-                        {copied ? <CheckCircle2Icon className="w-3 h-3 text-green-400" /> : <ClipboardDocumentIcon className="w-3 h-3" />}
+                        {copied ? <CheckCircle2Icon className="w-3 h-3 text-green-400" aria-hidden="true" /> : <ClipboardDocumentIcon className="w-3 h-3" aria-hidden="true" />}
                     </button>
                 </div>
             </div>

frontend_v2/src/components/veo/VeoProjectForm.tsx

@@ -103,8 +103,8 @@ const VeoProjectForm: React.FC<VeoProjectFormProps> = ({
                     <div className="flex justify-between items-center mb-8 relative z-10">
                         <p className="text-[11px] text-white/40 font-bold uppercase tracking-widest leading-none">Draft your scene beats or upload a screenplay</p>
                         <div className="flex gap-2">
-                            <button type="button" onClick={() => scriptFileInputRef.current?.click()} className="p-3 bg-black/40 border border-white/5 rounded-xl hover:bg-white/10 text-white/40 hover:text-white transition-all"><FileUploadIcon className="w-4 h-4" /></button>
-                            <button type="button" className="p-3 bg-black/40 border border-white/5 rounded-xl hover:bg-white/10 text-white/40 hover:text-white transition-all"><FileAudioIcon className="w-4 h-4" /></button>
+                            <button type="button" onClick={() => scriptFileInputRef.current?.click()} aria-label="Upload script" className="p-3 bg-black/40 border border-white/5 rounded-xl hover:bg-white/10 text-white/40 hover:text-white transition-all focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none"><FileUploadIcon className="w-4 h-4" aria-hidden="true" /></button>
+                            <button type="button" aria-label="Upload audio" className="p-3 bg-black/40 border border-white/5 rounded-xl hover:bg-white/10 text-white/40 hover:text-white transition-all focus-visible:ring-2 focus-visible:ring-background/50 focus-visible:outline-none"><FileAudioIcon className="w-4 h-4" aria-hidden="true" /></button>
                         </div>
                     </div>