import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Button, FilterIcon, Text, Link, Box, Head1 } from '../../src';

<Meta title="1 - Manual/4 - Accessibility" />

# Building an Accessible Web with Patchwork

Preface: There are a few things to consider when building an entirely accessible page. We've outlined <a href="https://wealthsimple.quip.com/SOTJAKAU2wQA/A11y-Manual-Testing-Guide-Web-Edition">some of those accessibility testing rules here</a>

Patchwork is designed to be completely accessible when used properly. Generally all of the components within patchwork are _accessible in isolation_. We've outlined a few components below that have some accessibility implications as you build pages.

## `<Button />`

Our component tries to be smart about accessibility for you. It's a common pattern in our app for a link to look like a button - because of this, the `Button` accepts both an `onClick` and an `href`. It will decide for you which to use, so you don't have to worry about this.

You can see in the "Button as link" story below, we pass an `href` to the button and it automatically uses an `<a />` tag under the hood. Generally anything that's a link should use an anchor tag under the hood because they're easier to understand for screen readers.

<Canvas>
  <Button href="https://wealthsimple.com">I'm a link!</Button>
</Canvas>

## `<Icon />`

Icons are a very common source for accessibility issues. This is because they're very often used as a button, and without any label context, screen readers have no idea what it is. Anytime you try and use an `UnstyledButton` wrapper around an icon you'll want to give your button an `aria-label`.

<Canvas>
  <UnstyledButton
    aria-label="Filter choices"
    onClick={() => alert('Check out the source code to see the aria-label!')}
  >
    <FilterIcon />
  </UnstyledButton>
</Canvas>

## `<Link />`

Our link component is very similar to the behaviour of the `Button`. If you need a link style that's actually a button, you can use `onClick` and we'll use a `<button />` under the hood rather than an `<a />`.

<Canvas>
  <Text>Link as button:</Text>
  <Box>
    <Link onClick={() => alert('clicked!')}>I'm a button</Link>
  </Box>
</Canvas>

## `<Text />` vs `<HeadX />`

We export 2 components that can _visually_ look the exact same but their semantics are very different:

- `Text`: Will always render a `<p />` tag, which means all text like this is technically a paragraph like any other text.
- `Head1`: Will always render an `<h1 />` tag (Head2 = h2, and so on). You also have to make sure that they appear in order from h1 - h6, or screen readers won't be able to give a good overview of the page.

<Canvas>
  <Head1>
    This is a <pre style={{ display: 'inline' }}>Head1</pre>{' '}
    component.&nbsp;&nbsp;
  </Head1>
  <Text bold fontSize="f5">
    This is a <pre style={{ display: 'inline' }}>Text</pre> component.
  </Text>
</Canvas>
