fix: handle esc key properly inside of the CloseButton (#6050)

src/js/close-button.js

@@ -3,6 +3,7 @@
  */
 import Button from './button';
 import Component from './component';
+import keycode from 'keycode';
 
 /**
  * The `CloseButton` is a `{@link Button}` that fires a `close` event when
@@ -63,6 +64,28 @@ class CloseButton extends Button {
      */
     this.trigger({type: 'close', bubbles: false});
   }
+  /**
+   * Event handler that is called when a `CloseButton` receives a
+   * `keydown` event.
+   *
+   * By default, if the key is Esc, it will trigger a `click` event.
+   *
+   * @param {EventTarget~Event} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // Esc button will trigger `click` event
+    if (keycode.isEventKey(event, 'Esc')) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.trigger('click');
+    } else {
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyDown(event);
+    }
+  }
 }
 
 Component.registerComponent('CloseButton', CloseButton);

test/unit/close-button.test.js

@@ -3,6 +3,12 @@ import CloseButton from '../../src/js/close-button';
 import sinon from 'sinon';
 import TestHelpers from './test-helpers';
 
+const getMockEscapeEvent = () => ({
+  which: 27,
+  preventDefault() {},
+  stopPropagation() {}
+});
+
 QUnit.module('CloseButton', {
 
   beforeEach() {
@@ -49,3 +55,12 @@ QUnit.test('should trigger an event on activation', function(assert) {
   assert.expect(1);
   assert.strictEqual(spy.callCount, 1, 'the "close" event was triggered');
 });
+
+QUnit.test('pressing ESC triggers close()', function(assert) {
+  const spy = sinon.spy();
+
+  this.btn.on('close', spy);
+  this.btn.handleKeyDown(getMockEscapeEvent());
+  assert.expect(1);
+  assert.strictEqual(spy.callCount, 1, 'ESC closed the modal');
+});