Manage focus for modal panels

This implements automatic focus management for modal panels using the
excellent focus-trap module.

Upon being shown, modals will have their first tabbable element
automatically focused, and shifting focus with the tab key (or more
correctly the core:focus-next command) will be limited to the contents
of the modal. If the modal does not have any tabbable elements, focus()
will be sent to the panel's root element (if it implements it).

I'm happy to update this to *always* calls focus on the panel's root
element, but then modal implementers would need to handle that and
focus things on their own. I'd argue the tabbable element behavior
is more accessible though :)

This has the effect of not automatically closing most of Atom's own
modals whenever the tab key is pressed, which was an odd nonstandard
behavior, IMO.

This also automates returning focus to the element that had focus before
the modal was shown, something up until now had to be implemented in
every modal in Atom.

This likely breaks a few contracts for existing Atom packages that
create modals, but I've found this doesn't conflict behaviorally with
well-behaved modals like the command palette which implement their own
focus management (which can be removed if this lands).

Released under CC0.

src/panel-container-element.js

@@ -1,5 +1,6 @@
 'use strict'
 
+const focusTrap = require('focus-trap');
 const {CompositeDisposable} = require('event-kit')
 
 class PanelContainerElement extends HTMLElement {
@@ -49,8 +50,23 @@ class PanelContainerElement extends HTMLElement {
 
     if (this.model.isModal()) {
       this.hideAllPanelsExcept(panel)
+      const modalFocusTrap = focusTrap(panelElement, {
+        // focus-trap will attempt to give focus to the first tabbable element
+        // on activation. If there aren't any tabbable elements,
+        // give focus to the panel element itself
+        fallbackFocus: panelElement,
+        // closing is handled by core Atom commands and this already deactivates
+        // on visibility changes
+        escapeDeactivates: false,
+      });
+
       this.subscriptions.add(panel.onDidChangeVisible(visible => {
-        if (visible) { this.hideAllPanelsExcept(panel) }
+        if (visible) {
+          this.hideAllPanelsExcept(panel)
+          modalFocusTrap.activate();
+        } else {
+          modalFocusTrap.deactivate();
+        }
       }))
     }
   }