Product Landing Page Template in Drupal includes non-accessible option for button color

Description

Issue Key: CR‌-333
Reporter: Ned Elwell

For all CTA buttons on the Product Marketing Landing Page page type, the credit yellow buttons display white text on yellow buttons.

This combination is inaccessible. The text color needs to be #000000 black or #414141 dark grey.

Epic Link

None

Activity

Show:
Zainab Amir
May 31, 2019, 7:50 AM

It is resolved. You can confirm by visiting the demo page you created https://www.edx.org/yellow-cta-button-test

Zainab Amir
May 30, 2019, 10:41 AM
Ned Elwell
May 29, 2019, 2:31 PM

The issue was not with the CSS, or with the Cyber Monday pages specifically. Rather, with the Product landing page template in general.

I created a demo page here: https://www.edx.org/yellow-cta-button-test where you can see the issue.

The white on yellow does not have enough contrast to meet a11y. See attached images. The the button is grey text on yellow in the editor but white text on yellow on the page.

CC:

Zainab Amir
May 29, 2019, 10:15 AM

The path given for Spanish cyber Monday page in the css injection Product landing page yellow button text was wrong, that's why the css was only applied on English page.
The original path was es/oferta-de-cyber-monday but it should have been oferta-de-cyber-monday without the language prefix

Changing the path made the color consistent(black) with the English landing page

CC:

Gabriel Weinberg
November 30, 2018, 9:23 PM

not sure if this has an affect on these pages, but we did create a CSS injection in Drupal for the Cyber Monday english page. There are other injections in addition to the one we created. Again not sure if this has an affect, but just adding some hopefully helpful context.

https://www.edx.org/admin/config/development/css-injector

"Product landing page yellow button text" is the name of the injection we created for the Cyber Monday english page.

Thanks!

Fixed
Your pinned fields
Click on the next to a field label to start pinning.

Priority

CAT-4

Assignee

Zainab Amir

Reporter

Marco Morales