Bug report - color contrast on course completion page not accessible

[kaitohm]

Description

The color contrast of lesson titles on a course completion page are not accessible. It should probably be plain white on the black background.

Step-by-step reproduction instructions

1. Go to a course completion page, such as https://learn.wordpress.org/course-complete/?course_id=41529
2. Color of titles will appear as seen in the screenshot below:

Expected behaviour

It should probably be plain white text.

Environment information

• Browser(s) are you seeing the problem on: Chrome
• Device you are using and operating system (e.g. "Desktop with Windows 10", "iPhone with iOS 14", etc.): Mac OS

[jonathanbossenger]

Thanks for logging this Ben, I will do my best to look into it in the coming week.

[cynthianorman]

The text is using CSS on the h3 tag which has color: #555 !important;
You'll find this within the overrides CSS file

The header tag wrapping the h3 tag has class
wp-block-sensei-lms-course-results__module-header has-text-color has-white-color
but the has-white-color is being ignored because of the h3 tag override

I'm thinking the background color can be changed within the _sensei.scss file
Something like #eee since we need the #555 text color to contrast sufficiently but still have it stand out against the white background

.wp-block-sensei-lms-course-results.is-style-default .wp-block-sensei-lms-course-results__module-header:not(.has-background) {
    background-color: #eee;
}

See screenshot of test
https://gyazo.com/98de4d8cbf01a044430b117c7d785af5

[cynthianorman]

#1950

The change to _sensei.scss file has been added to the PR.

Initially, there was a build error but I was able to fix this by changing permissions to read/write.

I'm curious as to why I had the issue with composer.lock as my first PR work with you, awhile back, didn't have this issue. I did change computers recently and redid the entire setup of my local dev environment prior to doing this PR work.

Thanks @jonathanbossenger

[jonathanbossenger]

@cynthianorman thanks for your patience here.

I'm curious as to why I had the issue with composer.lock as my first PR work with you, awhile back, didn't have this issue. I did change computers recently and redid the entire setup of my local dev environment prior to doing this PR work.

It looks like you've added a dev dependency somewhere along the line, possibly by accident

        {
            "name": "adhocore/jwt",
            "version": "1.1.2",
            "source": {
                "type": "git",
                "url": "https://github.com/adhocore/php-jwt.git",
                "reference": "6c434af7170090bb7a8880d2bc220a2254ba7899"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/adhocore/php-jwt/zipball/6c434af7170090bb7a8880d2bc220a2254ba7899",
                "reference": "6c434af7170090bb7a8880d2bc220a2254ba7899",
                "shasum": ""
            },
            "require": {
                "php": "^7.0 || ^8.0"
            },
            "require-dev": {
                "phpunit/phpunit": "^6.5 || ^7.5"
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "Ahc\\Jwt\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Jitendra Adhikari",
                    "email": "[email protected]"
                }
            ],
            "description": "Ultra lightweight JSON web token (JWT) library for PHP5.5+.",
            "keywords": [
                "auth",
                "json-web-token",
                "jwt",
                "jwt-auth",
                "jwt-php",
                "token"
            ],
            "support": {
                "issues": "https://github.com/adhocore/php-jwt/issues",
                "source": "https://github.com/adhocore/php-jwt/tree/1.1.2"
            },
            "funding": [
                {
                    "url": "https://paypal.me/ji10",
                    "type": "custom"
                }
            ],
            "time": "2021-02-20T09:56:44+00:00"
        },

My suggestion would be to copy the existing composer.lock file contents from the trunk branch (you can copy the original contents via GitHub here) so that your composer.lock file matches what's in trunk. We don't need that dependency added for Learn as far as I know.

[cynthianorman]

@jonathanbossenger thank you for pointing out that dependency. I removed it and reran locally to make sure I could still build the project and it worked fine.

When I copied the exact version of the composer.lock file from WP/Learn my build locally was failing.

I pushed my composer.lock change with the dependency removed to the PR.

At this point, is there anything else I need to do for this PR in order to have the background colour modified using my additional CSS?

[cynthianorman]

New PR created with CSS added to sensei file
#2098

[adamwoodnz]

PR has been merged and deployed. @cynthianorman @bsanevans @jonathanbossenger please verify the fix and close if satisfied 🙂

[kaitohm]

Yes, much better! Thanks you all 🙌

[jonathanbossenger]

Thanks everyone!