Improve focus managmenet

src/components/__tests__/__snapshots__/checker.js.snap

@@ -5,6 +5,7 @@ exports[`render matches snapshot with errors 1`] = `
   <Tray
     border={false}
     contentRef={[Function]}
+    data-mce-component={true}
     defaultFocusElement={null}
     insertAt="bottom"
     label="Accessibility Checker"
@@ -452,6 +453,7 @@ exports[`render matches snapshot without errors 1`] = `
   <Tray
     border={false}
     contentRef={[Function]}
+    data-mce-component={true}
     defaultFocusElement={null}
     insertAt="bottom"
     label="Accessibility Checker"

src/components/__tests__/checker.js

@@ -1,6 +1,6 @@
 import React from "react"
 import Checker from "../checker"
-import { shallow } from "enzyme"
+import { shallow, mount } from "enzyme"
 import util from "util"
 
 const promisify = util.promisify
@@ -32,7 +32,9 @@ beforeEach(() => {
   fakeEditor = {
     getContainer: () => ({
       querySelector: () => fakeIframe
-    })
+    }),
+    on: jest.fn(),
+    focus: jest.fn()
   }
   child = node.appendChild(document.createElement("div"))
   child2 = node.appendChild(document.createElement("div"))
@@ -166,7 +168,7 @@ describe("check", () => {
   })
 
   test("does nothing if props.getBody() returns falsy", () => {
-    component = shallow(<Checker getBody={() => false} />)
+    component = shallow(<Checker getBody={() => false} editor={fakeEditor} />)
     instance = component.instance()
     const spy = jest.fn()
     instance.check(spy)
@@ -184,6 +186,35 @@ describe("check", () => {
       }).not.toThrow()
     })
   })
+
+  describe("close", () => {
+    beforeEach(() => jest.useFakeTimers())
+    afterEach(() => {
+      jest.useRealTimers()
+      jest.restoreAllMocks()
+      component.unmount()
+    })
+
+    it("calls editor.on('Remove') when mounted", () => {
+      component = mount(<Checker getBody={() => node} editor={fakeEditor} />)
+      instance = component.instance()
+      instance.check() // open it
+      jest.runAllTimers()
+      expect(fakeEditor.on).toHaveBeenCalled()
+      expect(fakeEditor.on.mock.calls[0][0]).toEqual("Remove")
+    })
+
+    it("calls focus on the editor on closing the tray", () => {
+      component = mount(<Checker getBody={() => node} editor={fakeEditor} />)
+      instance = component.instance()
+      instance.check() // opens it
+      jest.runAllTimers()
+      const closeButton = document.querySelector("[data-mce-component] button")
+      closeButton.click()
+      jest.runAllTimers()
+      expect(instance.props.editor.focus).toHaveBeenCalled()
+    })
+  })
 })
 
 describe("setErrorIndex", () => {

src/components/checker.js

@@ -51,6 +51,12 @@ export default class Checker extends React.Component {
     additionalRules: []
   }
 
+  componentDidMount() {
+    this.props.editor.on("Remove", editor => {
+      this.setState({ open: false })
+    })
+  }
+
   setConfig(config) {
     this.setState({ config })
   }
@@ -285,6 +291,10 @@ export default class Checker extends React.Component {
     this.setState({ open: false })
   }
 
+  handleExited() {
+    this.props.editor.focus(false)
+  }
+
   render() {
     const rule = this.errorRule()
     const issueNumberMessage = formatMessage("Issue { num }/{ total }", {
@@ -295,9 +305,11 @@ export default class Checker extends React.Component {
     return (
       <LiveAnnouncer>
         <Tray
+          data-mce-component
           label={formatMessage("Accessibility Checker")}
           open={this.state.open}
           onDismiss={() => this.handleClose()}
+          onExited={() => this.handleExited()}
           placement="end"
           contentRef={e => (this.trayElement = e)}
         >