Automattic / Automattic/jetpack

Form Block > Select block: UI lacks contrast on dark editor styles

Open
#20,293 0 comments 0 reactions 0 assignees View on GitHub
[Block] Form [Feature] Forms Enhancement
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.

![Screen Shot 2021-07-06 at 1 15 02 PM](https://user-images.githubusercontent.com/1900444/124645845-ecbdfc80-de61-11eb-81c6-9fdab1c49598.png)

![Screen Shot 2021-07-06 at 1 13 53 PM](https://user-images.githubusercontent.com/1900444/124645859-f182b080-de61-11eb-9397-0873388190f3.png)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.