feat(Transfer): add a11y support for transfer

alibaba-fusion · Jan 31, 2019 · 4856363 · 4856363
1 parent f90a747
commit 4856363
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/src/locale/en-us.js b/src/locale/en-us.js
@@ -84,7 +84,9 @@ export default {
         items: 'items',
         item: 'item',
         moveAll: 'Move All',
-        searchPlaceholder: 'Please Input'
+        searchPlaceholder: 'Please Input',
+        moveToLeft: 'Uncheck Selected Elements',
+        moveToRight: 'Submit Selected Elements'
     },
     Upload: {
         card: {

diff --git a/src/locale/ja-jp.js b/src/locale/ja-jp.js
@@ -84,7 +84,9 @@ export default {
         items: '項目',
         item: '項目',
         moveAll: '全ての移動',
-        searchPlaceholder: '入力'
+        searchPlaceholder: '入力',
+        moveToLeft: '選択した要素のチェックを外します',
+        moveToRight: '選択した要素を送信'
     },
     Upload: {
         card: {

diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js
@@ -84,7 +84,9 @@ export default {
         items: '项',
         item: '项',
         moveAll: '移动全部',
-        searchPlaceholder: '请输入'
+        searchPlaceholder: '请输入',
+        moveToLeft: '撤销选中元素',
+        moveToRight: '提交选中元素'
     },
     Upload: {
         card: {

diff --git a/src/locale/zh-tw.js b/src/locale/zh-tw.js
@@ -84,7 +84,9 @@ export default {
         items: '項',
         item: '項',
         moveAll: '移動全部',
-        searchPlaceholder: '請輸入'
+        searchPlaceholder: '請輸入',
+        moveToLeft: '撤銷選中元素',
+        moveToRight: '提交選中元素'
     },
     Upload: {
         card: {

diff --git a/src/transfer/view/transfer.jsx b/src/transfer/view/transfer.jsx
@@ -408,16 +408,15 @@ class Transfer extends Component {
     }
 
     renderCenter() {
-        const { prefix, mode, operations, disabled, leftDisabled, rightDisabled } = this.props;
+        const { prefix, mode, operations, disabled, leftDisabled, rightDisabled, locale } = this.props;
         const { leftCheckedValue, rightCheckedValue } = this.state;
-
         return (
             <div className={`${prefix}transfer-operations`}>
                 {mode === 'simple' ? <Icon className={`${prefix}transfer-move`} size="large" type="switch" /> : [
-                    <Button key="l2r" className={`${prefix}transfer-operation`} type={leftCheckedValue.length ? 'primary' : 'normal'} disabled={leftDisabled || disabled || !leftCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'right')}>
+                    <Button aria-label={locale.moveToRight} key="l2r" className={`${prefix}transfer-operation`} type={leftCheckedValue.length ? 'primary' : 'normal'} disabled={leftDisabled || disabled || !leftCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'right')}>
                         {operations[0]}
                     </Button>,
-                    <Button key="r2l" className={`${prefix}transfer-operation`} type={rightCheckedValue.length ? 'primary' : 'normal'} disabled={rightDisabled || disabled || !rightCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'left')}>
+                    <Button aria-label={locale.moveToLeft} key="r2l" className={`${prefix}transfer-operation`} type={rightCheckedValue.length ? 'primary' : 'normal'} disabled={rightDisabled || disabled || !rightCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'left')}>
                         {operations[1]}
                     </Button>
                 ]}