[Feat]: Add Accessibility Support

assets/index.less

@@ -122,6 +122,10 @@
       &:hover {
         background: fade(blue, 30%);
       }
+
+      &:focus {
+        border: 1px solid blue;
+      }
     }
 
     &-in-view {

docs/examples/basic.tsx

@@ -63,7 +63,7 @@ export default () => {
                 container: 'popup-c',
               },
             }}
-            open
+            open={false}
             styles={{
               popup: {
                 container: {

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,

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}

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

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>

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>

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>

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

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`,

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>

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>

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}