fix(core): a11y

- Handle key event on `drawer` & `accordion`

Author: Sukaato

packages/core/src/components/accordion/accordion.tsx

@@ -1,4 +1,5 @@
 import { Component, type ComponentInterface, Element, Host, Method, Prop, h } from '@stencil/core';
+import { ENTER, ESC, SPACE } from 'key-definitions';
 import { compareOptions } from '#utils/forms';
 import { hostContext } from '#utils/helpers';
 import { ChevronDown } from '../ChevronDown';
@@ -105,6 +106,19 @@ export class Accordion implements ComponentInterface {
     this.open = !this.open;
   };
 
+  private onKeyPress = (...keys: string[]) => {
+    return async (ev: KeyboardEvent) => {
+      ev.preventDefault();
+      if (!keys.includes(ev.key)) {
+        return;
+      }
+      if (ev.key === ESC.key) {
+        return this.hide();
+      }
+      return this.toggle();
+    };
+  };
+
   render() {
     const { host } = this;
 
@@ -117,6 +131,7 @@ export class Accordion implements ComponentInterface {
         <header
           class="accordion-title"
           onClick={this.onClick}
+          onKeyUp={this.onKeyPress(SPACE.key, ENTER.key, ESC.key)}
           part="header"
         >
           <div class="header-content">

packages/core/src/components/drawer/drawer.tsx

@@ -10,6 +10,7 @@ import {
   Watch,
   h,
 } from '@stencil/core';
+import { ESC } from 'key-definitions';
 import { componentConfig } from '#config';
 import { isRTL } from '#utils/dir';
 import type { OverlayInterface } from '#utils/overlay';
@@ -143,6 +144,17 @@ export class Drawer implements ComponentInterface, OverlayInterface {
     this.dismiss();
   };
 
+  private onKeyPress = (...keys: string[]) => {
+    return async (ev: KeyboardEvent) => {
+      ev.preventDefault();
+      if (!keys.includes(ev.key)) {
+        return;
+      }
+
+      return this.dismiss();
+    };
+  };
+
   render() {
     const { host } = this;
 
@@ -161,6 +173,7 @@ export class Drawer implements ComponentInterface, OverlayInterface {
           <div
             class="drawer-backdrop"
             onClick={this.onClick}
+            onKeyUp={this.onKeyPress(ESC.key)}
             part="backdrop"
           />
           <div