feat: Improve Date panel keyboard navigation and semantics

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,

src/PickerInput/Popup/PresetPanel.tsx

@@ -23,24 +23,23 @@ 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}
+          type="button"
+          onClick={() => {
+            onClick(executeValue(value));
+          }}
+          onMouseEnter={() => {
+            onHover(executeValue(value));
+          }}
+          onMouseLeave={() => {
+            onHover(null);
+          }}
+        >
+          {label}
+        </button>
+      ))}
     </div>
   );
 }

src/PickerInput/Popup/index.tsx

@@ -20,7 +20,8 @@ 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'];
@@ -218,6 +219,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     <div
       onMouseDown={onPanelMouseDown}
       tabIndex={-1}
+      role="dialog"
       className={clsx(
         containerPrefixCls,
         // Used for Today Button style, safe to remove if no need

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;
   suffixIcon?: React.ReactNode;
@@ -52,6 +53,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   const {
     className,
     active,
+    open,
     showActiveCls = true,
     suffixIcon,
     format,
@@ -405,6 +407,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

@@ -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/PickerPanel/DatePanel/index.tsx

@@ -48,18 +48,40 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
   const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
   const monthStartDate = generateConfig.setDate(pickerValue, 1);
   const baseDate = getWeekStartDate(locale.locale, generateConfig, monthStartDate);
+
+  const yearLabel = formatValue(pickerValue, {
+    locale,
+    format: locale.yearFormat,
+    generateConfig,
+  });
+
+  const monthsLocale: string[] =
+    locale.shortMonths ||
+    (generateConfig.locale.getShortMonths
+      ? generateConfig.locale.getShortMonths(locale.locale)
+      : []);
   const month = generateConfig.getMonth(pickerValue);
+  const monthLabel = locale.monthFormat
+    ? formatValue(pickerValue, {
+        locale,
+        format: locale.monthFormat,
+        generateConfig,
+      })
+    : monthsLocale[month];
 
   // =========================== PrefixColumn ===========================
   const showPrefixColumn = showWeek === undefined ? isWeek : showWeek;
   const prefixColumn = showPrefixColumn
     ? (date: DateType) => {
         // >>> Additional check for disabled
         const disabled = disabledDate?.(date, { type: 'week' });
+        const label = generateConfig.locale.getWeek(locale.locale, date);
 
         return (
           <td
             key="week"
+            role="rowheader"
+            aria-label={`${locale.week} ${label}`}
             className={clsx(cellPrefixCls, `${cellPrefixCls}-week`, {
               [`${cellPrefixCls}-disabled`]: disabled,
             })}
@@ -80,9 +102,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
               }
             }}
           >
-            <div className={`${cellPrefixCls}-inner`}>
-              {generateConfig.locale.getWeek(locale.locale, date)}
-            </div>
+            <div className={`${cellPrefixCls}-inner`}>{label}</div>
           </td>
         );
       }
@@ -132,13 +152,14 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
     return classObj;
   };
 
-  // ========================= Header =========================
-  const monthsLocale: string[] =
-    locale.shortMonths ||
-    (generateConfig.locale.getShortMonths
-      ? generateConfig.locale.getShortMonths(locale.locale)
-      : []);
+  const getCellAttributes = (date: DateType): React.TdHTMLAttributes<HTMLTableCellElement> => {
+    if (isSameDate(generateConfig, date, now)) {
+      return { 'aria-current': 'date' };
+    }
+    return {};
+  };
 
+  // ========================= Header =========================
   const yearNode: React.ReactNode = (
     <button
       type="button"
@@ -147,14 +168,9 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
       onClick={() => {
         onModeChange('year', pickerValue);
       }}
-      tabIndex={-1}
       className={`${prefixCls}-year-btn`}
     >
-      {formatValue(pickerValue, {
-        locale,
-        format: locale.yearFormat,
-        generateConfig,
-      })}
+      {yearLabel}
     </button>
   );
   const monthNode: React.ReactNode = (
@@ -165,20 +181,16 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
       onClick={() => {
         onModeChange('month', pickerValue);
       }}
-      tabIndex={-1}
       className={`${prefixCls}-month-btn`}
     >
-      {locale.monthFormat
-        ? formatValue(pickerValue, {
-            locale,
-            format: locale.monthFormat,
-            generateConfig,
-          })
-        : monthsLocale[month]}
+      {monthLabel}
     </button>
   );
 
   const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
+  const tableLabel = locale.monthBeforeYear
+    ? `${monthLabel} ${yearLabel}`
+    : `${yearLabel} ${monthLabel}`;
 
   // ========================= Render =========================
   return (
@@ -196,6 +208,12 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
             clone = generateConfig.addMonth(clone, 1);
             return generateConfig.addDate(clone, -1);
           }}
