fix(DatePicker, TimePicker): clear button accessibility (ant-design#58132)

Author: Pareder

components/date-picker/style/index.ts

@@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genPlaceholderStyle, initInputToken } from '../../input/style';
-import { resetComponent, textEllipsis } from '../../style';
+import { genFocusOutline, resetComponent, textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import {
   initMoveMotion,
@@ -210,6 +210,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           transform: 'translateY(-50%)',
           cursor: 'pointer',
           opacity: 0,
+          pointerEvents: 'none',
           transition: ['opacity', 'color'].map((prop) => `${prop} ${motionDurationMid}`).join(', '),
 
           '> *': {
@@ -219,11 +220,18 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           '&:hover': {
             color: colorIcon,
           },
+
+          '&:focus-visible': {
+            color: token.colorIcon,
+            borderRadius: token.borderRadiusSM,
+            ...genFocusOutline(token),
+          },
         },
 
-        '&:hover': {
+        '&:hover, &:focus-within': {
           [`${componentCls}-clear`]: {
             opacity: 1,
+            pointerEvents: 'auto',
           },
           // Should use the following selector, but since `:has` has poor compatibility,
           // we use `:not(:last-child)` instead, which may cause some problems in some cases.