test(Balloon): passed a11y test cases

src/balloon/inner.jsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {func, obj} from '../util';
+import { func, obj } from '../util';
 import Icon from '../icon';
-import {normalMap, edgeMap} from './alignMap';
+import zhCN from '../locale/zh-cn';
+import { normalMap, edgeMap } from './alignMap';
 
 /**
  * Created by xiachi on 17/2/10.
  */
 
-const {noop} = func;
+const { noop } = func;
 
 class BalloonInner extends React.Component {
     static contextTypes = {
-        prefix: PropTypes.string
-    }
+        prefix: PropTypes.string,
+    };
     static propTypes = {
         prefix: PropTypes.string,
         rtl: PropTypes.bool,
@@ -27,20 +28,36 @@ class BalloonInner extends React.Component {
         align: PropTypes.string,
         type: PropTypes.string,
         isTooltip: PropTypes.bool,
-        pure: PropTypes.bool
-    }
+        locale: PropTypes.object,
+        pure: PropTypes.bool,
+    };
     static defaultProps = {
         prefix: 'next-',
         closable: true,
         onClose: noop,
+        locale: zhCN.Balloon,
         align: 'b',
         type: 'normal',
         alignEdge: false,
-        pure: false
+        pure: false,
     };
 
     render() {
-        const {prefix, closable, className, style, isTooltip, align, type, onClose, alignEdge, children, rtl, ...others} = this.props;
+        const {
+            prefix,
+            closable,
+            className,
+            style,
+            isTooltip,
+            align,
+            type,
+            onClose,
+            alignEdge,
+            children,
+            rtl,
+            locale,
+            ...others
+        } = this.props;
 
         const alignMap = alignEdge ? edgeMap : normalMap;
         let _prefix = prefix;
@@ -57,18 +74,32 @@ class BalloonInner extends React.Component {
             [`${_prefix}-medium`]: true,
             [`${_prefix}-${alignMap[align].arrow}`]: alignMap[align],
             [`${_prefix}-closable`]: closable,
-            [className]: className
+            [className]: className,
         });
 
-        return (<div role="tooltip" dir={rtl ? 'rtl' : undefined} className={classes} style={style} {...obj.pickOthers(Object.keys(BalloonInner.propTypes), others)}>
-            {
-                closable ?
-                    <a role="button" tabIndex="0" href="javascript:void(0);" className={`${_prefix}-close`}
-                        onClick={onClose}>
-                        <Icon type="close" size="small"/>
-                    </a> : null}
-            {children}
-        </div>);
+        return (
+            <div
+                role="tooltip"
+                dir={rtl ? 'rtl' : undefined}
+                className={classes}
+                style={style}
+                {...obj.pickOthers(Object.keys(BalloonInner.propTypes), others)}
+            >
+                {closable ? (
+                    <a
+                        role="button"
+                        aria-label={locale.close}
+                        tabIndex="0"
+                        href="javascript:void(0);"
+                        className={`${_prefix}-close`}
+                        onClick={onClose}
+                    >
+                        <Icon type="close" size="small" />
+                    </a>
+                ) : null}
+                {children}
+            </div>
+        );
     }
 }
 

src/locale/en-us.js

