feat(Dialog): support enter/esc keyboard event (#10261)

* feat(dialog): the enter/esc keyboard event is supported

* fix(dialog): the corresponding method is not executed when there is no button

* chore(dialog): simplify implementation

* fix: the wrong judgment

packages/vant/src/dialog/Dialog.tsx

@@ -3,6 +3,7 @@ import {
   defineComponent,
   type PropType,
   type ExtractPropTypes,
+  withKeys,
 } from 'vue';
 
 // Utils
@@ -71,7 +72,7 @@ export default defineComponent({
 
   props: dialogProps,
 
-  emits: ['confirm', 'cancel', 'update:show'],
+  emits: ['confirm', 'cancel', 'update:show', 'keydown'],
 
   setup(props, { emit, slots }) {
     const loading = reactive({
@@ -113,6 +114,19 @@ export default defineComponent({
 
     const onCancel = getActionHandler('cancel');
     const onConfirm = getActionHandler('confirm');
+    const onKeydown = withKeys(
+      (event: KeyboardEvent) => {
+        const onEventType: Record<string, () => void> = {
+          Enter: props.showConfirmButton ? onConfirm : () => {},
+          Escape: props.showCancelButton ? onCancel : () => {},
+        };
+
+        onEventType[event.key]();
+
+        emit('keydown', event);
+      },
+      ['enter', 'esc']
+    );
 
     const renderTitle = () => {
       const title = slots.title ? slots.title() : props.title;
@@ -229,6 +243,8 @@ export default defineComponent({
       const { width, title, theme, message, className } = props;
       return (
         <Popup
+          tabindex={0}
+          onKeydown={onKeydown}
           role="dialog"
           class={[bem([theme]), className]}
           style={{ width: addUnit(width) }}

packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap

@@ -96,6 +96,7 @@ exports[`should render demo and match snapshot 1`] = `
   </transition-stub>
   <transition-stub>
     <div class="van-popup van-popup--center van-dialog"
+         tabindex="0"
          role="dialog"
          aria-labelledby="Title"
          style="display: none;"

packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap

@@ -31,6 +31,7 @@ exports[`should render default slot correctly 1`] = `
 
 exports[`should render footer slot correctly 1`] = `
 <div class="van-popup van-popup--center van-dialog"
+     tabindex="0"
      role="dialog"
      aria-labelledby="message"
 >

packages/vant/src/popup/Popup.tsx

@@ -3,6 +3,7 @@ import {
   watch,
   provide,
   Teleport,
+  nextTick,
   computed,
   onMounted,
   Transition,
@@ -68,6 +69,7 @@ export default defineComponent({
     'close',
     'opened',
     'closed',
+    'keydown',
     'update:show',
     'click-overlay',
     'click-close-icon',
@@ -172,11 +174,14 @@ export default defineComponent({
 
     const onOpened = () => emit('opened');
     const onClosed = () => emit('closed');
+    const onKeydown = (event: KeyboardEvent) => emit('keydown', event);
 
     const renderPopup = lazyRender(() => {
       const { round, position, safeAreaInsetBottom } = props;
+
       return (
         <div
+          onKeydown={onKeydown}
           v-show={props.show}
           ref={popupRef}
           style={style.value}
@@ -216,6 +221,11 @@ export default defineComponent({
       (show) => {
         if (show && !opened) {
           open();
+
+          attrs.tabindex === 0 &&
+            nextTick(() => {
+              popupRef.value?.focus();
+            });
         }
         if (!show && opened) {
           opened = false;