Automattic / Automattic/jetpack
Form Block > Select block: UI lacks contrast on dark editor styles
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Steps to reproduce the behavior
0. Activate a theme with a dark background that shows in the editor, such as Rivington
1. Add a Form block, then the Select block within it
Elements of the UI are very difficult to see, including "Add option," the text of existing options, and the trash icon.
#### What I expected to happen
To be able to see the elements of the block.
#### What actually happened
It's very difficult to see most of the block, and I needed to hover to find most of the elements so they changed color
### Context
Empathy testing
#### Browser / OS version
Chrome 91.0.4472.114 OS X
#### Is this specific to the applied theme? Which one?
Yes, but any theme with dark styling
#### Does this happen on simple or atomic sites or both?
Both
#### Is there any console output or error text?
No
#### Level of impact (Does it block purchases? Does it affect more than just one site?)
Medium, it makes the Select block difficult to use with a dark theme.
#### Reproducibility (Consistent, Intermittent) Leave empty for consistent.
#### Screenshot / Video: If applicable, add screenshots to help explain your problem.


Contributor guide
Research direction
Reproduce the issue by applying a dark editor theme, adding a Form block, and inserting a Select block. Inspect the Select block's editor UI, especially Add option, existing option text, and the trash icon, then verify that these elements remain readable without hovering. Done means the affected controls have sufficient contrast in dark themes while remaining usable in other themes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, wordpress
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100