WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 7 months ago

#48342 closed defect (bug) (reported-upstream)

Twenty Twenty ::selection color invisible with dark backgrounds

Reported by: afercia Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: accessibility Cc:

Description

Twenty Twenty uses a custom color for selected text: black background and white text.

While this works with light background colors (e.g. the default one):

http://cldup.com/cOIr7pgVhn.png

it doesn't work with dark background: here's the same selected text with a dark background set via the Customizer:

http://cldup.com/iCSNJRts4z.png

Twenty Twenty is smart and when the background is dark it switches the body text to white. However, the ::selection color is hardcoded in the main stylesheet and doesn't change:

https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwenty/style.css?rev=46551&marks=144-147#L143

::selection {
	background: #000;
	color: #fff;
}

This way, operating a text selection is basically impossible as users won't be able to see the selection. Not to mention that even if the background is not a full black and it's some other color, for example a dark blue, the selection would be barely visible as well.

For usability and accessibility it's recommended to not alter the selection color and leave that to the operating systems / browsers defaults.

Attachments (1)

48342.diff (804 bytes) - added by afercia 7 months ago.

Download all attachments as: .zip

Change History (5)

@afercia
7 months ago

#1 @afercia
7 months ago

  • Keywords has-patch commit dev-feedback added; needs-patch removed

48342.diff removes the ::selection ruleset entirely, leaving the selection style up to operating systems and browsers defaults.

Being in Release Candidate period, this patch needs to be reviewed and "signed off" by a second core committer.

#2 @ocean90
7 months ago

  • Keywords close added; commit dev-feedback removed
  • Milestone 5.3 deleted
  • Resolution set to invalid
  • Status changed from new to closed

This needs to be submitted at https://github.com/wordpress/twentytwenty and then closed as reported-upstream.

#3 @afercia
7 months ago

  • Keywords close removed
  • Milestone set to 5.3
  • Resolution invalid deleted
  • Status changed from closed to reopened

I'm sorry I disagree. Reopening because the place where development of the bundled theme happens during Release Candidate should at least be discussed during dev chat.

WordPress 5.3 is in Release Candidate period, any code change needs to be reviewed and "signed off" by two core committers. Developing on GitHub and then merging "in block" code changes from GitHub to Trac isn't the best way to manage this process IMHO.

Last edited 7 months ago by afercia (previous) (diff)

#4 @ianbelanger
7 months ago

  • Milestone 5.3 deleted
  • Resolution set to reported-upstream
  • Status changed from reopened to closed
Note: See TracTickets for help on using tickets.