Add support for aria- and role props #159

example/src/index.js

@@ -117,7 +117,7 @@ const Test = React.createClass({
             <div className="example-jsx">
               <div className="side"><a data-tip data-for='global'> σ`∀´)σ </a></div>
               <div className="side"><a data-tip data-for='global'> (〃∀〃) </a></div>
-              <ReactTooltip id='global'>
+              <ReactTooltip id='global' aria-haspopup="true" role="example">
                 <p>This is a global react component tooltip</p>
                 <p>You can put every thing here</p>
                 <ul>
@@ -131,7 +131,7 @@ const Test = React.createClass({
               <div>
                 <p>{"<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
                   "<a data-tip data-for='global'> (〃∀〃) </a>\n" +
-                  "<ReactTooltip id='global'>\n" +
+                  "<ReactTooltip id='global' aria-haspopup='true' role='example'>\n" +
                     " <p>This is a global react component tooltip</p>\n" +
                     " <p>You can put every thing here</p>\n" +
                     " <ul>\n" +

src/index.js

@@ -13,6 +13,7 @@ import isCapture from './decorators/isCapture'
 /* Utils */
 import getPosition from './utils/getPosition'
 import getTipContent from './utils/getTipContent'
+import { parseAria } from './utils/aria'
 
 /* CSS */
 import cssStyle from './style'
@@ -59,7 +60,8 @@ class ReactTooltip extends Component {
       event: props.event || null,
       eventOff: props.eventOff || null,
       currentEvent: null, // Current mouse event
-      currentTarget: null // Current target of mouse event
+      currentTarget: null, // Current target of mouse event
+      ariaProps: parseAria(props) // aria- and role attributes
     }
 
     this.bind([
@@ -91,6 +93,18 @@ class ReactTooltip extends Component {
     this.bindWindowEvents() // Bind global event for static method
   }
 
+  componentWillReceiveProps (props) {
+    const { ariaProps } = this.state
+    const newAriaProps = parseAria(props)
+
+    const isChanged = Object.keys(newAriaProps).some(props => {
+      return newAriaProps[props] !== ariaProps[props]
+    })
+    if (isChanged) {
+      this.setState({ ariaProps: newAriaProps })
+    }
+  }
+
   componentWillUnmount () {
     this.mount = false
 
@@ -343,7 +357,7 @@ class ReactTooltip extends Component {
   }
 
   render () {
-    const {placeholder, extraClass, html} = this.state
+    const {placeholder, extraClass, html, ariaProps} = this.state
     let tooltipClass = classname(
       '__react_component_tooltip',
       {'show': this.state.show},
@@ -363,12 +377,14 @@ class ReactTooltip extends Component {
     if (html) {
       return (
         <div className={`${tooltipClass} ${extraClass}`}
+          {...ariaProps}
           data-id='tooltip'
           dangerouslySetInnerHTML={{__html: placeholder}}></div>
       )
     } else {
       return (
         <div className={`${tooltipClass} ${extraClass}`}
+          {...ariaProps}
           data-id='tooltip'>{placeholder}</div>
       )
     }

src/utils/aria.js

@@ -0,0 +1,17 @@
+/**
+ * Support aria- and role in ReactTooltip
+ *
+ * @params props {Object}
+ * @return {Object}
+ */
+export function parseAria (props) {
+  let ariaObj = {}
+  Object.keys(props).filter(prop => {
+    // aria-xxx and role is acceptable
+    return /(^aria-\w+$|^role$)/.test(prop)
+  }).forEach(prop => {
+    ariaObj[prop] = props[prop]
+  })
+
+  return ariaObj
+}