chore: support autoFocus

Author: zombieJ

docs/examples/assets/motion.less

@@ -1,4 +1,4 @@
-@duration: 0.3s;
+@duration: 3s;
 
 .mask-motion {
   &-enter,

src/DrawerPanel.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import type { Placement } from './Drawer';
+import KeyCode from 'rc-util/lib/KeyCode';
+
+export interface DrawerPanelRef {
+  focus: VoidFunction;
+}
 
 export interface DrawerPanelProps {
   prefixCls: string;
@@ -11,18 +16,88 @@ export interface DrawerPanelProps {
   children?: React.ReactNode;
 }
 
-export default function DrawerPanel(props: DrawerPanelProps) {
-  const { prefixCls, className, style, placement, width, children } = props;
-
-  return (
-    <div
-      className={classNames(`${prefixCls}-panel`, className)}
-      style={{
-        width: placement === 'left' || placement === 'right' ? width : '100%',
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
+const sentinelStyle: React.CSSProperties = {
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  outline: 'none',
+  position: 'absolute',
+};
+
+const DrawerPanel = React.forwardRef<DrawerPanelRef, DrawerPanelProps>(
+  (props, ref) => {
+    const { prefixCls, className, style, placement, width, children } = props;
+
+    // ================================ Refs ================================
+    const panelRef = React.useRef<HTMLDivElement>();
+    const sentinelStartRef = React.useRef<HTMLDivElement>();
+    const sentinelEndRef = React.useRef<HTMLDivElement>();
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => {
+        Promise.resolve().then(() => {
+          sentinelStartRef.current?.focus({ preventScroll: true });
+        });
+      },
+    }));
+
+    const onPanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = ({
+      keyCode,
+      shiftKey,
+    }) => {
+      switch (keyCode) {
+        case KeyCode.TAB: {
+          if (!shiftKey && document.activeElement === sentinelEndRef.current) {
+            sentinelStartRef.current?.focus({ preventScroll: true });
+          } else if (
+            shiftKey &&
+            document.activeElement === sentinelStartRef.current
+          ) {
+            sentinelEndRef.current?.focus({ preventScroll: true });
+          }
+        }
+      }
+    };
+
+    // =============================== Render ===============================
+    return (
+      <>
+        <div
+          className={classNames(`${prefixCls}-panel`, className)}
+          style={{
+            width:
+              placement === 'left' || placement === 'right' ? width : '100%',
+            ...style,
+          }}
+          aria-modal="true"
+          role="dialog"
+          tabIndex={-1}
+          ref={panelRef}
+          onKeyDown={onPanelKeyDown}
+        >
+          <div
+            tabIndex={0}
+            ref={sentinelStartRef}
+            style={sentinelStyle}
+            aria-hidden="true"
+          />
+
+          {children}
+
+          <div
+            tabIndex={0}
+            ref={sentinelEndRef}
+            style={sentinelStyle}
+            aria-hidden="true"
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+if (process.env.NODE_ENV === 'development') {
+  DrawerPanel.displayName = 'DrawerPanel';
 }
+
+export default DrawerPanel;

src/DrawerPopup.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import type { CSSMotionProps } from 'rc-motion';
+import type { DrawerPanelRef } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
 import DrawerContext from './context';
@@ -16,6 +17,7 @@ export interface DrawerPopupProps {
   inline?: boolean;
   push?: { distance?: number | string };
   forceRender?: boolean;
+  autoFocus?: boolean;
 
   // MISC
   scrollLocker?: ScrollLocker;
@@ -53,6 +55,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     inline,
     push,
     forceRender,
+    autoFocus = true,
 
     // MISC
     scrollLocker,
@@ -101,6 +104,8 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   );
 
   // ========================= ScrollLock =========================
+  const panelRef = React.useRef<DrawerPanelRef>();
+
   React.useEffect(() => {
     if (open) {
       scrollLocker?.lock();
@@ -110,6 +115,13 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     }
   }, [open]);
 
+  // Auto Focus
+  React.useEffect(() => {
+    if (open && autoFocus) {
+      panelRef.current?.focus();
+    }
+  }, [open, autoFocus]);
+
   React.useEffect(
     () => () => {
       scrollLocker?.unLock();
@@ -167,6 +179,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
         {({ className: motionClassName, style: motionStyle }) => {
           return (
             <DrawerPanel
+              ref={panelRef}
               prefixCls={prefixCls}
               className={classNames(className, motionClassName)}
               style={{