feat(Step): support keyborad direction and use semantic label

alibaba-fusion · Mar 25, 2019 · 7225e8b · 7225e8b
1 parent e343718
commit 7225e8b
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 47 deletions.
diff --git a/docs/step/demo/basic.md b/docs/step/demo/basic.md
@@ -6,8 +6,6 @@
 
 `circle`类型可通过`labelPlacement`设置文本排列方向。
 
-在当前的step item上添加aria-label标签来支持无障碍识别当前step进度
-
 :::lang=en-us
 # Basic
 
@@ -17,16 +15,14 @@ In the simplest case, Step has three types that can be toggled through the `shap
 
 The `circle` type can be used to set the orientation of the text through `labelPlacement`.
 
-Add the `aria-label` tag to the current step item to support the current step progress for accessibility recognition
-
 :::
 
 ---
 
 ````jsx
 import { Step } from '@alifd/next';
 
-const steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} aria-label={index === 1 ? `Current Step, ${item[0]}, ${item[1]}` : null} key={index} title={item[0]} content={item[1]}/>);
+const steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} key={index} title={item[0]} content={item[1]}/>);
 
 ReactDOM.render(<div>
     <h3>Arrow</h3>

diff --git a/docs/step/demo/controlled.md b/docs/step/demo/controlled.md
@@ -30,7 +30,7 @@ class Component extends React.Component {
             currentStep: 3,
             stepType: 'circle',
             stepAnimation: true,
-            labelPlacement: 'vertical'
+            labelPlacement: 'ver'
         };
 
         this.onClick = this.onClick.bind(this);
@@ -77,9 +77,9 @@ class Component extends React.Component {
                         }
                     </Select>
 
-                    <Select placeholder="Label placement" onChange={this.onLabelPlacementChange.bind(this)} className="custom-select" defaultValue="vertical">
+                    <Select placeholder="Label placement" onChange={this.onLabelPlacementChange.bind(this)} className="custom-select" defaultValue="ver">
                         {
-                            ['horizontal', 'vertical'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)
+                            ['hoz', 'ver'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)
                         }
                     </Select>
 

diff --git a/docs/step/demo/direction.md b/docs/step/demo/direction.md
@@ -24,14 +24,14 @@ import { Step } from '@alifd/next';
 ReactDOM.render(<div>
     <Step current={1} direction="ver" animation={false}>
         <Step.Item title="Step 1" content="Open the refrigerator door" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2, Put the elephant in the refrigerator" content="Put the elephant in the refrigerator" />
+        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" />
         <Step.Item title="Step 3" content="Close the refrigerator door" />
     </Step>
 
     <br /><br />
     <Step current={1} direction="ver" shape="dot" animation={false}>
         <Step.Item title="Step 1" content="Open the refrigerator door" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2, Put the elephant in the refrigerator" content="Put the elephant in the refrigerator" />
+        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" />
         <Step.Item title="Step 3" content="Close the refrigerator door" />
     </Step>
 </div>, mountNode);

diff --git a/docs/step/demo/disable.md b/docs/step/demo/disable.md
@@ -23,23 +23,23 @@ import { Step } from '@alifd/next';
 ReactDOM.render(<div>
     <Step current={1} shape="arrow">
         <Step.Item title="Step 1" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2" />
+        <Step.Item title="Step 2" />
         <Step.Item title="Step 3" disabled />
         <Step.Item title="Step 4" />
     </Step>
     <br />
     <br />
     <Step current={1} shape="dot">
         <Step.Item title="Step 1" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2" />
+        <Step.Item title="Step 2" />
         <Step.Item title="Step 3" disabled />
         <Step.Item title="Step 4" />
     </Step>
     <br />
     <br />
     <Step current={1} shape="circle">
         <Step.Item title="Step 1" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2" />
+        <Step.Item title="Step 2" />
         <Step.Item title="Step 3" disabled />
         <Step.Item title="Step 4" />
     </Step>

diff --git a/docs/step/demo/percent.md b/docs/step/demo/percent.md
@@ -23,14 +23,14 @@ import { Step } from '@alifd/next';
 ReactDOM.render(<div>
     <Step current={1} animation={false} shape="dot">
         <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2, Put the elephant in the refrigerator" content="Put the elephant in the refrigerator" percent={40}/>
+        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" percent={40}/>
         <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" />
     </Step>
     <br />
     <br />
     <Step current={1} animation={false}>
         <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" />
-        <Step.Item title="Step 2" aria-label="Current Step, Step 2, Put the elephant in the refrigerator" content="Put the elephant in the refrigerator" percent={40}/>
+        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" percent={40}/>
         <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" />
     </Step>
 </div>, mountNode);

diff --git a/docs/step/theme/index.jsx b/docs/step/theme/index.jsx
@@ -73,8 +73,8 @@ class FunctionDemo extends React.Component {
                 },
                 contentPos: {
                     label: '内容位置',
-                    value: 'vertical',
-                    enum: [{ value: 'vertical', label: '节点下方' }, { value: 'horizontal', label: '节点右侧' }],
+                    value: 'ver',
+                    enum: [{ value: 'ver', label: '节点下方' }, { value: 'hoz', label: '节点右侧' }],
                 }
             },
             dotDemoFunction: {
@@ -162,14 +162,14 @@ class FunctionDemo extends React.Component {
                 </Demo>
                 <Demo title={i18n.verticalGroup} block>
                     <DemoGroup label={i18n.horizontal}>
-                        <Step current={1} shape={shape} direction="vertical"  >
+                        <Step current={1} shape={shape} direction="ver"  >
                             {
                                 itemData.horizontal.map((v, index) => this.itemRender({ flag, index, ...v }))
                             }
                         </Step>
                     </DemoGroup>
                     <DemoGroup label={i18n.disabled}>
-                        <Step current={2} shape={shape} direction="vertical" >
+                        <Step current={2} shape={shape} direction="ver" >
                             {
                                 itemData.disabled.map((v, index) => this.itemRender({ flag, index, ...v }))
                             }
@@ -204,21 +204,21 @@ class FunctionDemo extends React.Component {
                 </Demo>
                 <Demo title={i18n.verticalGroup} block>
                     <DemoGroup label={i18n.horizontal}>
-                        <Step current={1} shape={shape} direction="vertical"  >
+                        <Step current={1} shape={shape} direction="ver"  >
                             {
                                 itemData.horizontal.map((v, index) => this.itemRender({ flag, index, ...v }))
                             }
                         </Step>
                     </DemoGroup>
                     <DemoGroup label={i18n.percent}>
-                        <Step current={2} shape={shape} direction="vertical" >
+                        <Step current={2} shape={shape} direction="ver" >
                             {
                                 itemData.percent.map((v, index) => this.itemRender({ flag, index, ...v }))
                             }
                         </Step>
                     </DemoGroup>
                     <DemoGroup label={i18n.disabled}>
-                        <Step current={2} shape={shape} direction="vertical" >
+                        <Step current={2} shape={shape} direction="ver" >
                             {
                                 itemData.disabled.map((v, index) => this.itemRender({ flag, index, ...v }))
                             }

diff --git a/src/step/scss/basic.scss b/src/step/scss/basic.scss
@@ -9,6 +9,11 @@
         position: relative;
         vertical-align: middle;
         outline: 0;
+        height: 100%;
+
+        &-body {
+            outline: 0;
+        }
 
         &-node {
             transition: all .2s ease;

diff --git a/src/step/view/step-item.jsx b/src/step/view/step-item.jsx
@@ -224,6 +224,7 @@ class StepItem extends Component {
             status,
             title,
             content,
+            shape,
         } = this.props;
         const { others, stepCls, overlayCls } = args;
         const nodeElement = this._getNode();
@@ -260,11 +261,13 @@ class StepItem extends Component {
                 </div>
             );
         }
+        if (shape !== 'arrow') {
+            delete others.tabIndex;
+            delete others['aria-current'];
+        }
 
         return (
-            <div
-                tabIndex="0"
-                aria-current={status === 'process' ? 'step' : null}
+            <li
                 {...others}
                 style={this.getStyle()}
                 className={stepCls}
@@ -274,6 +277,8 @@ class StepItem extends Component {
                 <div
                     className={`${prefix}step-item-body`}
                     ref={this._refHandlerCreator('body')}
+                    tabIndex={this.props.tabIndex}
+                    aria-current={this.props['aria-current']}
                 >
                     <div
                         className={`${prefix}step-item-title`}
@@ -296,7 +301,7 @@ class StepItem extends Component {
                         />
                     </div>
                 </div>
-            </div>
+            </li>
         );
     }
 
@@ -409,9 +414,7 @@ class StepItem extends Component {
 
         const overlayCls = status === 'finish' ? { width: '100%' } : null;
         const arrowElement = (
-            <div
-                tabIndex="0"
-                aria-current={status === 'process' ? 'step' : null}
+            <li
                 {...others}
                 style={this.getStyle()}
                 className={stepCls}
@@ -420,7 +423,7 @@ class StepItem extends Component {
                 <div className={`${prefix}step-item-container`}>
                     <div className={`${prefix}step-item-title`}>{title}</div>
                 </div>
-            </div>
+            </li>
         );
         const otherElement = this.getNode({ others, stepCls, overlayCls });
 

diff --git a/src/step/view/step.jsx b/src/step/view/step.jsx
@@ -2,8 +2,9 @@ import React, { Component, Children } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { support, events, dom } from '../../util';
+import { support, events, dom, KEYCODE, func } from '../../util';
 
+const { makeChain } = func;
 const getHeight = el => dom.getStyle(el, 'height');
 const setHeight = (el, height) => dom.setStyle(el, 'height', height);
 
@@ -68,6 +69,7 @@ export default class Step extends Component {
         this.state = {
             parentWidth: 'auto',
             parentHeight: 'auto',
+            currentfocus: 0,
         };
         this.resize = this.resize.bind(this);
     }
@@ -108,6 +110,8 @@ export default class Step extends Component {
             (labelPlacement === 'vertical' || labelPlacement === 'ver')
         ) {
             const step = ReactDOM.findDOMNode(this.step);
+            // just resize when init
+            if (step.style.height) return;
             const height = Array.prototype.slice
                 .call(step.getElementsByClassName(`${prefix}step-item`))
                 .reduce((ret, re) => {
@@ -133,6 +137,40 @@ export default class Step extends Component {
         }
     }
 
+    // set dir key for aria handle
+    handleKeyDown = e => {
+        const { shape, children } = this.props;
+        const { length: max } = children;
+        let { currentfocus } = this.state;
+        const initPosition = currentfocus;
+        switch (e.keyCode) {
+            case KEYCODE.RIGHT:
+            case KEYCODE.DOWN:
+                currentfocus++;
+                break;
+            case KEYCODE.LEFT:
+            case KEYCODE.UP:
+                currentfocus--;
+                break;
+            default:
+                break;
+        }
+        currentfocus =
+            currentfocus >= max ? 0 : currentfocus < 0 ? max - 1 : currentfocus;
+        this.setState({ currentfocus }, () => {
+            const child = this.step.children[currentfocus];
+            if (!child) return;
+            const focusItem =
+                shape === 'arrow'
+                    ? child
+                    : child.querySelector('.next-step-item-body');
+            focusItem && focusItem.focus();
+        });
+        if (initPosition !== currentfocus) {
+            e.preventDefault();
+        }
+    };
+
     _getValidChildren(children) {
         const result = [];
         React.Children.forEach(children, child => {
@@ -149,26 +187,23 @@ export default class Step extends Component {
 
     render() {
         // eslint-disable-next-line
-        let {
-            prefix,
-            locale,
+        const {
             className,
             current,
-            direction,
             labelPlacement,
             shape,
-            children,
             readOnly,
             animation,
             itemRender,
             rtl,
             ...others
         } = this.props;
+        let { prefix, direction, children } = this.props;
         prefix = this.context.prefix || prefix;
         const { parentWidth, parentHeight } = this.state;
 
         // type不同对应的direction不同
-        direction = shape === 'arrow' ? 'horizontal' : direction;
+        direction = shape === 'arrow' ? 'hoz' : direction;
 
         // children去除null
         children = this._getValidChildren(children);
@@ -195,6 +230,8 @@ export default class Step extends Component {
                 parentHeight,
                 readOnly,
                 animation,
+                tabIndex: this.state.currentfocus === index ? '0' : '-1',
+                'aria-current': status === 'process' ? 'step' : null,
                 itemRender: child.props.itemRender
                     ? child.props.itemRender
                     : itemRender, // 优先使用Item的itemRender
@@ -221,10 +258,12 @@ export default class Step extends Component {
             others.dir = 'rtl';
         }
 
+        others.onKeyDown = makeChain(this.handleKeyDown, others.onKeyDown);
+
         return (
-            <div {...others} className={stepCls} ref={this._stepRefHandler}>
+            <ol {...others} className={stepCls} ref={this._stepRefHandler}>
                 {cloneChildren}
-            </div>
+            </ol>
         );
     }
 }