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 adding 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
ant-design · May 13, 2018 · 7ccd3bb · 7ccd3bb
1 parent d2171f7
commit 7ccd3bb
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,5 @@
 export default {
   confirmLabel: '确定',
+  backspaceLabel: '退格',
+  cancelKeyboardLabel: '撤销键盘',
 };