rc-tooltip - npm Package Compare versions

Comparing version 3.4.9 to 3.5.0

es/Tooltip.js

@@ -30,3 +30,4 @@ import _extends from 'babel-runtime/helpers/extends';
           overlay = _this$props.overlay,
-          prefixCls = _this$props.prefixCls;
+          prefixCls = _this$props.prefixCls,
+          id = _this$props.id;
 
@@ -39,3 +40,3 @@ return [React.createElement(
         'div',
-        { className: prefixCls + '-inner', key: 'content' },
+        { className: prefixCls + '-inner', key: 'content', id: id },
         typeof overlay === 'function' ? overlay() : overlay
@@ -128,3 +129,4 @@ )];
   align: PropTypes.object,
-  arrowContent: PropTypes.any
+  arrowContent: PropTypes.any,
+  id: PropTypes.string
 };
@@ -131,0 +133,0 @@ Tooltip.defaultProps = {

HISTORY.md

 # History
 ----
 
+### 3.5.0
+
+- Add id for ARIA.
+
 ### 3.4.4
@@ -5,0 +9,0 @@

lib/Tooltip.js

@@ -65,3 +65,4 @@ 'use strict';
           overlay = _this$props.overlay,
-          prefixCls = _this$props.prefixCls;
+          prefixCls = _this$props.prefixCls,
+          id = _this$props.id;
 
@@ -74,3 +75,3 @@ return [_react2['default'].createElement(
         'div',
-        { className: prefixCls + '-inner', key: 'content' },
+        { className: prefixCls + '-inner', key: 'content', id: id },
         typeof overlay === 'function' ? overlay() : overlay
@@ -162,3 +163,4 @@ )];
   align: _propTypes2['default'].object,
-  arrowContent: _propTypes2['default'].any
+  arrowContent: _propTypes2['default'].any,
+  id: _propTypes2['default'].string
 };
@@ -165,0 +167,0 @@ Tooltip.defaultProps = {

package.json

 {
   "name": "rc-tooltip",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "description": "React Tooltip",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -47,2 +47,7 @@ # rc-tooltip
 var ReactDOM = require('react-dom');
+
+// By default, the tooltip has no style.
+// Consider importing the stylesheet it comes with:
+// 'rc-tooltip/assets/bootstrap_white.css'
+
 ReactDOM.render(<Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}><a href='#'>hover</a></Tooltip>, container);
@@ -180,2 +185,8 @@ ```
         </tr>
+        <tr>
+          <td>id</td>
+          <td>String</td>
+          <td></td>
+          <td>Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.</td>
+        </tr>
     </tbody>
@@ -188,3 +199,16 @@ </table>
 
+## Accessibility
 
+For accessibility purpose you can use the `id` prop to link your tooltip with another element. For example attaching it to an input element:
+```jsx
+<Tooltip
+    ...
+    id={this.props.name}>
+    <input type="text"
+           ...
+           aria-describedby={this.props.name}/>
+</Tooltip>
+```
+If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.
+
 ## Development
@@ -191,0 +215,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

699292

increased by1.5%

Lines of code

8073

increased by2.35%

Number of lines in readme file

234

increased by11.43%

No dependency changes