diff --git a/assets/index.less b/assets/index.less
index d5db8413b..739162b4a 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -122,6 +122,10 @@
       &:hover {
         background: fade(blue, 30%);
       }
+
+      &:focus {
+        border: 1px solid blue;
+      }
     }
 
     &-in-view {
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/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
index f02810390..4264985c0 100644
--- a/src/PickerInput/Popup/index.tsx
+++ b/src/PickerInput/Popup/index.tsx
@@ -45,6 +45,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   onOk: VoidFunction;
 
   onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onPanelKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 
   classNames?: SharedPickerProps['classNames'];
   styles?: SharedPickerProps['styles'];
@@ -71,6 +72,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     onFocus,
     onBlur,
     onPanelMouseDown,
+    onPanelKeyDown,
 
     // Direction
     direction,
@@ -217,6 +219,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   let renderNode = (
     <div
       onMouseDown={onPanelMouseDown}
+      onKeyDown={onPanelKeyDown}
       tabIndex={-1}
       className={clsx(
         containerPrefixCls,
diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx
index 4daadcae0..a274275f3 100644
--- a/src/PickerInput/RangePicker.tsx
+++ b/src/PickerInput/RangePicker.tsx
@@ -37,6 +37,7 @@ import useShowNow from './hooks/useShowNow';
 import Popup, { type PopupShowTimeConfig } from './Popup';
 import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector';
 import useSemantic from '../hooks/useSemantic';
+import raf from '@rc-component/util/lib/raf';
 
 function separateConfig<T>(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] {
   const singleConfig = config ?? defaultConfig;
@@ -526,6 +527,15 @@ function RangePicker<DateType extends object = any>(
     lastOperation('panel');
   };
 
+  const onPanelKeyDown = useEvent((event: React.KeyboardEvent) => {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      triggerOpen(false, { force: true });
+      raf(() => {
+        selectorRef.current?.focus();
+      });
+    }
+  });
+
   // >>> Calendar
   const onPanelSelect: PickerPanelProps<DateType>['onChange'] = (date: DateType) => {
     const clone: RangeValueType<DateType> = fillIndex(calendarValue, activeIndex, date);
@@ -597,6 +607,7 @@ function RangePicker<DateType extends object = any>(
       onFocus={onPanelFocus}
       onBlur={onSharedBlur}
       onPanelMouseDown={onPanelMouseDown}
+      onPanelKeyDown={onPanelKeyDown}
       // Mode
       picker={picker}
       mode={mergedMode}
diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx
index df2a86a81..dad7934ed 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';
@@ -33,6 +33,7 @@ import useShowNow from './hooks/useShowNow';
 import Popup from './Popup';
 import SingleSelector from './Selector/SingleSelector';
 import useSemantic from '../hooks/useSemantic';
+import raf from '@rc-component/util/lib/raf';
 
 // TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop
 
@@ -195,6 +196,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[]) {
@@ -476,6 +478,15 @@ function Picker<DateType extends object = any>(
     triggerOpen(false);
   };
 
+  const onPanelKeyDown = useEvent((event: React.KeyboardEvent) => {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      triggerOpen(false, { force: true });
+      raf(() => {
+        selectorRef.current?.focus();
+      });
+    }
+  });
+
   // >>> cellRender
   const onInternalCellRender = useCellRender(cellRender, dateRender, monthCellRender);
 
@@ -531,6 +542,7 @@ function Picker<DateType extends object = any>(
       onHover={onPanelHover}
       // Submit
       needConfirm={needConfirm}
+      onPanelKeyDown={onPanelKeyDown}
       onSubmit={triggerConfirm}
       onOk={triggerOk}
       // Preset
@@ -579,10 +591,13 @@ function Picker<DateType extends object = any>(
   };
 
   const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event, preventDefault) => {
-    if (event.key === 'Tab') {
-      triggerConfirm();
-    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      triggerOpen(true);
 
+      return;
+    }
     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/DecadePanel/index.tsx b/src/PickerPanel/DecadePanel/index.tsx
index 748015d9f..c83abd4ca 100644
--- a/src/PickerPanel/DecadePanel/index.tsx
+++ b/src/PickerPanel/DecadePanel/index.tsx
@@ -117,6 +117,7 @@ export default function DecadePanel<DateType extends object = any>(
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          onChange={onPickerValueChange}
         />
       </div>
     </PanelContext.Provider>
diff --git a/src/PickerPanel/MonthPanel/index.tsx b/src/PickerPanel/MonthPanel/index.tsx
index cfd22079f..190320f14 100644
--- a/src/PickerPanel/MonthPanel/index.tsx
+++ b/src/PickerPanel/MonthPanel/index.tsx
@@ -113,6 +113,7 @@ export default function MonthPanel<DateType extends object = any>(
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          onChange={onPickerValueChange}
         />
       </div>
     </PanelContext.Provider>
diff --git a/src/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx
index 34b6fe011..c0e0c845e 100644
--- a/src/PickerPanel/PanelBody.tsx
+++ b/src/PickerPanel/PanelBody.tsx
@@ -1,8 +1,10 @@
 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';
+import { useEvent } from '@rc-component/util';
 
 export interface PanelBodyProps<DateType = any> {
   rowNum: number;
@@ -25,6 +27,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 +44,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
     headerCells,
     cellSelection = true,
     disabledDate,
+    onChange,
   } = props;
 
   const {
@@ -64,6 +68,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 +81,56 @@ 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 = useEvent((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 'Tab':
+        onChange?.(focusDateTime);
+
+      default:
+        return;
+    }
+  });
+
   // =============================== Body ===============================
   const rows: React.ReactNode[] = [];
 
@@ -118,8 +176,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/QuarterPanel/index.tsx b/src/PickerPanel/QuarterPanel/index.tsx
index 86542087a..8cd26aa83 100644
--- a/src/PickerPanel/QuarterPanel/index.tsx
+++ b/src/PickerPanel/QuarterPanel/index.tsx
@@ -80,6 +80,7 @@ export default function QuarterPanel<DateType extends object = any>(
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          onChange={onPickerValueChange}
         />
       </div>
     </PanelContext.Provider>
diff --git a/src/PickerPanel/YearPanel/index.tsx b/src/PickerPanel/YearPanel/index.tsx
index ae7e42811..f72681035 100644
--- a/src/PickerPanel/YearPanel/index.tsx
+++ b/src/PickerPanel/YearPanel/index.tsx
@@ -125,6 +125,7 @@ export default function YearPanel<DateType extends object = any>(
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          onChange={onPickerValueChange}
         />
       </div>
     </PanelContext.Provider>
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;