feat(components): [el-dialog] enhancement for dialog a11y (#6087)

* feat(components): [el-dialog] enhancement for dialog a11y

- Refactor dialog to script setup

* Separates dialog and its content into different components

* Remove unused code & fix a potential bug in focus-trap component

* Update dialog-content.vue

Co-authored-by: bqy <1743369777@qq.com>

docs/en-US/component/dialog.md

@@ -23,6 +23,22 @@ dialog/basic-usage
 
 :::
 
+## Focus trapping
+
+Dialog traps focus inside the dialog content which enables your users to navigate the content via keyboard.
+
+:::tip
+
+Focusing on other element after the dialog is closed will only work when `destroy-on-close` is enabled
+
+:::
+
+:::demo
+
+dialog/focus-trapping
+
+:::
+
 ## Customizations
 
 The content of Dialog can be anything, even a table or a form. This example shows how to use Element Plus Table and Form with Dialog。
@@ -118,9 +134,11 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 
 ## Events
 
-| Event Name | Description                                     | Parameters |
-| ---------- | ----------------------------------------------- | ---------- |
-| open       | triggers when the Dialog opens                  | —          |
-| opened     | triggers when the Dialog opening animation ends | —          |
-| close      | triggers when the Dialog closes                 | —          |
-| closed     | triggers when the Dialog closing animation ends | —          |
+| Event Name       | Description                                      | Parameters |
+| ---------------- | ------------------------------------------------ | ---------- |
+| open             | triggers when the Dialog opens                   | —          |
+| opened           | triggers when the Dialog opening animation ends  | —          |
+| close            | triggers when the Dialog closes                  | —          |
+| closed           | triggers when the Dialog closing animation ends  | —          |
+| open-auto-focus  | triggers after Dialog opens and content focused  | —          |
+| close-auto-focus | triggers after Dialog closed and content focused | —          |

docs/examples/dialog/focus-trapping.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-button type="text" @click="dialogVisible = true"
+    >click to open the Dialog</el-button
+  >
+
+  <div>
+    <p>Close dialog and the input will be focused</p>
+    <el-input ref="inputRef" placeholder="Please input" />
+  </div>
+
+  <el-dialog
+    v-model="dialogVisible"
+    destroy-on-close
+    title="Tips"
+    width="30%"
+    @close-auto-focus="handleCloseAutoFocus"
+  >
+    <span>This is a message</span>
+    <el-divider />
+    <el-input placeholder="Initially focused" />
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >Confirm</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { ElInput } from 'element-plus'
+
+const dialogVisible = ref(false)
+const inputRef = ref<InstanceType<typeof ElInput>>()
+
+const handleCloseAutoFocus = () => {
+  inputRef.value?.focus()
+}
+</script>
+<style scoped>
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+</style>