Merge pull request #63 from react-component/support-aria

support accessibility
react-component · Apr 24, 2017 · fb10618 · fb10618
2 parents 74f523e + fef42e0
commit fb10618
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/index.ios.js b/src/index.ios.js
@@ -126,6 +126,10 @@ const InputNumber = createReactClass({
         <TouchableWithoutFeedback
           onPressIn={(editable && !downDisabledStyle) ? this.onPressInDown : undefined}
           onPressOut={(editable && !downDisabledStyle) ? this.onPressOutDown : undefined}
+          accessible
+          accessibilityLabel="Decrease Value"
+          accessibilityComponentType="button"
+          accessibilityTraits={(editable && !downDisabledStyle) ? 'button' : 'disabled'}
         >
           <View
             ref={component => this._stepDown = component}
@@ -152,6 +156,10 @@ const InputNumber = createReactClass({
         <TouchableWithoutFeedback
           onPressIn={(editable && !upDisabledStyle) ? this.onPressInUp : undefined}
           onPressOut={(editable && !upDisabledStyle) ? this.onPressOutUp : undefined}
+          accessible
+          accessibilityLabel="Increase Value"
+          accessibilityComponentType="button"
+          accessibilityTraits={(editable && !upDisabledStyle) ? 'button' : 'disabled'}
         >
           <View
             ref={component => this._stepUp = component}

diff --git a/src/index.js b/src/index.js
@@ -195,7 +195,8 @@ const InputNumber = createReactClass({
       };
     }
     const inputDisplayValueFormat = this.formatWrapper(inputDisplayValue);
-
+    const isUpDisabled = !!upDisabledClass || disabled || readOnly;
+    const isDownDisabled = !!downDisabledClass || disabled || readOnly;
     // ref for test
     return (
       <div
@@ -209,10 +210,13 @@ const InputNumber = createReactClass({
         <div className={`${prefixCls}-handler-wrap`}>
           <InputHandler
             ref="up"
-            disabled={!!upDisabledClass || disabled || readOnly}
+            disabled={isUpDisabled}
             prefixCls={prefixCls}
             unselectable="unselectable"
             {...upEvents}
+            role="button"
+            aria-label="Increase Value"
+            aria-disabled={!!isUpDisabled}
             className={`${prefixCls}-handler ${prefixCls}-handler-up ${upDisabledClass}`}
           >
             {this.props.upHandler || <span
@@ -223,10 +227,13 @@ const InputNumber = createReactClass({
           </InputHandler>
           <InputHandler
             ref="down"
-            disabled={!!downDisabledClass || disabled || readOnly}
+            disabled={isDownDisabled}
             prefixCls={prefixCls}
             unselectable="unselectable"
             {...downEvents}
+            role="button"
+            aria-label="Decrease Value"
+            aria-disabled={!!isDownDisabled}
             className={`${prefixCls}-handler ${prefixCls}-handler-down ${downDisabledClass}`}
           >
             {this.props.downHandler || <span
@@ -236,7 +243,13 @@ const InputNumber = createReactClass({
             />}
           </InputHandler>
         </div>
-        <div className={`${prefixCls}-input-wrap`}>
+        <div
+          className={`${prefixCls}-input-wrap`}
+          role="spinbutton"
+          aria-valuemin={props.min}
+          aria-valuemax={props.max}
+          aria-valuenow={value}
+        >
           <input
             type={props.type}
             placeholder={props.placeholder}