Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme: Improve .qunit-test.fail and expected/actual diff colors #1803

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Krinkle
Copy link
Member

@Krinkle Krinkle commented Dec 8, 2024

Based on https://qunitjs.com/resources/example-fail.html

Before After
Screenshot Screenshot
Before Before (restored) After
Screenshot Screenshot Screenshot

Follows-up #1774, to finish up remaining issues with poor color contrast.

  • Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in .counts.

  • Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table.

  • Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

  • Fix broken .qunit-test.pass .test-expected { color: #999; } override which was only applicable to passing "todo" tests as no other passing tests have failing assertions under them. This was meant to mute the colors of these failures to avoid distraction. However the CSS cascade has changed over time such that these styles no longer applied.

    This is likely masked by the fact that passing tests (including passing todos) are collapsed by default, so there's very little attention to these anyway.

    Restore these overrides, and extend them to cover the assertion "message", "diff", and "source" lines as well.

Easy way to identify color usage:

$ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c

* Fix huge color contrast issue with the dark red background
  behind similarly dark colors, especially in `.counts`.

* Remove white padding between test item edge and assert list
  assertion green/red shading. Instead, add some border-spacing
  to the assert item table.

* Adjust various colors slightly to comply with WCAG guidelines.
  https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

* Fix broken `.qunit-test.pass .test-expected { color: qunitjs#999; }`
  override which was only applicable to passing "todo" tests as no
  other passing tests have failing assertions under them. This was
  meant to mute the colors of these failures to avoid distraction.
  However the CSS cascade has changed over time such that these
  styles no longer applied.

  This is likely masked by the fact that passing tests (including
  passing todos) are collapsed by default, so there's very little
  attention to these anyway.

  Restore these overrides, and extend them to the "diff" and
  "source" lines as well.

Easy way to identify color usage:

```
$ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c
```

Ref qunitjs#1774.
@Krinkle
Copy link
Member Author

Krinkle commented Dec 8, 2024

@IgnaceMaes FYI. Bringing in a few more of your touches from qunit-theme-ember.

Plus a few other improvements as well:

  • Darker greens and reds for improved color contrast.
  • The whitespace improvements I applied in a different way (using border-spacing), as that aligns a few other things automatically as well.
  • Add "TODO" test to the example, and make that stand a bit more, using the same general colors as the TAP reporter on the QUnit CLI (yellow for SKIP, blue for TODO).
  • Restore and improve of visual muting for failed assertions under passing "todo" tests.

Remember IgnaceMaes/qunit-theme-ember#8 as well, to make sure Ember is ready for QUnit 3.0!

@Krinkle Krinkle added this to the 3.0 release milestone Dec 8, 2024
@Krinkle
Copy link
Member Author

Krinkle commented Dec 18, 2024

I've adjusted the colors a bit further, to improve color contrast not just between foreground and background, but also between the green and red. I noticed that for people with color blindness, the status quo is significantly better in terms of differentiating green/red, and drawing attention to red.

Note that the difference is quite small in the "Norm" view, but the others benefit significantly from this tweak to avoid a regression.

- Status quo Previous commit (like ember-theme-qunit) Latest PR commit
Norm Screenshot Screenshot Screenshot
Protonopia (no red) Screenshot 2024-12-18 at 19 40 03 Screenshot 2024-12-18 at 19 40 13 Screenshot 2024-12-18 at 19 40 30
Deuternopia (no green) Screenshot 2024-12-18 at 19 43 56 Screenshot 2024-12-18 at 19 43 57 Screenshot 2024-12-18 at 19 43 59
Achromatopsia (no color) Screenshot 2024-12-18 at 19 48 23 Screenshot 2024-12-18 at 19 48 25 Screenshot 2024-12-18 at 19 48 26
 #qunit-banner.qunit-fail {
    background-image: none;
-   background-color: #E84646;
+   background-color: #EC4242;
 
 .qunit-assert-list .pass {
-   border-left: 10px solid #41C351;
+   border-left: 10px solid #64CF06;
 
 .qunit-assert-list .fail {
    color: #710909;
-   border-left: 10px solid #E84646;
+   border-left: 10px solid #EC4242;

 .qunit-assert-list .fail .test-actual {
-   color: #E84646;
+   color: #EC4242;
 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant