Fix transparent active state on attachment delete button in composer - #3962
Merged
Conversation
The attachment remove button went transparent when pressed because the
`:active` pseudo-state wasn't included in the background-color override
selectors. A global `[type='button'] { background-color: transparent }`
CSS reset was winning specificity during the active/pressed state.
Added `:active` to the hover/focus-visible selectors in both the Studio
Code composer (apps/studio) and the agentic UI classic composer (apps/ui).
In apps/studio the doubled-class pattern is preserved so the override
keeps the same specificity boost used to beat the global reset.
Co-Authored-By: shaunandrews <shaun@automattic.com>
shaunandrews
marked this pull request as ready for review
June 25, 2026 19:14
shaunandrews
enabled auto-merge (squash)
June 25, 2026 19:15
gavande1
approved these changes
Jun 29, 2026
gavande1
left a comment
gavande1
left a comment
Contributor
There was a problem hiding this comment.
Nice find. LGTM 👍
| Before | After |
|---|---|
 |
 |
Collaborator
📊 Performance Test ResultsComparing 0e49f8d vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
Fixes STU-1934
How AI was used in this PR
AI identified the root cause and authored the fix. Codex reviewed the original agent-generated change, found the remaining agentic UI focus-state gap, and added the follow-up fix.
Proposed Changes
When the attachment delete button is pressed, its background could become transparent because generic button reset styles were winning over the custom composer button styles.
The first pass only covered the
:activestate. The remaining intermittent failure was in the agentic UI pointer-focus transition: after a mouse press, the button can be:focus:not(:focus-visible)while no longer:active, and the global focus reset can pull in transparent WordPress UI button variables.This update keeps the attachment remove button background opaque across hover, active, keyboard focus, pointer focus, and parent focus-within states in the agentic UI. It also reasserts the legacy Studio Code tab background with the
backgroundshorthand so reset shorthands cannot leak through.Testing Instructions
Pre-merge Checklist
npx eslint --fix; CSS files are ignored by the repo ESLint config)npm run typecheck)npm test -- apps/studio/src/components/studio-code-session/composer/index.test.tsx apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts apps/ui/src/ui-classic/components/session-view/annotations.test.ts)Linear: STU-1934
Co-authored-by: shaunandrews shaun@automattic.com