diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
index 08df6d48c..0a0e94aa2 100644
--- a/src/drawer/drawer.tsx
+++ b/src/drawer/drawer.tsx
@@ -88,6 +88,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
     },
     visible: {
       handler(val) {
+        if (val) {
+          (this.$refs.drawerContainer as HTMLDivElement).focus?.();
+        }
         this.handleScrollThrough(val);
       },
     },
@@ -112,6 +115,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
         style={{ zIndex: this.zIndex }}
         onkeydown={this.onKeyDown}
         v-transfer-dom={this.attach}
+        ref="drawerContainer"
+        tabindex={0}
       >
         {this.showOverlay && <div class={`${name}__mask`} onClick={this.handleWrapperClick} />}
         <div class={this.wrapperClasses} style={this.wrapperStyles}>
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index d17d87fe6..3d4063068 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -3263,7 +3263,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/popconfirm.v
   <div class="t-popup__reference">
     <div name="t-popup--animation" appear="true"></div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-danger"><span class="t-button__text">Danger</span></button>
   </div> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">Open Drawer</span></button>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">Drawer</div>
@@ -3711,7 +3711,7 @@ exports[`ssr snapshot test renders ./examples/divider/demos/vertical.vue correct
 exports[`ssr snapshot test renders ./examples/drawer/demos/attach-parent.vue correctly 1`] = `
 <div class="t-container">
   <div class="t-suf-container">
-    <div class="t-drawer t-drawer--right t-drawer--attach">
+    <div tabindex="0" class="t-drawer t-drawer--right t-drawer--attach">
       <div class="t-drawer__mask"></div>
       <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
         <div class="t-drawer__header">抽屉标题</div>
@@ -3738,7 +3738,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/attach-parent.vue cor
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/base.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
@@ -3758,7 +3758,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/base.vue correctly 1`
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">
@@ -3771,7 +3771,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly
       <div class="t-drawer__footer"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><span class="t-button__text">确定</span></button> <button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default"><span class="t-button__text">取消</span></button></div>
     </div>
   </div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
@@ -3784,7 +3784,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/custom.vue correctly
       </div>
     </div>
   </div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
@@ -3812,7 +3812,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/destroy.vue correctly
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/no-mask.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right t-drawer--without-mask">
+  <div tabindex="0" class="t-drawer t-drawer--right t-drawer--without-mask">
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
       <div class="t-drawer__close-btn"></div>
@@ -3829,7 +3829,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/no-mask.vue correctly
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
@@ -3855,7 +3855,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/operation.vue correct
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
@@ -3876,7 +3876,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correct
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/popup.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
@@ -3898,7 +3898,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/popup.vue correctly 1
 
 exports[`ssr snapshot test renders ./examples/drawer/demos/size.vue correctly 1`] = `
 <div>
-  <div class="t-drawer t-drawer--right">
+  <div tabindex="0" class="t-drawer t-drawer--right">
     <div class="t-drawer__mask"></div>
     <div class="t-drawer__content-wrapper t-drawer__content-wrapper--right" style="width:300px;height:;">
       <div class="t-drawer__header">抽屉标题</div>
diff --git a/test/unit/drawer/__snapshots__/demo.test.js.snap b/test/unit/drawer/__snapshots__/demo.test.js.snap
index a9b50a208..260afcc1b 100644
--- a/test/unit/drawer/__snapshots__/demo.test.js.snap
+++ b/test/unit/drawer/__snapshots__/demo.test.js.snap
@@ -9,6 +9,7 @@ exports[`Drawer Demo CurrentDOMModeUsageExample wroks fine 1`] = `
   >
     <div
       class="t-drawer t-drawer--right t-drawer--attach"
+      tabindex="0"
     >
       <div
         class="t-drawer__mask"
@@ -222,6 +223,7 @@ exports[`Drawer Demo CustomUsageExample wroks fine 1`] = `
 <div>
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"
@@ -277,6 +279,7 @@ exports[`Drawer Demo CustomUsageExample wroks fine 1`] = `
    
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"
@@ -331,6 +334,7 @@ exports[`Drawer Demo CustomUsageExample wroks fine 1`] = `
    
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"
@@ -429,6 +433,7 @@ exports[`Drawer Demo NoMaskUsageExample wroks fine 1`] = `
 <div>
   <div
     class="t-drawer t-drawer--right t-drawer--without-mask"
+    tabindex="0"
   >
     <div
       class="t-drawer__content-wrapper t-drawer__content-wrapper--right"
@@ -497,6 +502,7 @@ exports[`Drawer Demo PlacementUsageExample wroks fine 1`] = `
 <div>
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"
@@ -720,6 +726,7 @@ exports[`Drawer Demo SizeUsageExample wroks fine 1`] = `
 <div>
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"
@@ -930,6 +937,7 @@ exports[`Drawer Demo operation wroks fine 1`] = `
 <div>
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"
@@ -1051,6 +1059,7 @@ exports[`Drawer base demo works fine 1`] = `
 <div>
   <div
     class="t-drawer t-drawer--right"
+    tabindex="0"
   >
     <div
       class="t-drawer__mask"