feat(Progress): progress accessibility support

alibaba-fusion · Dec 29, 2018 · 524e97f · 524e97f
1 parent 8275c91
commit 524e97f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/progress/view/progress-circle.jsx b/src/progress/view/progress-circle.jsx
@@ -100,7 +100,15 @@ export default class Circle extends Component {
         });
 
         return (
-            <div {...others} className={wrapCls} dir={rtl ? 'rtl' : undefined}>
+            <div
+                className={wrapCls}
+                dir={rtl ? 'rtl' : undefined}
+                tabIndex="0"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                {...others}>
                 <svg className={`${prefix}progress-circle-container`} viewBox={viewBox}>
                     <path className={`${prefix}progress-circle-underlay`} d={underlayPath} fillOpacity="0" ref={this._underlayRefHandler} />
                     <path

diff --git a/src/progress/view/progress-line.jsx b/src/progress/view/progress-line.jsx
@@ -13,6 +13,8 @@ export default class Line extends React.PureComponent {
         textRender: PropTypes.func,
         color: PropTypes.string,
         rtl: PropTypes.bool,
+        prefix: PropTypes.string,
+        className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     };
 
     render() {
@@ -22,6 +24,7 @@ export default class Line extends React.PureComponent {
             textRender, className, rtl,
             ...others } = this.props;
 
+
         const suffixText = textRender(percent, {rtl});
 
         const wrapCls = classNames({
@@ -42,7 +45,15 @@ export default class Line extends React.PureComponent {
         const lineStyle = { width: `${percent}%`, backgroundColor: color };
 
         return (
-            <div {...others} className={wrapCls} dir={rtl ? 'rtl' : undefined}>
+            <div
+                dir={rtl ? 'rtl' : undefined}
+                tabIndex="0"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                {...others}
+                className={wrapCls}>
                 <div className={`${prefix}progress-line-container`}>
                     <div className={`${prefix}progress-line-underlay`}>
                         <div className={lineCls} style={lineStyle}></div>