Feature/highlight a11y violation on component

[CodeByAlex]

Issue: #6001

What I did

I added highlight toggles for each accessibility rule and category at every level. A user can now click on the highlight checkbox and see their violation, pass, or incomplete rule highlighted in the iframe. Each type (violation, pass, or incomplete) has a corresponding color to differentiate the rule when highlighting.

Design:

Highlight-Toggle component - can take in one to many elements that it can highlight. This means that the toggle component can be placed at any level and highlight the element or elements passed in based on a switch.

Redux is being used to keep track of a global map where the key is the element itself and the value is an object containing the toggle state of the element and the original element outline so that the component isn't changed when the highlight is removed.

The highlight toggle uses the redux map to keep track of whether or not the element or elements within it are highlighted and whether or not the toggle state is true.

I worked with @domyen on the design elements for this feature to keep consistency across the app.

How to test

• Is this testable with Jest or Chromatic screenshots? yes
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? Maybe to describe the feature?

[CodeByAlex]

Thanks @domyen! Thanks for the feedback. I'll make sure that the "Highlight results" and checkbox are vertically centered and uncapitalize "results". My only concern about aligning the checkboxes to the right would be in scenario where someone uses a wide screen. It may be hard to determine which checkbox is associated with which rule (one above or below in most cases). What do you think?

[domyen]

👍 We can solve this by showing the boundaries of the row:

The right hand alignment makes the highlight checkbox a bit less distracting. After all the goal is to communicate the rules not that there's a checkbox. :)

And while we're here:

• The button should extend to the full length of the row
• The button should have a cursor:pointer
• button:hover should have bg color rgba(0,0,0,.05)

You're a legend @CodeByAlex 🙏 🙇

One more thing

• the border bottom color var is theme.color.border

[CodeByAlex]

I like that a lot @domyen, it looks a lot cleaner. Ill make that design change

[CodeByAlex]

@domyen, Ive made the changes. Let me know what you think

[CodeByAlex]

I think one other touch-up that would make this look a little sleeker would be to put the "Highlight results" text on the left side of the checkbox. This keeps a uniform line down the right side. I added that change in the latest commit.

[domyen]

LGTM from a UI perspective

[shilman]

This looks amazing! Great work @CodeByAlex and @domyen! Esp love the right aligned checkbox on top -- details ❤️❤️❤️ 👌 !

Since the UI has gotten complex, and it's been awhile since I used redux for state management (cc @alexandrebodin @ndelangen), here's what I'd like to see on the code side:

• Stories for the major components
• Hooked into official-storybook or another top-level storybook to simplify testing

This might be outside the scope of this PR, but we should probably do this for all the core addons. It bothers me to see Jest tests with snapshots when we've already built a much nicer way to do this inside Storybook.

[ndelangen]

@CodeByAlex can you please allow maintainers to push to your branch? I'd like to fix the merge conflicts and merge

[CodeByAlex]

Sure thing @ndelangen. I checked the "Allow edits from maintainers option" so you should be good now

[ndelangen]

Thank you! Let's get this merged, amazing feature!

[CodeByAlex]

Thanks, @ndelangen! Glad you like it

[Armanio]

Looking great!
I wrote a few comments. Check it before you merge it, please.
Thank you for your effort.