feat(elements): close drawer when pressing Escape

Related to #3370
stryker-mutator · Aug 20, 2024 · 6db2ee7 · 6db2ee7
1 parent 811f49e
commit 6db2ee7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/elements/src/components/drawer/drawer.component.ts b/packages/elements/src/components/drawer/drawer.component.ts
@@ -63,6 +63,22 @@ export class MutationTestReportDrawer extends LitElement {
     event.stopImmediatePropagation();
   };
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener('keydown', this.#handleKeyDown);
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener('keydown', this.#handleKeyDown);
+    super.disconnectedCallback();
+  }
+
+  #handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.mode = 'closed';
+    }
+  };
+
   render() {
     const contentHeight = this.#contentHeightController.value;
     const styles = styleMap({ height: contentHeight ? `${contentHeight}px` : undefined });

diff --git a/packages/elements/test/unit/components/drawer.component.spec.ts b/packages/elements/test/unit/components/drawer.component.spec.ts
@@ -1,5 +1,6 @@
 import { MutationTestReportDrawer } from '../../../src/components/drawer/drawer.component.js';
 import { CustomElementFixture } from '../helpers/CustomElementFixture.js';
+import { userEvent } from '@vitest/browser/context';
 
 describe(MutationTestReportDrawer.name, () => {
   let sut: CustomElementFixture<MutationTestReportDrawer>;
@@ -72,6 +73,16 @@ describe(MutationTestReportDrawer.name, () => {
       const event = await sut.catchNativeEvent('click', () => sut.$<HTMLElement>('header').click());
       expect(event).undefined;
     });
+
+    it('should close when escape is pressed', async () => {
+      sut.element.mode = 'open';
+      await sut.whenStable();
+
+      await userEvent.keyboard('{Escape}');
+      await sut.whenStable();
+
+      expect(sut.element).toHaveProperty('mode', 'closed');
+    });
   });
 
   function readMoreToggle(): HTMLElement {