feat: Improve Date panel keyboard navigation and semantics

src/PickerInput/Popup/PresetPanel.tsx

@@ -23,21 +23,30 @@ export default function PresetPanel<DateType extends object = any>(
 
   return (
     <div className={`${prefixCls}-presets`}>
-      <ul>
+      <ul role="list">
         {presets.map(({ label, value }, index) => (
-          <li
-            key={index}
-            onClick={() => {
-              onClick(executeValue(value));
-            }}
-            onMouseEnter={() => {
-              onHover(executeValue(value));
-            }}
-            onMouseLeave={() => {
-              onHover(null);
-            }}
-          >
-            {label}
+          <li key={index}>
+            <button
+              type="button"
+              className={`${prefixCls}-presets-button`}
+              onClick={() => {
+                onClick(executeValue(value));
+              }}
+              onMouseEnter={() => {
+                onHover(executeValue(value));
+              }}
+              onMouseLeave={() => {
+                onHover(null);
+              }}
+              onFocus={() => {
+                onHover(executeValue(value));
+              }}
+              onBlur={() => {
+                onHover(null);
+              }}
+            >
+              {label}
+            </button>
           </li>
         ))}
       </ul>

src/PickerInput/Popup/index.tsx

@@ -2,6 +2,8 @@ import { clsx } from 'clsx';
 import ResizeObserver, { type ResizeObserverProps } from '@rc-component/resize-observer';
 import * as React from 'react';
 import type {
+  Locale,
+  PickerMode,
   RangeTimeProps,
   SharedPickerProps,
   SharedTimeProps,
@@ -52,6 +54,21 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   styles?: SharedPickerProps['styles'];
 }
 
+function getLocaleAriaLabel(locale: Locale, picker: PickerMode) {
+  switch (picker) {
+    case 'time':
+      return locale.timeSelect;
+    case 'week':
+      return locale.weekSelect;
+    case 'month':
+      return locale.monthSelect;
+    case 'year':
+      return locale.yearSelect;
+    default:
+      return locale.dateSelect;
+  }
+}
+
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>) {
   const {
     containerRef,
@@ -89,7 +106,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     styles,
   } = props;
 
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, popupId, locale } = React.useContext(PickerContext);
   const panelPrefixCls = `${prefixCls}-panel`;
 
   const rtl = direction === 'rtl';
@@ -220,8 +237,11 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   let renderNode = (
     <div
       ref={containerRef}
+      id={popupId}
       onMouseDown={onPanelMouseDown}
       tabIndex={-1}
+      role="dialog"
+      aria-label={getLocaleAriaLabel(locale, picker)}
       className={clsx(
         containerPrefixCls,
         // Used for Today Button style, safe to remove if no need

src/PickerInput/RangePicker.tsx

@@ -3,6 +3,7 @@ import {
   pickAttrs,
   useControlledState,
   useEvent,
+  useId,
   useLayoutEffect,
   warning,
 } from '@rc-component/util';
@@ -713,6 +714,8 @@ function RangePicker<DateType extends object = any>(
   };
 
   // ======================= Context ========================
+  const popupId = `${useId()}-panel`;
+
   const context = React.useMemo(
     () => ({
       prefixCls,
@@ -722,6 +725,7 @@ function RangePicker<DateType extends object = any>(
       input: components.input,
       classNames: mergedClassNames,
       styles: mergedStyles,
+      popupId,
     }),
     [
       prefixCls,
@@ -731,6 +735,7 @@ function RangePicker<DateType extends object = any>(
       components.input,
       mergedClassNames,
       mergedStyles,
+      popupId,
     ],
   );
 

src/PickerInput/Selector/Input.tsx

@@ -29,6 +29,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   format?: string;
   validateFormat: (value: string) => boolean;
   active?: boolean;
+  open?: boolean;
   /** Used for single picker only */
   showActiveCls?: boolean;
   suffix?: React.ReactNode;
@@ -52,6 +53,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   const {
     className,
     active,
+    open,
     showActiveCls = true,
     suffix,
     format,
@@ -75,6 +77,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
     input: Component = 'input',
     classNames,
     styles,
+    popupId,
   } = React.useContext(PickerContext);
   const inputPrefixCls = `${prefixCls}-input`;
 
@@ -404,7 +407,12 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
     >
       <Component
         ref={inputRef}
+        role="combobox"
         aria-invalid={invalid}
+        aria-haspopup="dialog"
+        aria-expanded={!!open}
+        // Only reference the popup once it's rendered to avoid a dangling IDREF
+        aria-controls={open ? popupId : undefined}
         autoComplete="off"
         {...restProps}
         onKeyDown={onSharedKeyDown}

src/PickerInput/Selector/hooks/useInputProps.ts

@@ -157,6 +157,8 @@ export default function useInputProps<DateType extends object = any>(
 
       active: activeIndex === index,
 
+      open,
+
       helped: allHelp || (activeHelp && activeIndex === index),
 
       disabled: getProp(disabled),

src/PickerInput/SinglePicker.tsx

@@ -1,4 +1,11 @@
-import { omit, pickAttrs, useControlledState, useEvent, useLayoutEffect } from '@rc-component/util';
+import {
+  omit,
+  pickAttrs,
+  useControlledState,
+  useEvent,
+  useId,
+  useLayoutEffect,
+} from '@rc-component/util';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import useToggleDates from '../hooks/useToggleDates';
@@ -642,6 +649,8 @@ function Picker<DateType extends object = any>(
   };
 
   // ======================= Context ========================
+  const popupId = `${useId()}-panel`;
+
   const context = React.useMemo(
     () => ({
       prefixCls,
@@ -651,6 +660,7 @@ function Picker<DateType extends object = any>(
       input: components.input,
       classNames: mergedClassNames,
       styles: mergedStyles,
+      popupId,
     }),
     [
       prefixCls,
@@ -660,6 +670,7 @@ function Picker<DateType extends object = any>(
       components.input,
       mergedClassNames,
       mergedStyles,
+      popupId,
     ],
   );
 

src/PickerInput/context.tsx

@@ -12,6 +12,8 @@ export interface PickerContextProps<DateType = any> {
   input?: Components['input'];
   classNames: FilledClassNames;
   styles: FilledStyles;
+  /** Id of the popup panel. Used by the input `aria-controls` to reference the popup */
+  popupId: string;
 }
 
 const PickerContext = React.createContext<PickerContextProps>(null!);

src/PickerInput/hooks/useRangePickerValue.ts

@@ -2,7 +2,7 @@ import { useControlledState, useLayoutEffect } from '@rc-component/util';
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
 import type { InternalMode, Locale, PanelMode } from '../../interface';
-import { fillTime, isSame } from '../../utils/dateUtil';
+import { fillTime, isSame, isSamePanel } from '../../utils/dateUtil';
 import type { RangePickerProps } from '../RangePicker';
 
 export function offsetPanelDate<DateType = any>(
@@ -127,21 +127,6 @@ export default function useRangePickerValue<DateType extends object, ValueType e
   };
 
   // ======================== Effect ========================
-  // Check whether two dates belong to the same panel.
-  // 判断两个日期是否属于同一个面板。
-  const isSamePanel = (date1: DateType, date2: DateType) => {
-    if (pickerMode === 'year') {
-      return (
-        Math.floor(generateConfig.getYear(date1) / 10) ===
-        Math.floor(generateConfig.getYear(date2) / 10)
-      );
-    }
-
-    const panelMode: PanelMode =
-      pickerMode === 'month' || pickerMode === 'quarter' ? 'year' : 'month';
-    return isSame(generateConfig, locale, date1, date2, panelMode);
-  };
-
   // Keep both values in the two visible panels when possible. Otherwise put
   // the end value in the second panel.
   // 尽量在双面板内同时展示两个值；无法容纳时，将 end 值放在右侧面板。
@@ -151,7 +136,9 @@ export default function useRangePickerValue<DateType extends object, ValueType e
     }
 
     const nextPanelDate = offsetPanelDate(generateConfig, pickerMode, startDate, 1);
-    const endInPanels = isSamePanel(startDate, endDate) || isSamePanel(nextPanelDate, endDate);
+    const endInPanels =
+      isSamePanel(generateConfig, pickerMode, startDate, endDate) ||
+      isSamePanel(generateConfig, pickerMode, nextPanelDate, endDate);
 
     return endInPanels ? startDate : offsetPanelDate(generateConfig, pickerMode, endDate, -1);
   };