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
(enh) improve default theme accessibility #3402
Changes from all commits
3ef4a1b
e5b6e11
19d3457
6865cb7
c77be2f
c9c65f7
96169f2
ba32428
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
|
@@ -2,6 +2,9 @@ | |||||||
|
||||||||
const fs = require("fs"); | ||||||||
const css = require("css"); | ||||||||
const wcagContrast = require("wcag-contrast"); | ||||||||
const Table = require('cli-table'); | ||||||||
const csscolors = require('css-color-names'); | ||||||||
require("colors"); | ||||||||
|
||||||||
const CODE = { | ||||||||
|
@@ -184,6 +187,79 @@ function check_group(group, rules) { | |||||||
} | ||||||||
} | ||||||||
|
||||||||
const round2 = (x) => Math.round(x*100)/100; | ||||||||
|
||||||||
class CSSRule { | ||||||||
constructor(rule, body) { | ||||||||
this.rule = rule; | ||||||||
if (rule.declarations) { | ||||||||
this.bg = rule.declarations.find(x => x.property =="background")?.value; | ||||||||
this.fg = rule.declarations.find(x => x.property =="color")?.value; | ||||||||
|
||||||||
if (this.bg) { | ||||||||
this.bg = csscolors[this.bg] || this.bg; | ||||||||
} | ||||||||
if (this.fg) { | ||||||||
this.fg = csscolors[this.fg] || this.fg; | ||||||||
} | ||||||||
|
||||||||
// inherit from body if we're missing fg or bg | ||||||||
if (this.hasColor) { | ||||||||
if (!this.bg) this.bg = body.background; | ||||||||
if (!this.fg) this.fg = body.foreground; | ||||||||
} | ||||||||
} | ||||||||
} | ||||||||
get background() { | ||||||||
return this.bg | ||||||||
} | ||||||||
|
||||||||
get foreground() { | ||||||||
return this.fg | ||||||||
} | ||||||||
get hasColor() { | ||||||||
if (!this.rule.declarations) return false; | ||||||||
return this.fg || this.bg; | ||||||||
} | ||||||||
toString() { | ||||||||
return ` ${this.foreground} on ${this.background}` | ||||||||
} | ||||||||
|
||||||||
contrastRatio() { | ||||||||
if (!this.foreground) return "unknown (no fg)" | ||||||||
if (!this.background) return "unknown (no bg)" | ||||||||
return round2(wcagContrast.hex(this.foreground, this.background)); | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We have some themes that use highlight.js/src/styles/arduino-light.css Lines 52 to 54 in 0bf3ade
|
||||||||
} | ||||||||
} | ||||||||
|
||||||||
function contrast_report(rules) { | ||||||||
console.log("Accessibility Report".yellow); | ||||||||
|
||||||||
var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs")); | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
nitpick There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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... |
||||||||
var body = new CSSRule(hljs); | ||||||||
const table = new Table({ | ||||||||
chars: {'mid': '', 'left-mid': '', 'mid-mid': '', 'right-mid': ''}, | ||||||||
head: ['ratio', 'selector', 'fg', 'bg'], | ||||||||
colWidths: [7, 40, 10, 10], | ||||||||
style: { | ||||||||
head: ['grey'] | ||||||||
} | ||||||||
}); | ||||||||
|
||||||||
rules.forEach(rule => { | ||||||||
var color = new CSSRule(rule, body); | ||||||||
if (!color.hasColor) return; | ||||||||
table.push([ | ||||||||
color.contrastRatio(), | ||||||||
rule.selectors, | ||||||||
color.foreground, | ||||||||
color.background | ||||||||
]) | ||||||||
// console.log(r.selectors[0], color.contrastRatio(), color.toString()); | ||||||||
joshgoebel marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||
}) | ||||||||
console.log(table.toString()) | ||||||||
} | ||||||||
|
||||||||
function validate(data) { | ||||||||
const rules = data.stylesheet.rules; | ||||||||
|
||||||||
|
@@ -195,6 +271,8 @@ function validate(data) { | |||||||
check_group(CODE, rules); | ||||||||
check_group(OTHER, rules); | ||||||||
check_group(HIGH_FIDELITY, rules); | ||||||||
|
||||||||
contrast_report(rules); | ||||||||
} | ||||||||
|
||||||||
process.argv.shift(); | ||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Two notes on this one:
Some styles use
background-color
to differentiate the background for specific elements. I think we should add support for checkingbackground-color
for WCAG contrast.highlight.js/src/styles/foundation.css
Lines 74 to 77 in 0bf3ade
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).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, we probably should, but where... damn old versions of Node. :-)
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.