(enh) improve default theme accessibility

[joshgoebel]

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.

[allejo]

Suggested change

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

nitpick

[joshgoebel]

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]

Two notes on this one:

1. 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;
   	}

2. 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).

[joshgoebel]

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]

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);
	}