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

### Rules

#### Dialog

<AccessibilityList rules={rules} />

#### DialogCloseButton

<AccessibilityList rules={closeButtonRules} />

### Usage

#### Code examples

- with label only

<!-- prettier-ignore -->
```jsx
<Dialog open aria-label="Cookies consent">
  We use cookies
</Dialog>
```

- described by `<DialogBody />`

<!-- prettier-ignore -->
```jsx
<Dialog
  open
  describedBy="desc-id"
  aria-label="Dialog label"
>
  <DialogBody id="desc-id">
    Information you provide to us directly.
  </DialogBody>
</Dialog>
```

- with `<DialogHeader />`, `<DialogCloseButton />`, `<DialogBody />`

<!-- prettier-ignore -->
```jsx
<Dialog
  open
  aria-labelledBy="header-id"
>
  <DialogCloseButton
    onClick={onDismiss}
  />
  <DialogHeader
    id="header-id"
  >
    <h2>Header</h2>
  </DialogHeader>
  <DialogBody>
    Information you provide to us directly.
  </DialogBody>
</Dialog>
```

- with custom `<DialogCloseButton />` label

<!-- prettier-ignore -->
```jsx
<Dialog
  open 
  aria-label="Dialog label"
>
  <DialogCloseButton
    onClick={onDismiss}
    aria-label="Accept and close"
  />
</Dialog>
```