import rules, {listItemRules, listItemIconRules} from './rules.a11y';

### Rules

#### List

<AccessibilityList rules={rules} />

#### ListItem

<AccessibilityList rules={listItemRules} />

#### ListItemIcon

<AccessibilityList rules={listItemIconRules} />

### Usage

#### Code examples

- with `<ListItem/>`

```jsx
Your friends:
<List>
  <ListItem>koleyko97</ListItem>
  <ListItem>introda__D</ListItem>
</ListItem>
```

- with `<ListItem/>` and `<ListItemIcon/>`

```jsx
Your friends:
<List>
  <ListItem>
    <ListItemIcon>
      <Icon
        color="icon-black"
        type="chevron_right"
        size={16}
        aria-hidden
      />
    </ListItemIcon>
    koleyko97
  </ListItem>
  <ListItem>
    <ListItemIcon>
      <Icon
        color="icon-black"
        type="chevron_right"
        size={16}
        aria-hidden
      />
    </ListItemIcon>
    introda__D
  </ListItem>
</ListItem>
```

- ordered

```jsx
Next steps:
<List ordered>
  <ListItem>Add a profile picture</ListItem>
  <ListItem>Add your first question</ListItem>
</ListItem>
```

- with custom meaningful icons

```jsx
Your friends:
<List>
  <ListItem>
    <ListItemIcon>
      <Icon
        color="icon-black"
        type="circle"
        size={16}
        aria-hidden
      />
    </ListItemIcon>
    koleyko97
  </ListItem>
  <ListItem>
    <ListItemIcon>
      <Icon
        color="icon-black"
        type="heart"
        size={16}
        title="close friend"
      />
    </ListItemIcon>
    introda__D
  </ListItem>
</ListItem>
```