@@ -2,11 +2,14 @@ export default {
     momentLocale: 'en',
     Timeline: {
         expand: 'Expand',
-        fold: 'Fold'
+        fold: 'Fold',
+    },
+    Balloon: {
+        close: 'Close',
     },
     Card: {
         expand: 'Expand',
-        fold: 'Fold'
+        fold: 'Fold',
     },
     Calendar: {
         today: 'Today',
@@ -22,7 +25,7 @@ export default {
         prevDecade: 'Previous Decade',
         nextDecade: 'Next Decade',
         yearSelectAriaLabel: 'Select Year',
-        monthSelectAriaLabel: 'Select Month'
+        monthSelectAriaLabel: 'Select Month',
     },
     DatePicker: {
         placeholder: 'Select Date',
@@ -38,15 +41,15 @@ export default {
         endPlaceholder: 'End Date',
         hour: 'H',
         minute: 'M',
-        second: 'S'
+        second: 'S',
     },
     Dialog: {
         close: 'Close',
         ok: 'OK',
-        cancel: 'Cancel'
+        cancel: 'Cancel',
     },
     Message: {
-        closeAriaLabel: 'Close'
+        closeAriaLabel: 'Close',
     },
     Pagination: {
         prev: 'Previous',
@@ -58,16 +61,17 @@ export default {
         labelPrev: 'Previous page, current page {current}',
         labelNext: 'Next page, current page {current}',
         inputAriaLabel: 'Please enter what page to skip to',
-        selectAriaLabel: 'Please select how many items are displayed on each page',
-        pageSize: 'Items per page:'
+        selectAriaLabel:
+            'Please select how many items are displayed on each page',
+        pageSize: 'Items per page:',
     },
     Input: {
-        clear: 'Clear'
+        clear: 'Clear',
     },
     Select: {
         selectPlaceholder: 'Please Select',
         autoCompletePlaceholder: 'Please Input',
-        notFoundContent: 'No Options'
+        notFoundContent: 'No Options',
     },
     Table: {
         empty: 'No Data',
@@ -78,37 +82,38 @@ export default {
         expanded: 'Expanded',
         folded: 'Folded',
         filter: 'Filter',
-        selectAll: 'Select All'
+        selectAll: 'Select All',
     },
     TimePicker: {
         placeholder: 'Select Time',
         clear: 'Clear',
         hour: 'H',
         minute: 'M',
-        second: 'S'
+        second: 'S',
     },
     Transfer: {
         items: 'items',
         item: 'item',
         moveAll: 'Move All',
         searchPlaceholder: 'Please Input',
         moveToLeft: 'Uncheck Selected Elements',
-        moveToRight: 'Submit Selected Elements'
+        moveToRight: 'Submit Selected Elements',
     },
     Upload: {
         card: {
             cancel: 'Cancel',
-            addPhoto: 'Add Picture'
+            addPhoto: 'Add Picture',
         },
         drag: {
             text: 'Click or Drag the file to this area to upload',
-            hint: 'Support docx, xls, PDF, rar, zip, PNG, JPG and other files upload'
-        }
+            hint:
+                'Support docx, xls, PDF, rar, zip, PNG, JPG and other files upload',
+        },
     },
     Search: {
-        buttonText: 'Search'
+        buttonText: 'Search',
     },
     Tag: {
-        delete: 'Delete'
-    }
+        delete: 'Delete',
+    },
 };

src/locale/ja-jp.js

@@ -2,11 +2,14 @@ export default {
     momentLocale: 'ja',
     Timeline: {
         expand: '開く',
-        fold: '閉じる'
+        fold: '閉じる',
+    },
+    Balloon: {
+        close: '閉鎖する',
     },
     Card: {
         expand: '開く',
-        fold: '閉じる'
+        fold: '閉じる',
     },
     Calendar: {
         today: '本日',
@@ -22,7 +25,7 @@ export default {
         prevDecade: '前の十年',
         nextDecade: '次の十年',
         yearSelectAriaLabel: '年を選んで',
-        monthSelectAriaLabel: '月を選択し'
+        monthSelectAriaLabel: '月を選択し',
     },
     DatePicker: {
         placeholder: '日付けの選択',
@@ -38,15 +41,15 @@ export default {
         endPlaceholder: '最終日',
         hour: '時',
         minute: '分',
-        second: '秒'
+        second: '秒',
     },
     Dialog: {
         close: '閉鎖する',
         ok: '確認',
-        cancel: 'キャンセル'
+        cancel: 'キャンセル',
     },
     Message: {
-        closeAriaLabel: '閉鎖する'
+        closeAriaLabel: '閉鎖する',
     },
     Pagination: {
         prev: '前のページ',
@@ -59,15 +62,15 @@ export default {
         labelNext: '次のページ、当面の第{current}ページ',
         inputAriaLabel: '数ページまでジャンプしてください',
         selectAriaLabel: 'ページごとに数本表示してください',
-        pageSize: 'ページサイズ：'
+        pageSize: 'ページサイズ：',
     },
     Input: {
-        clear: 'クリア'
+        clear: 'クリア',
     },
     Select: {
         selectPlaceholder: '選択',
         autoCompletePlaceholder: '入力',
-        notFoundContent: '選択肢なし'
+        notFoundContent: '選択肢なし',
     },
     Table: {
         empty: 'データなし',
@@ -78,37 +81,37 @@ export default {
         expanded: '展開している',
         folded: '収まった',
         filter: 'フィルタ',
-        selectAll: '全選'
+        selectAll: '全選',
     },
     TimePicker: {
         placeholder: '時間の選択',
         clear: 'クリア',
         hour: '時',
         minute: '分',
-        second: '秒'
+        second: '秒',
     },
     Transfer: {
         items: '項目',
         item: '項目',
         moveAll: '全ての移動',
         searchPlaceholder: '入力',
         moveToLeft: '選択した要素のチェックを外します',
-        moveToRight: '選択した要素を送信'
+        moveToRight: '選択した要素を送信',
     },
     Upload: {
         card: {
             cancel: 'キャンセル',
-            addPhoto: '画像アップロード'
+            addPhoto: '画像アップロード',
         },
         drag: {
             text: '枠にドラッグしてアップロード',
-            hint: 'docx, xls, PDF, rar, zip, PNG, JPG 等がサポートしています'
-        }
+            hint: 'docx, xls, PDF, rar, zip, PNG, JPG 等がサポートしています',
+        },
     },
     Search: {
-        buttonText: 'サーチ'
+        buttonText: 'サーチ',
     },
     Tag: {
-        delete: 'デリート'
-    }
+        delete: 'デリート',
+    },
 };