test(Rating): add a11y support for aria-label

rosky · Mar 7, 2019 · ce5b103 · ce5b103
1 parent a038186
commit ce5b103
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/src/locale/en-us.js b/src/locale/en-us.js
@@ -116,4 +116,7 @@ export default {
     Tag: {
         delete: 'Delete',
     },
+    Rating: {
+        description: 'Rating Options',
+    },
 };
diff --git a/src/locale/ja-jp.js b/src/locale/ja-jp.js
@@ -114,4 +114,7 @@ export default {
     Tag: {
         delete: 'デリート',
     },
+    Rating: {
+        description: '評価オプション',
+    },
 };
diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js
@@ -114,4 +114,7 @@ export default {
     Tag: {
         delete: '删除',
     },
+    Rating: {
+        description: '评分选项',
+    },
 };
diff --git a/src/locale/zh-tw.js b/src/locale/zh-tw.js
@@ -114,4 +114,7 @@ export default {
     Tag: {
         delete: '删除',
     },
+    Rating: {
+        description: '評分選項',
+    },
 };
diff --git a/src/rating/rating.jsx b/src/rating/rating.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon';
 import { func, KEYCODE, obj } from '../util';
+import zhCN from '../locale/zh-cn';
 
 const { noop, bindCtx } = func;
 const { ENTER, LEFT, UP, RIGHT, DOWN } = KEYCODE;
@@ -68,6 +69,10 @@ export default class Rating extends Component {
         className: PropTypes.string,
         id: PropTypes.string,
         rtl: PropTypes.bool,
+        /**
+         * 自定义国际化文案对象
+         */
+        locale: PropTypes.object,
     };
 
     static defaultProps = {
@@ -82,6 +87,7 @@ export default class Rating extends Component {
         iconType: 'favorites-filling',
         onChange: noop,
         onHoverChange: noop,
+        locale: zhCN.Rating,
     };
 
     static currentValue(min, max, hoverValue, stateValue) {
@@ -306,6 +312,7 @@ export default class Rating extends Component {
             disabled,
             readAs,
             rtl,
+            locale,
         } = this.props;
         const others = obj.pickOthers(Rating.propTypes, this.props);
         const { hoverValue, clicked } = this.state;
@@ -419,6 +426,8 @@ export default class Rating extends Component {
                 className={ratingCls}
                 onKeyDown={this.onKeyDown}
                 tabIndex="0"
+                role="group"
+                aria-label={locale.description}
             >
                 <div className={baseCls} {...finalProps}>
                     <div
@@ -431,19 +440,7 @@ export default class Rating extends Component {
                         className={`${prefix}rating-overlay`}
                         style={overlayStyle}
                     >
-                        <form action="#">
-                            {enableA11y ? (
-                                <div
-                                    role="group"
-                                    aria-labelledby={id}
-                                    aria-label="Rating Options"
-                                >
-                                    {overlay}
-                                </div>
-                            ) : (
-                                overlay
-                            )}
-                        </form>
+                        <form action="#">{overlay}</form>
                     </div>
                 </div>
                 {showGrade ? (