fix(chat): reveal the remove control on keyboard focus

On a fine pointer the badge is transparent until hover, so tabbing to it left
a sighted keyboard user unable to see which attachment Enter would remove.
The focus-visible chain carries higher specificity than the hide rule, so it
wins regardless of source order.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.test.tsx

@@ -73,6 +73,16 @@ describe('AttachedFilesList', () => {
     expect(wrapper?.className).toMatch(/max-w-/)
   })
 
+  it('reveals the remove control on keyboard focus, not only on hover', () => {
+    render([file({})])
+
+    const remove = container.querySelector('button[aria-label^="Remove"]')
+    // Hidden only where a pointer can reveal it, and focus has to reveal it there too —
+    // otherwise a keyboard user tabs onto a fully transparent control.
+    expect(remove?.className).toContain('hover-hover:opacity-0')
+    expect(remove?.className).toContain('hover-hover:focus-visible:opacity-100')
+  })
+
   it('drops the image and reveals the type icon when the preview fails to decode', () => {
     render([file({ name: 'photo.heic', type: 'image/heic', previewUrl: '/api/files/serve/x' })])
 

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx

@@ -116,8 +116,9 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
           }}
           aria-label={`Remove ${file.name}`}
           /* Visible by default so a coarse pointer never has to discover it through an
-             emulated hover; fine pointers get the reveal-on-hover treatment. */
-          className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-body)] transition-opacity hover-hover:opacity-0 hover-hover:group-hover:opacity-100'
+             emulated hover; fine pointers get reveal-on-hover, plus reveal-on-focus so
+             it is never transparent while it holds the keyboard focus. */
+          className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-body)] transition-opacity hover-hover:opacity-0 hover-hover:focus-visible:opacity-100 hover-hover:group-hover:opacity-100'
         >
           <X className='size-[10px]' />
         </button>