Automattic / Automattic/jetpack

Videopress error message uses CSS from theme, which isn't always readable

Open
#38,835 1 comment 0 reactions 0 assignees View on GitHub
[Block] VideoPress [Feature] VideoPress [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

The videopress uploaded video format error message: "check the recommended video settings", doesn't have a colour set, and so it uses the colour that links have in the current theme
```css
a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--contrast);
}
```

This colour is sometimes completely the wrong choice, and causes an accessibility fail even to well-sighted, non-color blind users. The background colour the links is set on it hardcoded to #f0f0f0 via the `.wp-block-videopress-video .components-notice.is-error` rule.

### Steps to reproduce

1. Create a new site with a theme that uses white links (I used Feelin' Good on dotcom)
2. Add a video press block
3. Upload a video that has an unsupported format. I used one created by recording my desktop with OSX's default screen recorder tool

### A clear and concise description of what you expected to happen.

1. Video to be uploaded
2. Failing that, a legible and informative error message telling me which video format to be used

### What actually happened

Barely readable link to recommended video settings Screenshot 2024-08-12 at 15 14 05

### Impact

One

### Available workarounds?

Yes, easy to implement

### Platform (Simple and/or Atomic)

_No response_

### Logs or notes

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the unsupported VideoPress upload with a theme whose links use a light or otherwise low-contrast color, then inspect the `.wp-block-videopress-video .components-notice.is-error` styling and the recommended video settings link. Done means the error message and link remain legible against the notice background and meet accessibility contrast expectations.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, wordpress
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.