# Core/Popover - Design

A popover component that renders a trigger and popover content.

### Placement

The popover can be positioned relative to the trigger element in 12 different directions. The default
placement is `top`.

## Accessibility

### Keyboard interaction

| Key      | Function                                                                                                                      |
| -------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `Escape` | Closes the popover and returns focus to the trigger.                                                                          |
| `Tab`    | Moves focus to the next focusable element. If the popover contains focusable elements, they are included in the tab sequence. |

### WAI-ARIA Roles, States, and Properties

* The popover container has `role="dialog"`.
* The trigger has `aria-expanded` set to `true` when the popover is open, and `false` otherwise.
* The trigger has `aria-controls` set to the ID of the popover content.
* The popover has `aria-hidden` set to `false` when open, and `true` when hidden (unless removed from DOM).
* The popover has `aria-describedby` pointing to the content element.