Overview

Expected behavior

Keyboard navigation:

• The Popover has a focusable reference element such as a toggle button or link.
• To open the Popover, press Enter or Space on the focused toggle button. In the case of hover links, press Tab to focus on the link and show the Popover.
• To close the Popover, press Escape or Tab to lose focus.
• Tabbing inside a Popover should focus on its interactive elements. When you Tab from the last interactive element in the Popover, it will close the Popover and focus on the next interactive element that comes after the reference element (e.g. button).

Click event: When a Popover is open, clicks outside the Popover should close it.

Acceptance Criteria

• Ensure the Enter and Space keys open and close the Popover.
• Add a global escape key handler (refer to Tooltip). Make sure to add the event listener when the Popover is displayed and remove the event listener when the Popover is hidden.
• Ensure the expected tab order when entering and exiting the focus of the Popover. This includes tabbing inside the Popover's interactive elements and tabbing to lose focus and close the Popover.
• Ensure that clicking outside the Popover will close the Popover.