[FX-2141] Installs and configures eslint-plugin-styled-components-a11y

[dzucconi]

Re: FX-2141

I'd like to install a set of linting rules to pick up some basic problems which seem pretty pervasive throughout the site. Hopefully we can lean on the linting to guide developers into building more accessible components.

So we can't use eslint-plugin-jsx-a11y because of styled-components. However eslint-plugin-styled-components-a11y exists and seems to work pretty alright!

Running this against src comes up with 82 errors (I think only so few because of the palette components not being checked, see below) — mostly misuse of onClick handlers.

---

I might have to turn some rules to warn? Or is it just the case that the linter only runs on commit/push?

---

One caveat here is that Boxand other palette components aren't being checked, which will be a very big offender. I believe this is due to the weirdness with the primitives.View thing. Though I think we should be able to just split that off into an .ios for now and use a real div. I'll take a look when I install this same plugin in palette.

[damassi]

What do you think about disabling the keyboard listener rule for now? That will certainly confuse folks without concrete direction.

[dzucconi]

@damassi I don't really think any of them should be disabled — they are easy to fix and definitely should be fixed. (Use Clickable, basically). I suspect the problem will just be editing old files which might be problematic (in which case just disabling the rule selectively is better)

[dzucconi]

It's probably more a question of how to guide when that comes up... is there a way to pop up a custom warning message?

[damassi]

Use Clickable, basically

Oh I see -- I had misinterpreted what the linter was guiding the user towards.

is there a way to pop up a custom warning message

Great question / feature.

[dzucconi]

@damassi we could start by enabling this in palette first since it's a smaller/stricter surface?

[damassi]

This is a great addition 👍

If there's some lifting / learning that the broader team will need to take on be sure to guide folks in #dev, otherwise LGTM! Merge when 🍏

[damassi]

we could start by enabling this in palette first since it's a smaller/stricter surface?

Not necessarily -- if the errors are pretty straight forward in Force we should just fix em.

[dzucconi]

Cool 👍 will merge on Tuesday when I get back (OOO)

[starsirius]

Excited to make the site more accessible! I'd suggest fixing a few errors as examples (can be in a followup PR), and we can use them as guidance and point people to the PR.

[sweir27]

👋 is this good to go? (once merge conflict is fixed 😄 )

Maybe we could use FE office hours to communicate to people what the changes they should expect are?

[dzucconi]

OK — just rebased and will merge on green