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

### Default

<AccessibilityList rules={rules} />

<InfoBox>
  By default, <code>Avatar</code> is treated as a decorative image.
</InfoBox>

### With a `link`

<AccessibilityList rules={linkRules} />

<InfoBox type="warning">
  If <code>ariaLinkLabel</code> is not set, <code>Avatar</code> is removed from
  accessibility tree and link is not accessible.
</InfoBox>

### Usage

#### Code examples

- hidden from accessibility tree

<!-- prettier-ignore -->
```jsx
<Avatar
  imgSrc="/user/avatar.jpg"
/>
```

- with accessible name

<!-- prettier-ignore -->
```jsx
<Avatar
  imgSrc="/user/avatar.jpg"
  alt="Face with a moustache"
/>
```

- with accessible link

```jsx
<Avatar
  link="/profile"
  imgSrc="/user/avatar.jpg"
  ariaLinkLabel="your profile"
/>
```

#### Accessible name decision tree

![If the link prop is set and the user name is presented nearby, provide ariaLinkLabel. If the link is set but the username is missing, provide ariaLinkLabel and alt. If the link is not set and the username is missing, provide the username in alt. If the link is not set and the username is presented nearby, the avatar is purely decorative.](/avatar-a11y-diagram.jpeg)