Make WordPress Core

Opened 5 years ago

Last modified 4 months ago

#45904 new defect (bug)

Twenty Nineteen: .button doesn't override link color

Reported by: laurelfulford's profile laurelfulford Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: needs-patch has-screenshots
Focuses: accessibility, css Cc:


Originally reported by @crunnells in Twenty Nineteen's GitHub repo:

I noticed this one the theme demo site when I tried to change the "Get in touch" button into a link. If you put a link inside of an element with the .button class, the link color is the same color blue as the background, so the text can't be read. The same thing occurs when you try <a href="#" class="button">, so we'll need to have an override on the link color so that it's readable.

Moved over from:

Attachments (2)

Screen Shot 2019-01-23 at 1.35.52 PM.png (19.4 KB) - added by laurelfulford 5 years ago.
Twenty Nineteen - links with the class .button
Screen Shot 2019-01-23 at 1.36.19 PM.png (18.7 KB) - added by laurelfulford 5 years ago.
Twenty Nineteen - visited link with the class .button

Download all attachments as: .zip

Change History (7)

#1 @laurelfulford
5 years ago

  • Keywords needs-screenshots added

5 years ago

Twenty Nineteen - links with the class .button

5 years ago

Twenty Nineteen - visited link with the class .button

#2 @laurelfulford
5 years ago

  • Keywords has-screenshots added; needs-screenshots removed
  • Milestone changed from Awaiting Review to Future Release

I could recreate this in the widget area, when non-visited links had the .button class added. The theme's .widget a styles is overriding the white text colour on the .button class.

:visited links display correctly initially. Both :visited and non-visited links display low contrast on hover (blue text on a black background).

#3 @ianbelanger
4 years ago

  • Focuses css added
  • Version changed from 5.0.2 to 5.0

#4 @sabernhardt
20 months ago

  • Focuses accessibility added

#5 @poena
4 months ago

Since the widget area is now block-based, I think this could be solved with

-Because the theme design for the button block is the same as an element with the custom .button class.

Note: See TracTickets for help on using tickets.