Allow popovers to be closed via the Escape key

[alexpaxton]

Closes #501

Changes

• Popovers can be dismissed by hitting the escape key
  • The dialog component can be focusable and receive keyboard events
  • Keyboard events bubble up to the portal containing the popover and then it closes
  • PopoverDialog will make itself the browser's active element if nothing else is in focus
• Update documentation
  • Explain nuances of prop combinations
  • Add more permutations of props for manual testing
• Round numbers down to whole numbers when calculating popover position
  • This prevents fuzzy sub-pixel rendering of popovers
• If visible is true it will supersede the escape key behavior in the interest of complete external control

Screenshots

Example of PopoverDialog deferring focus to an input with autofocus={true}:

Checklist

Check all that apply

• Updated documentation to reflect changes
• Added entry to top of Changelog with link to PR (not issue)
• Tests pass
• Peer reviewed and approved
• Signed CLA (if not already signed)

[mavarius]

Two main issues:

• The visibility prop can be used to make this a controlled or uncontrolled component
• The keyboard listener should be specific to the popover that initiated it

[alexpaxton]

@mavarius I'm gonna noodle on this more and see if I can find a way to only close a single popover at a time using the escape key

[mavarius]

Could this inadvertently pull focus from an element within the dialog, like a button or input field?

[alexpaxton]

That's a good question... I'll try building an example of this in storybook

[alexpaxton]

I updated PopoverDialog to only pull focus if no other element is in focus, which you can apparently check using document.activeElement. Also built a story that verifies popover focusing works with and without children using autofocus

[mavarius]

Looks good! Ship it