import rules, {asButtonRules} from './linkRules';

## Accessibility

### Link `as="a"`

<AccessibilityList rules={rules} />

<InfoBox>
  Element, that looks like a link, but doesn't cause the user agent to navigate
  to a new resource but have onClick listener is a button and should meet the
  accessibility requirements for{' '}
  <a href="#link-asbutton">
    Link <code>as="button"</code>
  </a>
  .
</InfoBox>

More can be found in [Typography documentation](/docs/foundation-✨-typography--page#accessibility)

### Link `as="button"`

<AccessibilityList rules={asButtonRules} />

### Usage

#### Code examples

- `as="a"`

<!-- prettier-ignore -->
```jsx
<Link href="https://example.com/">
  Read more about our products
</Link>
```

- `as="button"`

<!-- prettier-ignore -->
```jsx
<Link
  as="button"
  onClick={onClick}
>
  Check our offer
</Link>
```

- with a meaningful label

<!-- prettier-ignore -->
```jsx
<Link
  href="https://example.com"
  aria-label="Read more about our products"
>
  Read more
</Link>
```

- with an underline to indicate it's a link

<!-- prettier-ignore -->
```jsx
<Link
  href="https://example.com"
  underlined
>
  Privacy policy
</Link>
```

- disabled

<!-- prettier-ignore -->
```jsx
<Link
  as="button"
  onClick={onClick}
  disabled
>
  Check our offer
</Link>
```

### Resources

- <https://www.a11y-collective.com/blog/the-perfect-link/>
- <https://www.levelaccess.com/methods-of-indicating-the-purpose-of-a-link/>
- <https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html>
- <https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html>
- <https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html>
- <https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1>