(enh) improve default theme accessibility by joshgoebel · Pull Request #3402 · highlightjs/highlight.js

joshgoebel · 2021-11-16T12:39:28Z

Resolves #3393.

first pass at accessibility report in checkTheme
resolve CSS color names when necessary
(enh) default Dark theme is WCAG AAA wrt contrast

Changes

Dark Theme

Accessibility Report
┌───────┬────────────────────────────────────────┬──────────┬──────────┐
│ ratio │ selector                               │ fg       │ bg       │
│ 9.72  │ .hljs                                  │ #ddd     │ #303030  │
│ 13.2  │ .hljs-keyword,.hljs-selector-tag,.hlj… │ #ffffff  │ #303030  │
│ 5     │ .hljs-string,.hljs-title,.hljs-name,.… │ #d88     │ #303030  │
│ 4.52  │ .hljs-comment,.hljs-quote,.hljs-delet… │ #979797  │ #303030  │
└───────┴────────────────────────────────────────┴──────────┴──────────┘

Light Theme

Accessibility Report
┌───────┬────────────────────────────────────────┬──────────┬──────────┐
│ ratio │ selector                               │ fg       │ bg       │
│ 8.78  │ .hljs                                  │ #444     │ #F3F3F3  │
│ 4.56  │ .hljs-comment                          │ #697070  │ #F3F3F3  │
│ 8.78  │ .hljs-tag,.hljs-punctuation            │ #444a    │ #F3F3F3  │
│ 8.78  │ .hljs-tag .hljs-name,.hljs-tag .hljs-… │ #444     │ #F3F3F3  │
│ 9.25  │ .hljs-type,.hljs-string,.hljs-number,… │ #880000  │ #F3F3F3  │
│ 9.25  │ .hljs-title,.hljs-section              │ #880000  │ #F3F3F3  │
│ 4.51  │ .hljs-regexp,.hljs-symbol,.hljs-varia… │ #ab5656  │ #F3F3F3  │
│ 3.03  │ .hljs-literal                          │ #695     │ #F3F3F3  │
│ 5.22  │ .hljs-built_in,.hljs-bullet,.hljs-cod… │ #397300  │ #F3F3F3  │
│ 4.88  │ .hljs-meta                             │ #1f7199  │ #F3F3F3  │
│ 3.61  │ .hljs-meta .hljs-string                │ #38a     │ #F3F3F3  │
└───────┴────────────────────────────────────────┴──────────┴──────────┘

Checklist

Added markup tests, or they don't apply here because...
Updated the changelog at CHANGES.md

allejo

Because I dealt with this in highlight.php, just some nitpicks if we want this tool to be robust enough to scan all of our themes.

tools/checkTheme.js

allejo · 2021-12-09T07:15:21Z

tools/checkTheme.js

+function contrast_report(rules) {
+  console.log("Accessibility Report".yellow);
+
+  var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs"));


Suggested change

var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs"));

var hljs = rules.find(x => x.selectors?.includes(".hljs"));

nitpick

As you point out this isn't supported everywhere so I'm going to slow down with it until we figure our how/where to specify that dev work requires newer versions...

allejo · 2021-12-09T07:19:01Z

tools/checkTheme.js

+      this.bg = rule.declarations.find(x => x.property =="background")?.value;
+      this.fg = rule.declarations.find(x => x.property =="color")?.value;


Two notes on this one:

Some styles use background-color to differentiate the background for specific elements. I think we should add support for checking background-color for WCAG contrast.

highlight.js/src/styles/foundation.css

Lines 74 to 77 in 0bf3ade

.hljs-regexp {

background-color: #fff0ff;

color: #880088;

}

Should we have a minimum Node defined somewhere for dev environments? Optional chaining was added in Node 14 and our package.json requires Node 12+ (correctly so, for our users).

Should we have a minimum Node defined somewhere for dev environments?

Ah, we probably should, but where... damn old versions of Node. :-)

Some styles use background-color

