pdehaan
commented
7 years ago Just spotted this tool on Twitter and it looks pretty interesting. Possibly a replacement for the https://github.com/GoogleChrome/lighthouse tool.
We can close this or break it down into more granular issues if needed.
# Install the `sonar` dependency locally (so we don't need to install globally).
> npm i @sonarwhal/sonar -D
# Create our .sonarrc config file using the CLI wizard.
> $(npm bin)/sonar --initAfter a bit of trial-and-error, I found this to be a decent config:
{
"browserslist": "",
"collector": {
"name": "cdp",
"options": {}
},
"formatter": "stylish",
"ignoredUrls": {
"code.cdn.mozilla.net": ["*"]
},
"rules": {
"axe": "error",
"content-type": "error",
"disallowed-headers": "error",
"disown-opener": "error",
"highest-available-document-mode": "error",
"manifest-exists": "off",
"manifest-file-extension": "error",
"manifest-is-valid": "error",
"meta-charset-utf-8": "error",
"no-friendly-error-pages": "error",
"no-html-only-headers": "off",
"no-protocol-relative-urls": "error",
"ssllabs": "error",
"x-content-type-options": "error"
},
"rulesTimeout": 120000
}Next, you can run the CLI tool against a remote URL using something like this:
> $(npm bin)/sonar https://fileshare.stage.mozaws.netAfter a few seconds-minutes, you should get something like the following:
✖ Finishing...
https://fileshare.stage.mozaws.net/bundle.js
line 3 col 3 Error 'content-type' header should have 'charset=utf-8' content-type
✖ Found 1 error and 0 warnings
https://fileshare.stage.mozaws.net/resources/upload.svg
line 15 col 30 Error 'content-type' header should have 'charset=utf-8' content-type
✖ Found 1 error and 0 warnings
https://fileshare.stage.mozaws.net/
Error 'x-ua-compatible' header was not specified highest-available-document-mode
Error No charset meta tag was specified meta-charset-utf-8
line 1 col 16 Error <html> element must have a lang attribute axe
line 15 col 9 Error id attribute value must be unique axe
line 25 col 15 Error Elements must have sufficient color contrast axe
✖ Found 5 errors and 0 warnings
✖ Found a total of 7 errors and 0 warnings
Exit code: 1I'm still playing with the tool, but it looks pretty cool. Possibly a bit too slow and overkill for running on Circle-CI or something per each commit though. But I kind of like how it found a few a11y issues and other missing HTML best practice bits. Plus, it runs against generated HTML, so it won't give us the same Handlebars in HTML linting issues we saw w/ htmllint (which may be a pro and con).
Nothing too dramatic showing up in a11y results:
> npm i a11y -D
> $(npm bin)/a11y https://fileshare.stage.mozaws.net/
✖ Controls and media elements should have labels
#link
✔ This element does not support ARIA roles, states and properties
✔ Any ID referred to via an IDREF must be unique in the DOMI think it's complaining about this DOM element <input id="link" type="url" value="" readonly/> and it's lack of an associated <label> tag.
I'm not aware of any other ESLint-y a11y linters, apart from https://www.npmjs.com/package/eslint-plugin-jsx-a11y. Although that one (while super awesome) relies on JSX, which may mean some front end rewriting and possibly converting to JSX/React.
TheAdnan
vladikoff
ajomadlabs
k0mpreni
Ref: https://github.com/mozilla/send/issues/139#issuecomment-320333492
target="_blank"is missing 'rel' values 'noopener', 'noreferrer' #439