chore/Issue-119: Setup project with Stylelint a11y plugin #121
Conversation
✅ Deploy Preview for super-tapioca-5987ce ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
DevLab2425
force-pushed
the
issue-119-stylelint-with-a11y
branch
from
79db066 to
d9e0ea3
Compare
stylelint.config.js
Outdated
| @@ -1,3 +1,9 @@ | |||
| export default { | |||
| extends: ["stylelint-config-recommended"], | |||
| plugins: ["@double-great/stylelint-a11y"], // -> no `extends` https://github.com/double-great/stylelint-a11y/issues/65 | |||
| rules: { | |||
| "a11y/media-prefers-reduced-motion": null, | |||
There was a problem hiding this comment.
When set as true, this rule will result in 2 failures:
src/components/side-nav/side-nav.module.css
31:5 ✖ Expected & #indicator is used with @media (prefers-reduced-motion) a11y/media-prefers-reduced-motion
src/components/table-of-contents/table-of-contents.module.css
41:5 ✖ Expected & #indicator is used with @media (prefers-reduced-motion) a11y/media-prefers-reduced-motion
✖ 2 problems (2 errors, 0 warnings)
I wasn't sure how much you wanted to refactor those 2 instances to wrap that rule (and others as well?) in a media query to meet the rule standard. Happy to do so, but wanted to get your thoughts first.
There was a problem hiding this comment.
Yeah, this was probably an oversight on my part, we have been trying to abide by this in other components
https://github.com/ProjectEvergreen/www.greenwoodjs.dev/blob/main/src/components/capabilities/capabilities.css#L47
So we should handle these cases as well please 🙏
There was a problem hiding this comment.
Thanks for the example. I wrapped the offending rulesets and all is passing.
DevLab2425
changed the title
lint-staged.config.js
Outdated
| @@ -1,5 +1,5 @@ | |||
| export default { | |||
| "*.js": ["npm run lint:js --"], | |||
| "*.js": ["npm run lint:js --", "npm run format --"], | |||
There was a problem hiding this comment.
was this accidental? seems like this was something from the previous PR?
There was a problem hiding this comment.
I thought so too, but main doesn't seem to have it. Not sure where it was lost.
EDIT:
Hmm... it was removed. Should I revert this change then?
There was a problem hiding this comment.
Hmm... it was removed. Should I revert this change then?
yes please, as it seems to work just as fine when applying the formatting to just the wildcard glob pattern. didn't seem like it needed to be run twice.
stylelint.config.js
Outdated
| @@ -1,3 +1,9 @@ | |||
| export default { | |||
| extends: ["stylelint-config-recommended"], | |||
| plugins: ["@double-great/stylelint-a11y"], // -> no `extends` https://github.com/double-great/stylelint-a11y/issues/65 | |||
| rules: { | |||
| "a11y/media-prefers-reduced-motion": null, | |||
There was a problem hiding this comment.
Yeah, this was probably an oversight on my part, we have been trying to abide by this in other components
https://github.com/ProjectEvergreen/www.greenwoodjs.dev/blob/main/src/components/capabilities/capabilities.css#L47
So we should handle these cases as well please 🙏
thescientist13
added
enhancement
thescientist13
changed the title
Related Issue
Fix #119
Summary of Changes
@double-great/stylelint-a11yplugin:focusalong side:hoveruse