feat: add keyboard support (#332)

* feat: support key switch

* test: add test case

Author: zombieJ

.husky/pre-commit

@@ -6,31 +6,41 @@ export default () => {
   const [current, setCurrent] = useState(0);
 
   return (
-    <Steps
-      type="inline"
-      current={current}
-      onChange={setCurrent}
-      items={[
-        {
-          title: '开发',
-          description: '开发阶段：开发中',
-        },
-        {
-          title: '测试',
-          description: '测试阶段：测试中',
-        },
-        {
-          title: '预发',
-          description: '预发阶段：预发中',
-        },
-        {
-          title: '发布',
-          description: '发布阶段：发布中',
-        }
-      ]}
-      itemRender={(item, stepItem) => (
-        React.cloneElement(stepItem, { title: item.description })
-      )}
-    />
-  )
+    <>
+      <button
+        onClick={() => {
+          setCurrent(0);
+        }}
+      >
+        Current: {current}
+      </button>
+
+      <br />
+
+      <Steps
+        type="inline"
+        current={current}
+        onChange={setCurrent}
+        items={[
+          {
+            title: '开发',
+            description: '开发阶段：开发中',
+          },
+          {
+            title: '测试',
+            description: '测试阶段：测试中',
+          },
+          {
+            title: '预发',
+            description: '预发阶段：预发中',
+          },
+          {
+            title: '发布',
+            description: '发布阶段：发布中',
+          },
+        ]}
+        itemRender={(item, stepItem) => React.cloneElement(stepItem, { title: item.description })}
+      />
+    </>
+  );
 };

docs/examples/inline.jsx

@@ -1,6 +1,7 @@
 /* eslint react/prop-types: 0 */
 import * as React from 'react';
 import classNames from 'classnames';
+import KeyCode from 'rc-util/lib/KeyCode';
 import type { Status, Icons } from './interface';
 import type { StepIconRender, ProgressDotRender } from './Steps';
 
@@ -29,7 +30,7 @@ export interface StepProps {
   onStepClick?: (index: number) => void;
   progressDot?: ProgressDotRender | boolean;
   stepIcon?: StepIconRender;
-  render?: (stepItem: React.ReactNode) => React.ReactNode;
+  render?: (stepItem: React.ReactElement) => React.ReactNode;
 }
 
 function Step(props: StepProps) {
@@ -58,14 +59,31 @@ function Step(props: StepProps) {
     ...restProps
   } = props;
 
-  const onInternalClick: React.MouseEventHandler<HTMLDivElement> = (...args) => {
-    if (onClick) {
-      onClick(...args);
-    }
+  // ========================= Click ==========================
+  const clickable = !!onStepClick && !disabled;
 
-    onStepClick(stepIndex);
-  };
+  const accessibilityProps: {
+    role?: string;
+    tabIndex?: number;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  } = {};
+  if (clickable) {
+    accessibilityProps.role = 'button';
+    accessibilityProps.tabIndex = 0;
+    accessibilityProps.onClick = (e) => {
+      onClick?.(e);
+      onStepClick(stepIndex);
+    };
+    accessibilityProps.onKeyDown = (e) => {
+      const { which } = e;
+      if (which === KeyCode.ENTER || which === KeyCode.SPACE) {
+        onStepClick(stepIndex);
+      }
+    };
+  }
 
+  // ========================= Render =========================
   const renderIconNode = () => {
     let iconNode;
     const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
@@ -119,25 +137,19 @@ function Step(props: StepProps) {
 
   const mergedStatus = status || 'wait';
 
-  const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, className, {
-    [`${prefixCls}-item-custom`]: icon,
-    [`${prefixCls}-item-active`]: active,
-    [`${prefixCls}-item-disabled`]: disabled === true,
-  });
+  const classString = classNames(
+    `${prefixCls}-item`,
+    `${prefixCls}-item-${mergedStatus}`,
+    className,
+    {
+      [`${prefixCls}-item-custom`]: icon,
+      [`${prefixCls}-item-active`]: active,
+      [`${prefixCls}-item-disabled`]: disabled === true,
+    },
+  );
   const stepItemStyle = { ...style };
 
-  const accessibilityProps: {
-    role?: string;
-    tabIndex?: number;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-  } = {};
-  if (onStepClick && !disabled) {
-    accessibilityProps.role = 'button';
-    accessibilityProps.tabIndex = 0;
-    accessibilityProps.onClick = onInternalClick;
-  }
-
-  let stepNode: React.ReactNode = (
+  let stepNode: React.ReactElement = (
     <div {...restProps} className={classString} style={stepItemStyle}>
       <div onClick={onClick} {...accessibilityProps} className={`${prefixCls}-item-container`}>
         <div className={`${prefixCls}-item-tail`}>{tailContent}</div>
@@ -160,12 +172,11 @@ function Step(props: StepProps) {
     </div>
   );
 
-
   if (render) {
-    stepNode = render(stepNode) || null;
+    stepNode = (render(stepNode) || null) as React.ReactElement;
   }
 
-  return stepNode as React.ReactElement;
+  return stepNode;
 }
 
 export default Step;

src/Step.tsx

@@ -40,7 +40,7 @@ export interface StepsProps {
   initial?: number;
   icons?: Icons;
   items?: StepProps[];
-  itemRender?: (item: StepProps, stepItem: React.ReactNode) => React.ReactNode;
+  itemRender?: (item: StepProps, stepItem: React.ReactElement) => React.ReactNode;
   onChange?: (current: number) => void;
 }
 

src/Steps.tsx

@@ -257,9 +257,7 @@ describe('Steps', () => {
               disabled: true,
             },
           ]}
-          itemRender={(item, stepItem) => (
-            React.cloneElement(stepItem, { title: item.description })
-          )}
+          itemRender={(item, stepItem) => React.cloneElement(stepItem, { title: item.description })}
         />,
       );
       expect(wrapper).toMatchSnapshot();
@@ -470,4 +468,28 @@ describe('Steps', () => {
     wrapper.find('.rc-steps-item-container').at(2).simulate('click');
     expect(onChange).not.toBeCalled();
   });
+
+  it('key board support', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Steps
+        current={0}
+        onChange={onChange}
+        items={[
+          {
+            title: 'Finished',
+            description: 'This is a description',
+          },
+          {
+            title: 'Waiting',
+            description: 'This is a description',
+          },
+        ]}
+      />,
+    );
+
+    wrapper.find('[role="button"]').at(1).simulate('keydown', { which: 13 });
+
+    expect(onChange).toBeCalledWith(1);
+  });
 });