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

<Meta title="Manual/Accessibility" />

# Building Accessible Applications with Patchwork

Patchwork is designed to be completely accessible when used properly. Generally all of the components within patchwork are _accessible in isolation_. The documents in this section should help you make sure you are writing accessible UIs.

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

## CTAs and Clickable Components

Most designs contain "calls to action" (CTAs). These take the form of links, buttons, and other clickable elements. There are a few things to keep in mind.

<TertiaryButton onClick={linkTo('components-actions-accessibility-tips--page')}>
  Accessible CTAs
</TertiaryButton>

## Semantic Headers

Screen readers use H1..H6 tags to generate navigation shortcuts for non-sighted users. This means we need to pay attention to the page's header structure.

<TertiaryButton
  onClick={linkTo('components-typography-accessibility-tips--page')}
>
  Accessible Headers
</TertiaryButton>

## Color Contrast

It's important to get colors right. Not only do they provide a major part of the "feel" of our different brands, but they are also subject to stringent a11y requirements. This is to provide accessibility for users with different types of color blindness as well as users who struggle with low-contrast text.

<TertiaryButton onClick={linkTo('design-system-colors--palette')}>
  Accessible Color Use
</TertiaryButton>

## Form Inputs

Custom form inputs are a very common source of accessibility bugs. Patchwork's inputs are designed to help you avoid them.

<TertiaryButton onClick={linkTo('components-inputs-accessibility-tips--page')}>
  Accessible Form Inputs
</TertiaryButton>

## Live Display Regions

Coming soon

## Images and Icons

Coming soon

## Radio buttons

There are a few gotchas around Radios and screen readers.

<TertiaryButton
  onClick={linkTo('components-inputs-radio-accessibility-tips--page')}
>
  Accessible Radio Buttons
</TertiaryButton>

## Range Sliders

Coming soon

## Complex Custom Controls

Coming soon