feat: Improve Time panel keyboard navigation and semantics

src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx

@@ -3,6 +3,7 @@ import { useLayoutEffect } from '@rc-component/util';
 import * as React from 'react';
 import { usePanelContext } from '../../context';
 import useScrollTo from './useScrollTo';
+import type { Locale } from '../../../interface';
 
 const SCROLL_DELAY = 300;
 
@@ -12,11 +13,13 @@ export type Unit<ValueType = number | string> = {
   disabled?: boolean;
 };
 
+type TimeUnitType = 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';
+
 export interface TimeUnitColumnProps {
   units: Unit[];
   value: number | string;
   optionalValue?: number | string;
-  type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';
+  type: TimeUnitType;
   onChange: (value: number | string) => void;
   onHover: (value: number | string) => void;
   onDblClick?: VoidFunction;
@@ -28,6 +31,25 @@ function flattenUnits(units: Unit<string | number>[]) {
   return units.map(({ value, label, disabled }) => [value, label, disabled].join(',')).join(';');
 }
 
+const LIST_LABEL_MAP: Record<TimeUnitType, (locale: Locale) => string> = {
+  hour: (locale) => locale.hourSelect,
+  minute: (locale) => locale.minuteSelect,
+  second: (locale) => locale.secondSelect,
+  millisecond: (locale) => locale.millisecondSelect,
+  meridiem: (locale) => locale.meridiemSelect,
+};
+
+const LIST_ITEM_LABEL_MAP: Record<
+  TimeUnitType,
+  (value: string | number, locale: Locale) => string
+> = {
+  hour: (value, locale) => `${value} ${locale.hours}`,
+  minute: (value, locale) => `${value} ${locale.minutes}`,
+  second: (value, locale) => `${value} ${locale.seconds}`,
+  millisecond: (value, locale) => `${value} ${locale.milliseconds}`,
+  meridiem: (value) => value.toString(),
+};
+
 export default function TimeColumn<DateType extends object>(props: TimeUnitColumnProps) {
   const { units, value, optionalValue, type, onChange, onHover, onDblClick, changeOnScroll } =
     props;
@@ -96,16 +118,28 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
   const columnPrefixCls = `${panelPrefixCls}-column`;
 
   return (
-    <ul className={columnPrefixCls} ref={ulRef} data-type={type} onScroll={onInternalScroll}>
+    <ul
+      role="listbox"
+      aria-label={LIST_LABEL_MAP[type](locale)}
+      className={columnPrefixCls}
+      ref={ulRef}
+      data-type={type}
+      onScroll={onInternalScroll}
+    >
       {units.map(({ label, value: unitValue, disabled }) => {
         const inner = <div className={`${cellPrefixCls}-inner`}>{label}</div>;
+        const isSelected = value === unitValue;
 
         return (
           <li
             key={unitValue}
+            aria-label={LIST_ITEM_LABEL_MAP[type](unitValue, locale)}
+            role="option"
+            aria-selected={isSelected}
+            aria-disabled={disabled}
             style={styles.item}
             className={clsx(cellPrefixCls, classNames.item, {
-              [`${cellPrefixCls}-selected`]: value === unitValue,
+              [`${cellPrefixCls}-selected`]: isSelected,
               [`${cellPrefixCls}-disabled`]: disabled,
             })}
             onClick={() => {

src/PickerPanel/TimePanel/TimePanelBody/index.tsx

@@ -271,7 +271,11 @@ export default function TimePanelBody<DateType extends object = any>(
   };
 
   return (
-    <div className={clsx(`${prefixCls}-content`, classNames.content)} style={styles.content}>
+    <div
+      role="group"
+      className={clsx(`${prefixCls}-content`, classNames.content)}
+      style={styles.content}
+    >
       {showHour && (
         <TimeColumn
           units={hourUnits}

src/generate/dateFns.ts

@@ -49,7 +49,7 @@ const localeParse = (format: string) => {
 
 const parse = (text: string, format: string, locale: string) => {
   return parseDate(text, localeParse(format), new Date(), { locale: getLocale(locale) });
-}
+};
 
 /**
  * Check if the text is a valid date considering the format and locale
@@ -69,7 +69,7 @@ const isStrictValidDate = (text: string, format: string, locale: string) => {
   }
   const formattedDate = formatDate(date, format, { locale: getLocale(locale) });
   return text === formattedDate;
-}
+};
 
 const generateConfig: GenerateConfig<Date> = {
   // get

src/interface.tsx

@@ -66,11 +66,20 @@ export type Locale = {
   week: string;
   month: string;
   year: string;
+  hours?: string;
+  minutes?: string;
+  seconds?: string;
+  milliseconds?: string;
   previousMonth: string;
   nextMonth: string;
   monthSelect: string;
   yearSelect: string;
   decadeSelect: string;
+  hourSelect?: string;
+  minuteSelect?: string;
+  secondSelect?: string;
+  millisecondSelect?: string;
+  meridiemSelect?: string;
 
   previousYear: string;
   nextYear: string;
@@ -316,13 +325,7 @@ export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
 export type PreviewValueType = 'hover';
 
 export type PanelSemanticName =
-  | 'root'
-  | 'header'
-  | 'body'
-  | 'content'
-  | 'item'
-  | 'footer'
-  | 'container';
+  'root' | 'header' | 'body' | 'content' | 'item' | 'footer' | 'container';
 
 export interface SharedPickerProps<DateType extends object = any>
   extends

src/locale/en_GB.ts

@@ -12,11 +12,20 @@ const locale: Locale = {
   week: 'Week',
   month: 'Month',
   year: 'Year',
+  hours: 'Hours',
+  minutes: 'Minutes',
+  seconds: 'Seconds',
+  milliseconds: 'Milliseconds',
   timeSelect: 'Select time',
   dateSelect: 'Select date',
   monthSelect: 'Choose a month',
   yearSelect: 'Choose a year',
   decadeSelect: 'Choose a decade',
+  hourSelect: 'Select an hour',
+  minuteSelect: 'Select a minute',
+  secondSelect: 'Select a second',
+  millisecondSelect: 'Select a millisecond',
+  meridiemSelect: 'Select a meridiem',
 
   previousMonth: 'Previous month',
   nextMonth: 'Next month',

src/locale/en_US.ts

@@ -12,12 +12,21 @@ const locale: Locale = {
   week: 'Week',
   month: 'Month',
   year: 'Year',
+  hours: 'Hours',
+  minutes: 'Minutes',
+  seconds: 'Seconds',
+  milliseconds: 'Milliseconds',
   timeSelect: 'select time',
   dateSelect: 'select date',
   weekSelect: 'Choose a week',
   monthSelect: 'Choose a month',
   yearSelect: 'Choose a year',
   decadeSelect: 'Choose a decade',
+  hourSelect: 'Select an hour',
+  minuteSelect: 'Select a minute',
+  secondSelect: 'Select a second',
+  millisecondSelect: 'Select a millisecond',
+  meridiemSelect: 'Select a meridiem',
 
   previousMonth: 'Previous month',
   nextMonth: 'Next month',

src/locale/ka_GE.ts

@@ -1,5 +1,5 @@
 import { commonLocale } from './common';
-import { Locale } from '../interface';
+import type { Locale } from '../interface';
 
 const locale: Locale = {
   ...commonLocale,

src/locale/te_IN.ts

@@ -1,31 +1,31 @@
 import { commonLocale } from './common';
 import type { Locale } from '../interface';
 
-const locale: Locale={
-    ...commonLocale,
-    locale: 'te_IN',
-    today:'నేడు',
-    now:'ఇప్పుడు',
-    backToToday:'తిరిగి నేటికి',
-    ok:'సరే',
-    clear:'స్పష్టమైన',
-    week:'వారం',
-    month:'నెల',
-    year:'సంవత్సరం',
-    timeSelect:'సమయం ఎంపిక',
-    dateSelect:'తేదీ ఎంపిక',
-    weekSelect:'వారం ఎంపిక',
-    monthSelect:'నెల ఎంపిక',
-    yearSelect:'సంవత్సరం ఎంపిక',
-    decadeSelect:'దశాబ్దం ఎంపిక',
+const locale: Locale = {
+  ...commonLocale,
+  locale: 'te_IN',
+  today: 'నేడు',
+  now: 'ఇప్పుడు',
+  backToToday: 'తిరిగి నేటికి',
+  ok: 'సరే',
+  clear: 'స్పష్టమైన',
+  week: 'వారం',
+  month: 'నెల',
+  year: 'సంవత్సరం',
+  timeSelect: 'సమయం ఎంపిక',
+  dateSelect: 'తేదీ ఎంపిక',
+  weekSelect: 'వారం ఎంపిక',
+  monthSelect: 'నెల ఎంపిక',
+  yearSelect: 'సంవత్సరం ఎంపిక',
+  decadeSelect: 'దశాబ్దం ఎంపిక',
 
-    previousMonth:'మునుపటి నెల',
-    nextMonth:'వచ్చే నెల',
-    previousYear:'మునుపటి సంవత్సరం',
-    nextYear:'తదుపరి సంవత్సరం',
-    previousDecade:'మునుపటి దశాబ్దం',
-    nextDecade:'తదుపరి దశాబ్దం',
-    previousCentury:'మునుపటి శతాబ్దం',
-    nextCentury:'తదుపరి శతాబ్దం',
+  previousMonth: 'మునుపటి నెల',
+  nextMonth: 'వచ్చే నెల',
+  previousYear: 'మునుపటి సంవత్సరం',
+  nextYear: 'తదుపరి సంవత్సరం',
+  previousDecade: 'మునుపటి దశాబ్దం',
+  nextDecade: 'తదుపరి దశాబ్దం',
+  previousCentury: 'మునుపటి శతాబ్దం',
+  nextCentury: 'తదుపరి శతాబ్దం',
 };
-export default locale;
+export default locale;

src/locale/zh_CN.ts

@@ -15,11 +15,20 @@ const locale: Locale = {
   week: '周',
   month: '月',
   year: '年',
+  hours: '时',
+  minutes: '分',
+  seconds: '秒',
+  milliseconds: '毫秒',
   previousMonth: '上个月',
   nextMonth: '下个月',
   monthSelect: '选择月份',
   yearSelect: '选择年份',
   decadeSelect: '选择年代',
+  hourSelect: '选择时',
+  minuteSelect: '选择分',
+  secondSelect: '选择秒',
+  millisecondSelect: '选择毫秒',
+  meridiemSelect: '选择上午/下午',
 
   previousYear: '上一年',
   nextYear: '下一年',

src/locale/zh_TW.ts

@@ -16,11 +16,21 @@ const locale: Locale = {
   week: '週',
   month: '月',
   year: '年',
+  hours: '時',
+  minutes: '分',
+  seconds: '秒',
+  milliseconds: '毫秒',
   previousMonth: '上個月',
   nextMonth: '下個月',
   monthSelect: '選擇月份',
   yearSelect: '選擇年份',
   decadeSelect: '選擇年代',
+  hourSelect: '選擇時',
+  minuteSelect: '選擇分',
+  secondSelect: '選擇秒',
+  millisecondSelect: '選擇毫秒',
+  meridiemSelect: '選擇上午/下午',
+
   yearFormat: 'YYYY年',
 
   previousYear: '上一年',