Adds a11y docs

[myasonik]

Summary

Adds a bunch of accessibility guidelines. Hopefully people will read them.

The docs here are the same as the Accessibility Guidelines Google doc.

Checklist

• Added documentation examples
• A changelog entry exists and is marked appropriately
  - [ ] Checked in dark mode
  - [ ] Checked in mobile
  - [ ] Checked in IE11 and Firefox
  - [ ] Props have proper autodocs
  - [ ] Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes

[TinaHeiligers]

I added comments, questions and suggestions to the Google doc.

[cchaos]

We might need to consider how we're highlighting the sidebar. There are now 2 sections named "Accessibility" and so they're both in the selected state.

[cchaos]

Further, we should really get some sub-navigation headers into the sidebar for Guidelines pages.

[cchaos]

Overall we should add some Do/Don't panels to accompany and illustrate each section. There's just a lot of text and no "Do this, not that" type of examples that I think most devs will look for.

[myasonik]

I feel like these guidelines are held together with hot glue in the design department. It's mostly ok if you just look at the rendered page but I use a lot of inline styles and the spacing around the code examples is a little wonky.

If anyone has ideas on how to clean this up, I'm all ears.

CC @cchaos @snide

[snide]

Hey @myasonik I don't have time to go through this today and will be out tomorrow. We definitely shouldn't be changing sass for a guidelines page that only live in docs.

There's also other issues that you've pointed out. With its text heavy format this feels really close to an education-focused blog post rather than an example-driven guideline as we've generally provided. We can probably take what's here and move it in that direction, but it'll require some design work and some cycles.

I can help next week.

[snide]

Jumping back in here now data grid is mostly done. Gimme a day or two to do a pass.

[snide]

OK. This took too long, my apologies, but happy Thanksgiving? I did a fairly large cleanup of the layout that were mostly visual. The following changes were needed:

• Added a minHeight prop on GuidRuleExample to better layout grids of these.
• Changed @myasonik's callout changes to have some easier to grok prop names and types.
• Removed all of the custom style stuff. Most of it wasn't needed and could be fixed with more strict EUI usage.
• Modified some of the code content to better reference EUI rather than straight HTML. Specifically this felt necessary when discussing the styling of titles.
• Removed the 50 minute video. I think more video would be good here, but the recording needs to be both shorter and have better quality audio.

I think the content here is much improved and is likely good enough to merge. I still think it could use with some trimming, but I appreciate all the examples that are now in the document and it's much more readable.

This should get a review from @cchaos or another designer before merge since I'll be away.

[cchaos]

I'm finding mostly layout issues and others that are just easier to fix on my end.

[cchaos]

I've pushed mostly layout fixes. The other major change was some heading shifts for better links in the side nav. It will help consumers find what they're looking for via search.

Before

After

[myasonik]

@cchaos Do you think this is good to merge?

[cchaos]

Yep, LGTM, thanks @myasonik !!