From 87adc14c1cf7d2791ddbb7b5d3781e6c8d9fa262 Mon Sep 17 00:00:00 2001
From: KgTong <kgtong1992@gmail.com>
Date: Sun, 13 May 2018 21:18:58 +0800
Subject: [PATCH] Fix(inputitem): add wai-aria suppport for the money type
 InputItem

The money type InputItem is simulated with the div tag, rather than the origin
input tag. To support wai-aria needs a little more work, for the div tag, by addging
role of `textbox` make div perform like input in aria mode

For the CustomKeyboard, it will lead to wrong focus when not adding aria
supoort for backspace and keyboard canceling

Fixed: #2419, #2418
---
 components/input-item/CustomInput.tsx    | 14 +++++++++++++-
 components/input-item/CustomKeyboard.tsx | 11 ++++++++++-
 components/input-item/index.tsx          | 13 +++++++++++--
 components/input-item/locale/en_US.tsx   |  2 ++
 components/input-item/locale/ru_RU.tsx   |  2 ++
 components/input-item/locale/sv_SE.tsx   |  2 ++
 components/input-item/locale/zh_CN.tsx   |  2 ++
 7 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/components/input-item/CustomInput.tsx b/components/input-item/CustomInput.tsx
index e55eb8dafbe..28007a910d2 100644
--- a/components/input-item/CustomInput.tsx
+++ b/components/input-item/CustomInput.tsx
@@ -20,6 +20,8 @@ export interface NumberInputProps {
   onFocus?: InputEventHandler;
   onBlur?: InputEventHandler;
   confirmLabel: any;
+  backspaceLabel: any;
+  cancelKeyboardLabel: any;
   maxLength?: number;
   type?: string;
   style?: React.CSSProperties;
@@ -88,13 +90,21 @@ class NumberInput extends React.Component<NumberInputProps, any> {
   }
 
   getComponent() {
-    const { keyboardPrefixCls, confirmLabel } = this.props;
+    const {
+      confirmLabel,
+      backspaceLabel,
+      keyboardPrefixCls,
+      cancelKeyboardLabel,
+    } = this.props;
+
     return (
       <CustomKeyboard
         ref={this.saveRef}
         onClick={this.onKeyboardClick}
         preixCls={keyboardPrefixCls}
         confirmLabel={confirmLabel}
+        backspaceLabel={backspaceLabel}
+        cancelKeyboardLabel={cancelKeyboardLabel}
       />
     );
   }
@@ -294,6 +304,8 @@ class NumberInput extends React.Component<NumberInputProps, any> {
           <div className="fake-input-placeholder">{placeholder}</div>
         )}
         <div
+          role="textbox"
+          aria-label={value || placeholder}
           className={fakeInputCls}
           ref={el => (this.inputRef = el)}
           onClick={preventKeyboard ? () => {} : this.onFakeInputClick}
diff --git a/components/input-item/CustomKeyboard.tsx b/components/input-item/CustomKeyboard.tsx
index 9f91f3a30dd..7959b373352 100644
--- a/components/input-item/CustomKeyboard.tsx
+++ b/components/input-item/CustomKeyboard.tsx
@@ -96,7 +96,12 @@ class CustomKeyboard extends React.Component<any, any> {
     );
   }
   render() {
-    const { prefixCls, confirmLabel } = this.props;
+    const {
+      prefixCls,
+      confirmLabel,
+      backspaceLabel,
+      cancelKeyboardLabel,
+    } = this.props;
 
     const wrapperCls = classnames(
       `${prefixCls}-wrapper`,
@@ -113,6 +118,8 @@ class CustomKeyboard extends React.Component<any, any> {
                 this.renderKeyboardItem(item, index),
               )}
               <KeyboardItem
+                role="button"
+                aria-label={backspaceLabel}
                 className="keyboard-delete"
                 rowSpan={2}
                 onClick={this.onKeyboardClick}
@@ -144,6 +151,8 @@ class CustomKeyboard extends React.Component<any, any> {
                 this.renderKeyboardItem(item, index),
               )}
               <KeyboardItem
+                role="button"
+                aria-label={cancelKeyboardLabel}
                 className="keyboard-hide"
                 onClick={this.onKeyboardClick}
               />
diff --git a/components/input-item/index.tsx b/components/input-item/index.tsx
index 8b6c53f5caa..daf1679493a 100644
--- a/components/input-item/index.tsx
+++ b/components/input-item/index.tsx
@@ -224,9 +224,16 @@ class InputItem extends React.Component<InputItemProps, any> {
       () => require('./locale/zh_CN'),
     );
 
-    const { confirmLabel } = _locale;
+    const {
+      focus,
+      placeholder,
+    } = this.state;
 
-    const { placeholder, focus } = this.state;
+    const {
+      confirmLabel,
+      backspaceLabel,
+      cancelKeyboardLabel,
+    } = _locale;
 
     const wrapCls = classnames(
       `${prefixListCls}-item`,
@@ -297,6 +304,8 @@ class InputItem extends React.Component<InputItemProps, any> {
                 prefixCls={prefixCls}
                 style={style}
                 confirmLabel={confirmLabel}
+                backspaceLabel={backspaceLabel}
+                cancelKeyboardLabel={cancelKeyboardLabel}
                 moneyKeyboardAlign={moneyKeyboardAlign}
               />
             ) : (
diff --git a/components/input-item/locale/en_US.tsx b/components/input-item/locale/en_US.tsx
index 3481600007a..d965453cb52 100644
--- a/components/input-item/locale/en_US.tsx
+++ b/components/input-item/locale/en_US.tsx
@@ -1,3 +1,5 @@
 export default {
   confirmLabel: 'Done',
+  backspaceLabel: 'Backspace',
+  cancelKeyboardLabel: 'CancelKeyboard',
 };
diff --git a/components/input-item/locale/ru_RU.tsx b/components/input-item/locale/ru_RU.tsx
index 2339823d719..a2640eb91f9 100644
--- a/components/input-item/locale/ru_RU.tsx
+++ b/components/input-item/locale/ru_RU.tsx
@@ -1,3 +1,5 @@
 export default {
   confirmLabel: 'сделанный',
+  backspaceLabel: 'возврат на одну позицию',
+  cancelKeyboardLabel: 'Отменить клавиатуру',
 };
diff --git a/components/input-item/locale/sv_SE.tsx b/components/input-item/locale/sv_SE.tsx
index 500952517dd..7ea54356324 100644
--- a/components/input-item/locale/sv_SE.tsx
+++ b/components/input-item/locale/sv_SE.tsx
@@ -1,3 +1,5 @@
 export default {
   confirmLabel: 'Ok',
+  backspaceLabel: 'Backspace',
+  cancelKeyboardLabel: 'CancelKeyboard',
 };
diff --git a/components/input-item/locale/zh_CN.tsx b/components/input-item/locale/zh_CN.tsx
index 2fe615734f0..4d064e8bf45 100644
--- a/components/input-item/locale/zh_CN.tsx
+++ b/components/input-item/locale/zh_CN.tsx
@@ -1,3 +1,5 @@
 export default {
   confirmLabel: '确定',
+  backspaceLabel: '退格',
+  cancelKeyboardLabel: '撤销键盘',
 };