I'll break this out into a separate issue... the tool doesn't have to be perfect for the main thrust of this to be mergeable.

allejo · 2021-12-09T07:27:20Z

tools/checkTheme.js

+  contrastRatio() {
+    if (!this.foreground) return "unknown (no fg)"
+    if (!this.background) return "unknown(no bg)"
+    return round2(wcagContrast.hex(this.foreground, this.background));


We have some themes that use rgba(), will .hex() work on those values?

highlight.js/src/styles/arduino-light.css

Lines 52 to 54 in 0bf3ade

.hljs-comment {

color: rgba(149,165,166,.8);

}

Co-authored-by: Vladimir Jimenez <allejo@me.com>

joshgoebel force-pushed the accessibility_default_themes branch from e0c83ca to ef08f0b Compare November 16, 2021 13:01

joshgoebel added 4 commits November 16, 2021 12:15

first pass at accessibility report in checkTheme

3ef4a1b

resolve CSS color names when necessary

e5b6e11

(enh) default Dark theme is WCAG AAA wrt contrast

19d3457

(enh) improve accessibility of default theme

6865cb7

joshgoebel force-pushed the accessibility_default_themes branch from ef08f0b to 6865cb7 Compare November 16, 2021 17:16

changelog

c77be2f

joshgoebel requested a review from allejo December 6, 2021 21:24

allejo reviewed Dec 9, 2021

View reviewed changes

joshgoebel and others added 2 commits December 9, 2021 10:41

Update tools/checkTheme.js

c9c65f7

Co-authored-by: Vladimir Jimenez <allejo@me.com>

Update tools/checkTheme.js

96169f2

Co-authored-by: Vladimir Jimenez <allejo@me.com>

joshgoebel mentioned this pull request Dec 9, 2021

Improve checkTheme script #3425

Open

Merge branch 'main' into accessibility_default_themes

ba32428

joshgoebel merged commit c37ef5b into highlightjs:main Dec 9, 2021

YoutacRandS-VA mentioned this pull request Jun 19, 2024

[Snyk] Upgrade highlight.js from 9.18.5 to 11.9.0 YoutacRandS-VA/enquirer#2

Open

Jimimaku mentioned this pull request Jul 28, 2024

[Snyk] Upgrade highlight.js from 11.3.1 to 11.10.0 Jimimaku/platformio-home#29

Closed

Stanislav1975 mentioned this pull request Aug 9, 2024

[Snyk] Upgrade highlight.js from 10.7.3 to 11.10.0 Stanislav1975/docs-2#3

Open

soyabn09 mentioned this pull request Sep 24, 2024

[Snyk] Upgrade highlight.js from 10.7.3 to 11.10.0 soyabn09/Vencord#9

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(enh) improve default theme accessibility#3402

(enh) improve default theme accessibility#3402
joshgoebel merged 8 commits intohighlightjs:mainfrom
joshgoebel:accessibility_default_themes

joshgoebel commented Nov 16, 2021 •

edited

Loading

Uh oh!

allejo left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

allejo Dec 9, 2021

Uh oh!

joshgoebel Dec 9, 2021

Uh oh!

allejo Dec 9, 2021

Uh oh!

joshgoebel Dec 9, 2021

Uh oh!

allejo Dec 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs"));
	var hljs = rules.find(x => x.selectors?.includes(".hljs"));

		this.bg = rule.declarations.find(x => x.property =="background")?.value;
		this.fg = rule.declarations.find(x => x.property =="color")?.value;

Conversation

joshgoebel commented Nov 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Checklist

Uh oh!

allejo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

allejo Dec 9, 2021

Choose a reason for hiding this comment

Uh oh!

joshgoebel Dec 9, 2021

Choose a reason for hiding this comment

Uh oh!

allejo Dec 9, 2021

Choose a reason for hiding this comment

Uh oh!

joshgoebel Dec 9, 2021

Choose a reason for hiding this comment

Uh oh!

allejo Dec 9, 2021

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

joshgoebel commented Nov 16, 2021 •

edited

Loading