Skip to content

Commit eef32b1

Browse files
committed
fix(chat): stop gating the remove badge on a variant that cannot express it
hover-hover expands to '@media (hover:hover) and (pointer:fine) { &:hover }', so it binds to the element carrying the class. On the badge that meant every rule required hovering the badge itself, making the whole chain dead CSS — the badge was simply always visible. Rather than rebuild the gating, drop it: an always-visible control is reachable on touch and stays visible while holding keyboard focus, which the reveal-on-hover form could not manage without special cases for both.
1 parent 0a4ac3c commit eef32b1

2 files changed

Lines changed: 9 additions & 9 deletions

File tree

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,14 @@ describe('AttachedFilesList', () => {
7373
expect(wrapper?.className).toMatch(/max-w-/)
7474
})
7575

76-
it('reveals the remove control on keyboard focus, not only on hover', () => {
76+
it('keeps the remove control visible rather than gating it on hover', () => {
7777
render([file({})])
7878

79+
// A reveal-on-hover badge is unreachable on touch and invisible while it holds
80+
// keyboard focus, so it must not be opacity-gated at all.
7981
const remove = container.querySelector('button[aria-label^="Remove"]')
80-
// Hidden only where a pointer can reveal it, and focus has to reveal it there too —
81-
// otherwise a keyboard user tabs onto a fully transparent control.
82-
expect(remove?.className).toContain('hover-hover:opacity-0')
83-
expect(remove?.className).toContain('hover-hover:focus-visible:opacity-100')
82+
expect(remove).not.toBeNull()
83+
expect(remove?.className).not.toMatch(/opacity-0/)
8484
})
8585

8686
it('drops the image and reveals the type icon when the preview fails to decode', () => {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,10 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
117117
onRemoveFile(file.id)
118118
}}
119119
aria-label={`Remove ${file.name}`}
120-
/* Visible by default so a coarse pointer never has to discover it through an
121-
emulated hover; fine pointers get reveal-on-hover, plus reveal-on-focus so
122-
it is never transparent while it holds the keyboard focus. */
123-
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'
120+
/* Always visible: reveal-on-hover would hide it from touch and from keyboard
121+
focus, and `hover-hover` cannot express "while the chip is hovered" from
122+
here anyway — it carries its own `&:hover`, so it binds to this element. */
123+
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)]'
124124
>
125125
<X className='size-[10px]' />
126126
</button>

0 commit comments

Comments
 (0)