feat(Dialog): support keyboard events (#10359)

* feat(dialog): keyboard events are supported

* chore: prevention interruption

* chore: add the corresponding event

src/dialog/Dialog.js

@@ -1,4 +1,4 @@
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, noop } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import Button from '../button';
@@ -97,12 +97,37 @@ export default createComponent({
 
     onOpened() {
       this.$emit('opened');
+
+      this.$nextTick(() => {
+        this.$refs.dialog?.focus();
+      });
     },
 
     onClosed() {
       this.$emit('closed');
     },
 
+    onKeydown(event) {
+      if (event.key === 'Escape' || event.key === 'Enter') {
+        // skip keyboard events of child elements
+        if (event.target !== this.$refs.dialog) {
+          return;
+        }
+
+        const onEventType = {
+          Enter: this.showConfirmButton
+            ? () => this.handleAction('confirm')
+            : noop,
+          Escape: this.showCancelButton
+            ? () => this.handleAction('cancel')
+            : noop,
+        };
+
+        onEventType[event.key]();
+        this.$emit('keydown', event);
+      }
+    },
+
     genRoundButtons() {
       return (
         <GoodsAction class={bem('footer')}>
@@ -221,6 +246,9 @@ export default createComponent({
           aria-labelledby={this.title || message}
           class={[bem([this.theme]), this.className]}
           style={{ width: addUnit(this.width) }}
+          ref="dialog"
+          tabIndex={0}
+          onKeydown={this.onKeydown}
         >
           {Title}
           {this.genContent(title, messageSlot)}

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
+    <div role="dialog" aria-labelledby="标题" tabindex="0" class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img01.yzcdn.cn/vant/apple-3.jpg"></div>
       <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">

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

@@ -3,7 +3,7 @@
 exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;text&lt;/span&gt;</div>`;
 
 exports[`button color 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
+<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
   <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
       <div class="van-button__content"><span class="van-button__text">取消</span></div>
     </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
@@ -13,7 +13,7 @@ exports[`button color 1`] = `
 `;
 
 exports[`button text 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
+<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
   <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
       <div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
     </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
@@ -23,7 +23,7 @@ exports[`button text 1`] = `
 `;
 
 exports[`default slot 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
+<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
   <div class="van-dialog__content">Custom Message</div>
   <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
       <div class="van-button__content"><span class="van-button__text">确认</span></div>
@@ -32,7 +32,7 @@ exports[`default slot 1`] = `
 `;
 
 exports[`title slot 1`] = `
-<div role="dialog" class="van-dialog" name="van-dialog-bounce">
+<div role="dialog" tabindex="0" class="van-dialog" name="van-dialog-bounce">
   <div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
   <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
       <div class="van-button__content"><span class="van-button__text">确认</span></div>