Thread by @ryanseddon

The @Zendesk design system went fully open source today! It's called Garden. garden.zendesk.com/react-componen…

We've utilised a really cool pattern, based on render-props, to help create some primitive components, that can help anyone as a starting base.

Did I mention you'll get full wai-aria, keyboard navigation and rtl support for free?

Strap yourself in, a thread.

We divide our components into 3 parts:

- Container
- Element
- Views

The one I want to focus on is the Container component, this is heavily inspired by Downshift and the great work @kentcdodds and co have done.
github.com/paypal/downshi…

They're UI-less components that provide a render callback. These will provide state and prop getters, which you can then spread onto the correct components.

Let's start simple, here we have a text field in our own styling.

We have high abstraction components built on top of our own container components.

To use this as a starting base for your own work you can use our FieldContainer component, which TextField is built on top of.
codesandbox.io/s/00jlol8rz0

Simple demo but what does it offer? Well if you inspect the code, via devtools, you get wai-aria properties applied to the correct elements, the label has the for attribute, which corresponds with the input id.

I mentioned you get keyboard navigation for free, lets up the ante and create tabs.
codesandbox.io/s/r4ww9vl76n

Using the arrow keys once the tab list receives focus, you can easily change tab selection and then activate a tab by using enter or spacebar.

While the code seems pretty verbose, it's incredibly powerful. My recommendation is to wrap this logic into your own high abstraction component for friendlier consumption. See our own <Tabs /> component for example.
garden.zendesk.com/react-componen…

Behind the scenes of the TabsContainer component we have the all powerful SelectionContainer that handles keyboard navigation and a single selection model.
garden.zendesk.com/react-componen…

Here you can create an interactive list completely controlled by the keyboard that can handle vertical or horizontal lists and the keyboard controls act as expected.
codesandbox.io/s/882n28n8wj

To really see the power of SelectionContainer checkout what we can do with our Menu and Select components.

garden.zendesk.com/react-componen…
garden.zendesk.com/react-componen…

There's a whole heap gems in there, that can get you up and running to building more accessible components.

One last demo, here's the bootstrap theme applied to the previous tabs demo to show how you can incorporate another theme.

codesandbox.io/s/pkkqmowo1x

Hope you enjoyed my nerdy thread if you want to learn more check out the repo github.com/zendeskgarden/…

Props to my colleagues who've done excellent work to get this into the shape it is: Austin "get a twitter account already" Green, @jonathanzempel, @allisonacs, @TinkerAndDesign