Drawer cannot be reopened after closing with escape

[schneisn]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

When having the following component, the close event listener of the drawer is not triggered because the focus of the activeElement is not on the drawer, but on the body element.
That also leads to the drawer being closed but it cannot be opened anymore.

<script setup lang="ts">
import { DBButton, DBDrawer } from '@db-ux/v-core-components';
import { ref } from 'vue';

const isButtonVisible = ref(true);

const onClose = () => {
  alert('CLOSE DRAWER');
};
</script>

<template>
  <DBDrawer :open="true" direction="down" width="auto" @close="onClose">
    <template #drawer-header>
      <span>TEST</span>
    </template>
    <div class="nemo-drawer-content">
      <DBButton v-if="isButtonVisible" @click="isButtonVisible = false"> A button </DBButton>
    </div>
  </DBDrawer>
</template>

Steps to reproduce:

1. When the drawer is open, press the escape key. The close event listener is triggered and an alert is displayed (That is the correct behavior).
2. Close the alert.
3. Click on the button with the text "A button". The button disappears which leads to the focus of the active element being on the body, not the drawer anymore.

4. Press the escape key. The close event listener and the onClose method is not called because the activeElement is the html body Element, not the Drawer. The drawer is closed but cannot be opened anymore.

Potentially related to #3412

Expected Behaviour

The focus should always stay in the drawer as long as the drawer is open and the close event listener is triggered when pressing the escape key.

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response