Move keydown handler for sl-drawer back to base div (#1459)

* Move keydown handler for sl-drawer back to base div

This restores the stacking behaviour of drawers

See: #1457

* Autofocus panel of sl-drawer when it is open on firstUpdate

src/components/drawer/drawer.ts

@@ -120,6 +120,10 @@ export default class SlDrawer extends ShoelaceElement {
         lockBodyScrolling(this);
       }
     }
+    // If there is an autofocus element, let it take focuse normally, otherwise focus the panel.
+    if (!this.querySelector('[autofocus]')) {
+      this.panel.focus({ preventScroll: true });
+    }
   }
 
   disconnectedCallback() {
@@ -143,14 +147,14 @@ export default class SlDrawer extends ShoelaceElement {
   }
 
   private addOpenListeners() {
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    this.drawer.addEventListener('keydown', this.handleKeyDown);
   }
 
   private removeOpenListeners() {
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    this.drawer.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+  private handleKeyDown = (event: KeyboardEvent) => {
     if (this.open && !this.contained && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
@@ -307,6 +311,7 @@ export default class SlDrawer extends ShoelaceElement {
           'drawer--rtl': this.localize.dir() === 'rtl',
           'drawer--has-footer': this.hasSlotController.test('footer')
         })}
+        @keydown=${this.handleKeyDown}
       >
         <div part="overlay" class="drawer__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>