+          labels={{
+            superPrev: locale.previousYear,
+            prev: locale.previousMonth,
+            next: locale.nextMonth,
+            superNext: locale.nextYear,
+          }}
         >
           {monthYearNodes}
         </PanelHeader>
@@ -213,8 +231,10 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          getCellAttributes={getCellAttributes}
           prefixColumn={prefixColumn}
           cellSelection={!isWeek}
+          tableLabel={tableLabel}
         />
       </div>
     </PanelContext.Provider>

src/PickerPanel/DecadePanel/index.tsx

@@ -61,6 +61,13 @@ export default function DecadePanel<DateType extends object = any>(
     };
   };
 
+  const getCellAttributes = (date: DateType): React.TdHTMLAttributes<HTMLTableCellElement> => {
+    if (isSameDecade(generateConfig, date, generateConfig.getNow())) {
+      return { 'aria-current': 'date' };
+    }
+    return {};
+  };
+
   // ======================== Disabled ========================
   const mergedDisabledDate: DisabledDate<DateType> = disabledDate
     ? (currentDate, disabledInfo) => {
@@ -81,7 +88,7 @@ export default function DecadePanel<DateType extends object = any>(
     : null;
 
   // ========================= Header =========================
-  const yearNode = `${formatValue(startYearDate, {
+  const yearLabel = `${formatValue(startYearDate, {
     locale,
     format: locale.yearFormat,
     generateConfig,
@@ -102,8 +109,9 @@ export default function DecadePanel<DateType extends object = any>(
           // Limitation
           getStart={getStartYear}
           getEnd={getEndYear}
+          labels={{ superPrev: locale.previousCentury, superNext: locale.nextCentury }}
         >
-          {yearNode}
+          {yearLabel}
         </PanelHeader>
 
         {/* Body */}
@@ -113,10 +121,12 @@ export default function DecadePanel<DateType extends object = any>(
           colNum={3}
           rowNum={4}
           baseDate={baseDate}
+          tableLabel={yearLabel}
           // Body
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          getCellAttributes={getCellAttributes}
         />
       </div>
     </PanelContext.Provider>

src/PickerPanel/MonthPanel/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DisabledDate, SharedPanelProps } from '../../interface';
-import { formatValue } from '../../utils/dateUtil';
+import { formatValue, isSameMonth } from '../../utils/dateUtil';
 import { PanelContext, useInfo } from '../context';
 import PanelBody from '../PanelBody';
 import PanelHeader from '../PanelHeader';
@@ -23,6 +23,11 @@ export default function MonthPanel<DateType extends object = any>(
   // ========================== Base ==========================
   const [info] = useInfo(props, 'month');
   const baseDate = generateConfig.setMonth(pickerValue, 0);
+  const yearLabel = formatValue(pickerValue, {
+    locale,
+    format: locale.yearFormat,
+    generateConfig,
+  });
 
   // ========================= Month ==========================
   const monthsLocale: string[] =
@@ -52,6 +57,13 @@ export default function MonthPanel<DateType extends object = any>(
     [`${prefixCls}-cell-in-view`]: true,
   });
 
+  const getCellAttributes = (date: DateType): React.TdHTMLAttributes<HTMLTableCellElement> => {
+    if (isSameMonth(generateConfig, date, generateConfig.getNow())) {
+      return { 'aria-current': 'date' };
+    }
+    return {};
+  };
+
   // ======================== Disabled ========================
   const mergedDisabledDate: DisabledDate<DateType> = disabledDate
     ? (currentDate, disabledInfo) => {
@@ -75,14 +87,9 @@ export default function MonthPanel<DateType extends object = any>(
       onClick={() => {
         onModeChange('year');
       }}
-      tabIndex={-1}
       className={`${prefixCls}-year-btn`}
     >
-      {formatValue(pickerValue, {
-        locale,
-        format: locale.yearFormat,
-        generateConfig,
-      })}
+      {yearLabel}
     </button>
   );
 
@@ -97,6 +104,7 @@ export default function MonthPanel<DateType extends object = any>(
           // Limitation
           getStart={(date) => generateConfig.setMonth(date, 0)}
           getEnd={(date) => generateConfig.setMonth(date, 11)}
+          labels={{ superPrev: locale.previousYear, superNext: locale.nextYear }}
         >
           {yearNode}
         </PanelHeader>
@@ -109,10 +117,12 @@ export default function MonthPanel<DateType extends object = any>(
           colNum={3}
           rowNum={4}
           baseDate={baseDate}
+          tableLabel={yearLabel}
           // Body
           getCellDate={getCellDate}
           getCellText={getCellText}
           getCellClassName={getCellClassName}
+          getCellAttributes={getCellAttributes}
         />
       </div>
     </PanelContext.Provider>