diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index 8c6e1ed68..d6815fe6b 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -63,7 +63,7 @@ export default () => {
                 container: 'popup-c',
               },
             }}
-            open
+            open={false}
             styles={{
               popup: {
                 container: {
diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx
index df2a86a81..64fbf9d85 100644
--- a/src/PickerInput/SinglePicker.tsx
+++ b/src/PickerInput/SinglePicker.tsx
@@ -16,7 +16,7 @@ import type {
   SharedTimeProps,
   ValueDate,
 } from '../interface';
-import PickerTrigger from '../PickerTrigger';
+import PickerTrigger, { RefTriggerProps } from '../PickerTrigger';
 import { pickTriggerProps } from '../PickerTrigger/util';
 import { toArray } from '../utils/miscUtil';
 import PickerContext from './context';
@@ -195,6 +195,7 @@ function Picker<DateType extends object = any>(
 
   // ========================= Refs =========================
   const selectorRef = usePickerRef(ref);
+  const triggerRef = React.useRef<RefTriggerProps>(null);
 
   // ========================= Util =========================
   function pickerParam<T>(values: T | T[]) {
@@ -579,8 +580,22 @@ function Picker<DateType extends object = any>(
   };
 
   const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event, preventDefault) => {
-    if (event.key === 'Tab') {
+    if (event.key === 'Enter') {
+      triggerOpen(true);
+
+      return;
+    }
+
+    if (event.key === 'Esc') {
       triggerConfirm();
+
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      if (mergedOpen) {
+        // event.preventDefault();
+      }
     }
 
     onKeyDown?.(event, preventDefault);
@@ -645,6 +660,7 @@ function Picker<DateType extends object = any>(
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
+        ref={triggerRef}
       >
         <SingleSelector
           // Shared
diff --git a/src/PickerPanel/DatePanel/index.tsx b/src/PickerPanel/DatePanel/index.tsx
index 42013ebff..2c010e968 100644
--- a/src/PickerPanel/DatePanel/index.tsx
+++ b/src/PickerPanel/DatePanel/index.tsx
@@ -215,6 +215,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
           getCellClassName={getCellClassName}
           prefixColumn={prefixColumn}
           cellSelection={!isWeek}
+          onChange={onPickerValueChange}
         />
       </div>
     </PanelContext.Provider>
diff --git a/src/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx
index 34b6fe011..07d2cf6ea 100644
--- a/src/PickerPanel/PanelBody.tsx
+++ b/src/PickerPanel/PanelBody.tsx
@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import * as React from 'react';
 import type { DisabledDate } from '../interface';
-import { formatValue, isInRange, isSame } from '../utils/dateUtil';
+import { formatValue, isInRange, isSame, isSameMonth } from '../utils/dateUtil';
 import { PickerHackContext, usePanelContext } from './context';
+import { offsetPanelDate } from '@/PickerInput/hooks/useRangePickerValue';
 
 export interface PanelBodyProps<DateType = any> {
   rowNum: number;
@@ -25,6 +26,7 @@ export interface PanelBodyProps<DateType = any> {
   prefixColumn?: (date: DateType) => React.ReactNode;
   rowClassName?: (date: DateType) => string;
   cellSelection?: boolean;
+  onChange?: (date: DateType) => void;
 }
 
 export default function PanelBody<DateType extends object = any>(props: PanelBodyProps<DateType>) {
@@ -41,6 +43,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
     headerCells,
     cellSelection = true,
     disabledDate,
+    onChange,
   } = props;
 
   const {
@@ -64,6 +67,10 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
 
   const cellPrefixCls = `${prefixCls}-cell`;
 
+  const [focusDateTime, setFocusDateTime] = React.useState(values?.[values.length - 1] ?? now);
+
+  const cellRefs = React.useRef<Record<string, HTMLDivElement | null>>({});
+
   // ============================= Context ==============================
   const { onCellDblClick } = React.useContext(PickerHackContext);
 
@@ -73,6 +80,81 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
       (singleValue) => singleValue && isSame(generateConfig, locale, date, singleValue, type),
     );
 
+  // ============================== Event Handlers ===============================
+
+  const moveFocus = (offset: number) => {
+    const nextDate = generateConfig.addDate(focusDateTime, offset);
+    setFocusDateTime(nextDate);
+
+    const focusElement =
+      cellRefs.current[
+        formatValue(nextDate, {
+          locale,
+          format: 'YYYY-MM-DD',
+          generateConfig,
+        })
+      ];
+    if (focusElement) {
+      requestAnimationFrame(() => {
+        focusElement.focus();
+      });
+    }
+
+    if (type && !isSame(generateConfig, locale, focusDateTime, nextDate, type)) {
+      return onChange?.(nextDate);
+    }
+  };
+
+  const onKeyDown = React.useCallback(
+    (event) => {
+      switch (event.key) {
+        case 'ArrowRight':
+          moveFocus(1);
+          break;
+        case 'ArrowLeft':
+          moveFocus(-1);
+          break;
+        case 'ArrowDown':
+          moveFocus(7);
+          break;
+        case 'ArrowUp':
+          moveFocus(-7);
+          break;
+        case 'Enter':
+          onSelect(focusDateTime);
+          break;
+
+        case 'Esc':
+          break;
+
+        case 'Tab':
+          onChange?.(focusDateTime);
+
+        default:
+          return;
+      }
+
+      event.preventDefault();
+    },
+    [focusDateTime, generateConfig, onSelect],
+  );
+
+  React.useEffect(() => {
+    const focusElement =
+      cellRefs.current[
+        formatValue(focusDateTime, {
+          locale,
+          format: 'YYYY-MM-DD',
+          generateConfig,
+        })
+      ];
+    if (focusElement) {
+      requestAnimationFrame(() => {
+        focusElement.focus();
+      });
+    }
+  }, []);
+
   // =============================== Body ===============================
   const rows: React.ReactNode[] = [];
 
@@ -118,8 +200,27 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
           })
         : undefined;
 
+      const isCurrentDateFocused = isSame(generateConfig, locale, currentDate, focusDateTime, type);
+
       // Render
-      const inner = <div className={`${cellPrefixCls}-inner`}>{getCellText(currentDate)}</div>;
+      const inner = (
+        <div
+          tabIndex={isCurrentDateFocused ? 0 : -1}
+          onKeyDown={onKeyDown}
+          className={`${cellPrefixCls}-inner`}
+          ref={(element) => {
+            cellRefs.current[
+              formatValue(currentDate, {
+                locale,
+                format: 'YYYY-MM-DD',
+                generateConfig,
+              })
+            ] = element;
+          }}
+        >
+          {getCellText(currentDate)}
+        </div>
+      );
 
       rowNode.push(
         <td
diff --git a/src/PickerPanel/PanelHeader.tsx b/src/PickerPanel/PanelHeader.tsx
index 407489a59..1a00b0d07 100644
--- a/src/PickerPanel/PanelHeader.tsx
+++ b/src/PickerPanel/PanelHeader.tsx
@@ -126,7 +126,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           type="button"
           aria-label={locale.previousYear}
           onClick={() => onSuperOffset(-1)}
-          tabIndex={-1}
+          tabIndex={0}
           className={clsx(
             superPrevBtnCls,
             disabledSuperOffsetPrev && `${superPrevBtnCls}-disabled`,
@@ -142,7 +142,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           type="button"
           aria-label={locale.previousMonth}
           onClick={() => onOffset(-1)}
-          tabIndex={-1}
+          tabIndex={0}
           className={clsx(prevBtnCls, disabledOffsetPrev && `${prevBtnCls}-disabled`)}
           disabled={disabledOffsetPrev}
           style={hidePrev ? HIDDEN_STYLE : {}}
@@ -156,7 +156,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           type="button"
           aria-label={locale.nextMonth}
           onClick={() => onOffset(1)}
-          tabIndex={-1}
+          tabIndex={0}
           className={clsx(nextBtnCls, disabledOffsetNext && `${nextBtnCls}-disabled`)}
           disabled={disabledOffsetNext}
           style={hideNext ? HIDDEN_STYLE : {}}
@@ -169,7 +169,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           type="button"
           aria-label={locale.nextYear}
           onClick={() => onSuperOffset(1)}
-          tabIndex={-1}
+          tabIndex={0}
           className={clsx(
             superNextBtnCls,
             disabledSuperOffsetNext && `${superNextBtnCls}-disabled`,
diff --git a/src/PickerPanel/index.tsx b/src/PickerPanel/index.tsx
index 1e44948ed..edac08440 100644
--- a/src/PickerPanel/index.tsx
+++ b/src/PickerPanel/index.tsx
@@ -423,8 +423,9 @@ function PickerPanel<DateType extends object = any>(
       <PickerHackContext.Provider value={pickerPanelContext}>
         <div
           ref={rootRef}
-          tabIndex={tabIndex}
           className={clsx(panelCls, { [`${panelCls}-rtl`]: direction === 'rtl' })}
+          role="dialog"
+          aria-modal
         >
           <PanelComponent
             {...panelProps}
diff --git a/src/PickerTrigger/index.tsx b/src/PickerTrigger/index.tsx
index 1bb260d11..3c1212b1b 100644
--- a/src/PickerTrigger/index.tsx
+++ b/src/PickerTrigger/index.tsx
@@ -1,9 +1,10 @@
-import Trigger from '@rc-component/trigger';
+import Trigger, { type TriggerRef } from '@rc-component/trigger';
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import { getRealPlacement } from '../utils/uiUtil';
 import PickerContext from '../PickerInput/context';
+import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
 
 const BUILT_IN_PLACEMENTS = {
   bottomLeft: {
@@ -60,30 +61,46 @@ export type PickerTriggerProps = {
   onClose: () => void;
 };
 
-function PickerTrigger({
-  popupElement,
-  popupStyle,
-  popupClassName,
-  popupAlign,
-  transitionName,
-  getPopupContainer,
-  children,
-  range,
-  placement,
-  builtinPlacements = BUILT_IN_PLACEMENTS,
-  direction,
+export type RefTriggerProps = { getPopupElement: () => HTMLDivElement | undefined };
+
+function PickerTrigger(props: PickerTriggerProps, ref: React.ForwardedRef<RefTriggerProps>) {
+  const {
+    popupElement,
+    popupStyle,
+    popupClassName,
+    popupAlign,
+    transitionName,
+    getPopupContainer,
+    children,
+    range,
+    placement,
+    builtinPlacements = BUILT_IN_PLACEMENTS,
+    direction,
+
+    // Visible
+    visible,
+    onClose,
+  } = props;
 
-  // Visible
-  visible,
-  onClose,
-}: PickerTriggerProps) {
   const { prefixCls } = React.useContext(PickerContext);
   const dropdownPrefixCls = `${prefixCls}-dropdown`;
 
   const realPlacement = getRealPlacement(placement, direction === 'rtl');
 
+  // ======================= Ref =======================
+  const triggerPopupRef = React.useRef<TriggerRef>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    getPopupElement: () => triggerPopupRef.current?.popupElement,
+  }));
+
+  console.log('visible', visible);
+
+  useLockFocus(visible, () => triggerPopupRef.current?.popupElement ?? null);
+
   return (
     <Trigger
+      ref={triggerPopupRef}
       showAction={[]}
       hideAction={['click']}
       popupPlacement={realPlacement}
@@ -111,4 +128,6 @@ function PickerTrigger({
   );
 }
 
-export default PickerTrigger;
+const RefPickerTrigger = React.forwardRef<RefTriggerProps, PickerTriggerProps>(PickerTrigger);
+
+export default RefPickerTrigger;