feat: Improve accessibility (keyboard navigation, ARIA semantics, translations)

assets/index.less

@@ -173,13 +173,10 @@
 
   // Preset
   &-presets {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     background: #ccccff;
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
   }
 
   &-footer,
@@ -191,11 +188,6 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
-    list-style: none;
-
-    > li {
-      display: inline-block;
-    }
   }
 
   &-ok {

src/PickerInput/Popup/Footer.tsx

@@ -45,7 +45,8 @@ export default function Footer(props: FooterProps) {
   const {
     prefixCls,
     locale,
-    button: Button = 'button',
+    nowButton: NowButton = 'button',
+    okButton: OkButton = 'button',
     classNames,
     styles,
   } = React.useContext(PickerContext);
@@ -70,35 +71,24 @@ export default function Footer(props: FooterProps) {
     }
   };
 
-  const nowPrefixCls = `${prefixCls}-now`;
-  const nowBtnPrefixCls = `${nowPrefixCls}-btn`;
-
   const presetNode = showNow && (
-    <li className={nowPrefixCls}>
-      <a
-        className={clsx(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
-        aria-disabled={nowDisabled}
-        onClick={onInternalNow}
-      >
-        {internalMode === 'date' ? locale.today : locale.now}
-      </a>
-    </li>
+    <NowButton className={`${prefixCls}-now`} disabled={nowDisabled} onClick={onInternalNow}>
+      {internalMode === 'date' ? locale.today : locale.now}
+    </NowButton>
   );
 
   // >>> OK
   const okNode = needConfirm && (
-    <li className={`${prefixCls}-ok`}>
-      <Button disabled={invalid} onClick={onSubmit}>
-        {locale.ok}
-      </Button>
-    </li>
+    <OkButton disabled={invalid} className={`${prefixCls}-ok`} onClick={onSubmit}>
+      {locale.ok}
+    </OkButton>
   );
 
   const rangeNode = (presetNode || okNode) && (
-    <ul className={`${prefixCls}-ranges`}>
+    <div className={`${prefixCls}-ranges`}>
       {presetNode}
       {okNode}
-    </ul>
+    </div>
   );
 
   // ======================== Render ========================

src/PickerInput/Popup/PresetPanel.tsx

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

src/PickerInput/Popup/index.tsx

@@ -20,10 +20,12 @@ export type PopupShowTimeConfig<DateType extends object = any> = Omit<
   Pick<SharedTimeProps<DateType>, 'disabledTime'>;
 
 export interface PopupProps<DateType extends object = any, PresetValue = DateType>
-  extends Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>,
+  extends
+    Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>,
     FooterProps<DateType>,
     PopupPanelProps<DateType> {
   panelRender?: SharedPickerProps['panelRender'];
+  containerRef?: React.Ref<HTMLDivElement>;
 
   // Presets
   presets: ValueDate<DateType>[];
@@ -45,6 +47,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   onOk: VoidFunction;
 
   onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onEscapeKeyDown?: VoidFunction;
 
   classNames?: SharedPickerProps['classNames'];
   styles?: SharedPickerProps['styles'];
@@ -71,6 +74,8 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     onFocus,
     onBlur,
     onPanelMouseDown,
+    containerRef,
+    onEscapeKeyDown,
 
     // Direction
     direction,
@@ -213,11 +218,38 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   const marginLeft = 'marginLeft';
   const marginRight = 'marginRight';
 
+  const onContainerKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Tab') {
+      const container = e.currentTarget;
+      const focusable = Array.from(
+        container.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), a:not([aria-disabled="true"]), td[tabindex="0"], li[tabindex="0"]',
+        ),
+      ).filter((el) => window.getComputedStyle(el).visibility !== 'hidden');
+
+      if (!focusable.length) return;
+
+      e.preventDefault();
+      const idx = focusable.indexOf(document.activeElement as HTMLElement);
+      const next = e.shiftKey
+        ? (idx - 1 + focusable.length) % focusable.length
+        : (idx + 1) % focusable.length;
+      focusable[next].focus();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      onEscapeKeyDown?.();
+    }
+  };
+
   // Container
   let renderNode = (
     <div
+      ref={containerRef}
       onMouseDown={onPanelMouseDown}
+      onKeyDown={onContainerKeyDown}
       tabIndex={-1}
+      role="dialog"
       className={clsx(
         containerPrefixCls,
         // Used for Today Button style, safe to remove if no need

src/PickerInput/RangePicker.tsx

@@ -28,6 +28,7 @@ import useFieldsInvalidate from './hooks/useFieldsInvalidate';
 import useFilledProps from './hooks/useFilledProps';
 import useOpen from './hooks/useOpen';
 import usePickerRef from './hooks/usePickerRef';
+import usePopupFocus, { focusPopupActiveCell } from './hooks/usePopupFocus';
 import usePresets from './hooks/usePresets';
 import useRangeActive from './hooks/useRangeActive';
 import useRangeDisabledDate from './hooks/useRangeDisabledDate';
@@ -56,8 +57,10 @@ export type RangeValueType<DateType> = [
 /** Used for change event, it should always be not undefined */
 export type NoUndefinedRangeValueType<DateType> = [start: DateType | null, end: DateType | null];
 
-export interface BaseRangePickerProps<DateType extends object>
-  extends Omit<SharedPickerProps<DateType>, 'showTime' | 'id'> {
+export interface BaseRangePickerProps<DateType extends object> extends Omit<
+  SharedPickerProps<DateType>,
+  'showTime' | 'id'
+> {
   // Structure
   id?: SelectorIdType;
 
@@ -132,7 +135,8 @@ export interface BaseRangePickerProps<DateType extends object>
 }
 
 export interface RangePickerProps<DateType extends object>
-  extends BaseRangePickerProps<DateType>,
+  extends
+    BaseRangePickerProps<DateType>,
     Omit<RangeTimeProps<DateType>, 'format' | 'defaultValue' | 'defaultOpenValue'> {}
 
 function getActiveRange(activeIndex: number) {
@@ -227,6 +231,7 @@ function RangePicker<DateType extends object = any>(
 
   // ========================= Refs =========================
   const selectorRef = usePickerRef(ref);
+  const popupRef = React.useRef<HTMLDivElement>(null);
 
   // ======================= Semantic =======================
   const [mergedClassNames, mergedStyles] = useSemantic(propClassNames, propStyles);
@@ -241,6 +246,8 @@ function RangePicker<DateType extends object = any>(
     }
   };
 
+  const forceClose = () => triggerOpen(false, { force: true });
+
   // ======================== Values ========================
   const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, triggerOk] =
     useInnerValue(
@@ -319,6 +326,15 @@ function RangePicker<DateType extends object = any>(
   const internalMode: InternalMode =
     mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode;
 
+  // ===================== Keyboard Focus =====================
+  const { isFocusOpenSuppressed } = usePopupFocus(
+    mergedOpen,
+    mergedMode,
+    activeIndex,
+    popupRef,
+    () => selectorRef.current?.focus({ index: activeIndex ?? 0 }),
+  );
+
   // ====================== PanelCount ======================
   const multiplePanel = internalMode === picker && internalMode !== 'time';
 
@@ -426,7 +442,7 @@ function RangePicker<DateType extends object = any>(
     flushSubmit(activeIndex, nextIndex === null);
 
     if (nextIndex === null) {
-      triggerOpen(false, { force: true });
+      forceClose();
     } else if (!skipFocus) {
       selectorRef.current.focus({ index: nextIndex });
     }
@@ -454,7 +470,7 @@ function RangePicker<DateType extends object = any>(
 
   const onSelectorClear = () => {
     triggerSubmitChange(null);
-    triggerOpen(false, { force: true });
+    forceClose();
   };
 
   // ======================== Hover =========================
@@ -502,7 +518,7 @@ function RangePicker<DateType extends object = any>(
 
     if (passed) {
       lastOperation('preset-click');
-      triggerOpen(false, { force: true });
+      forceClose();
     }
   };
 
@@ -517,7 +533,11 @@ function RangePicker<DateType extends object = any>(
 
   // >>> Focus
   const onPanelFocus: React.FocusEventHandler<HTMLElement> = (event) => {
-    triggerOpen(true);
+    // A programmatic focus move into the panel (open / drill-down) must not
+    // reopen a popup that is in the middle of closing.
+    if (!isFocusOpenSuppressed()) {
+      triggerOpen(true);
+    }
     onSharedFocus(event);
   };
 
@@ -597,6 +617,8 @@ function RangePicker<DateType extends object = any>(
       onFocus={onPanelFocus}
       onBlur={onSharedBlur}
       onPanelMouseDown={onPanelMouseDown}
+      containerRef={popupRef}
+      onEscapeKeyDown={forceClose}
       // Mode
       picker={picker}
       mode={mergedMode}
@@ -668,9 +690,11 @@ function RangePicker<DateType extends object = any>(
 
     lastOperation('input');
 
-    triggerOpen(true, {
-      inherit: true,
-    });
+    if (!isFocusOpenSuppressed()) {
+      triggerOpen(true, {
+        inherit: true,
+      });
+    }
 
     // When click input to switch the field, it will not trigger close.
     // Which means it will lose the part confirm and we need fill back.
@@ -696,7 +720,16 @@ function RangePicker<DateType extends object = any>(
 
   const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event, preventDefault) => {
     if (event.key === 'Tab') {
-      triggerPartConfirm(null, true);
+      if (mergedOpen && !event.shiftKey) {
+        // Popup is open: move focus into the panel's active cell so keyboard
+        // users can navigate the calendar, rather than Tab jumping to the other
+        // field. The input blur this triggers would close the popup, but the
+        // panel's `onFocus` (→ `triggerOpen(true)`) keeps it open.
+        event.preventDefault();
+        focusPopupActiveCell(popupRef);
+      } else {
+        triggerPartConfirm(null, true);
+      }
     }
 
     onKeyDown?.(event, preventDefault);
@@ -708,7 +741,8 @@ function RangePicker<DateType extends object = any>(
       prefixCls,
       locale,
       generateConfig,
-      button: components.button,
+      nowButton: components.nowButton,
+      okButton: components.okButton,
       input: components.input,
       classNames: mergedClassNames,
       styles: mergedStyles,
@@ -717,7 +751,8 @@ function RangePicker<DateType extends object = any>(
       prefixCls,
       locale,
       generateConfig,
-      components.button,
+      components.nowButton,
+      components.okButton,
       components.input,
       mergedClassNames,
       mergedStyles,

src/PickerInput/Selector/Input.tsx

@@ -31,6 +31,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;
   suffixIcon?: React.ReactNode;
@@ -54,6 +55,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   const {
     className,
     active,
+    open,
     showActiveCls = true,
     suffixIcon,
     format,
@@ -407,6 +409,8 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
       <Component
         ref={inputRef}
         aria-invalid={invalid}
+        aria-haspopup="dialog"
+        aria-expanded={open}
         autoComplete="off"
         {...restProps}
         onKeyDown={onSharedKeyDown}

src/PickerInput/Selector/hooks/useInputProps.ts

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