Add keyboard support.

examples/simple.js

@@ -40,7 +40,7 @@ class Test extends React.Component {
     for (let i = 0, len = 3; i < len; i++) {
       const key = i + 1;
       items.push(
-        <Panel header={`This is panel header ${key}`} key={key} disabled>
+        <Panel header={`This is panel header ${key}`} key={key} disabled={i === 0}>
           <p>{text.repeat(this.state.time)}</p>
         </Panel>
       );
@@ -55,6 +55,19 @@ class Test extends React.Component {
       </Panel>
     );
 
+    items.push(
+      <Panel header={`This is panel header 5`} key="5">
+        <Collapse defaultActiveKey="1">
+          <Panel header={`This is panel nest panel`} key="1" id="another-test">
+            <form>
+              <label htmlFor="test">Name:&nbsp;</label>
+              <input type="text" id="test"/>
+            </form>
+          </Panel>
+        </Collapse>
+      </Panel>
+    );
+
     return items;
   }
 
@@ -78,7 +91,7 @@ class Test extends React.Component {
 
   render() {
     const accordion = this.state.accordion;
-    const btn = accordion ? 'accordion' : 'collapse';
+    const btn = accordion ? 'Mode: accordion' : 'Mode: collapse';
     const activeKey = this.state.activeKey;
     return (<div style={{ margin: 20, width: 400 }}>
       <button onClick={this.reRender}>reRender</button>

src/Collapse.jsx

@@ -84,6 +84,7 @@ class Collapse extends Component {
         prefixCls,
         destroyInactivePanel,
         openAnimation: this.state.openAnimation,
+        accordion,
         children: child.props.children,
         onItemClick: disabled ? null : () => this.onClickItem(key),
       };
@@ -102,13 +103,13 @@ class Collapse extends Component {
   }
 
   render() {
-    const { prefixCls, className, style } = this.props;
+    const { prefixCls, className, style, accordion } = this.props;
     const collapseClassName = classNames({
       [prefixCls]: true,
       [className]: !!className,
     });
     return (
-      <div className={collapseClassName} style={style}>
+      <div className={collapseClassName} style={style} role={accordion ? 'tablist' : null}>
         {this.getItems()}
       </div>
     );

src/Panel.jsx

@@ -5,12 +5,25 @@ import PanelContent from './PanelContent';
 import Animate from 'rc-animate';
 
 class CollapsePanel extends Component {
+  constructor(props) {
+    super(props);
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+  }
+
   handleItemClick() {
     if (this.props.onItemClick) {
       this.props.onItemClick();
     }
   }
 
+  handleKeyPress(e) {
+    e.preventDefault();
+    if (e.charCode === 13 || e.charCode === 32) {
+      this.handleItemClick();
+    }
+  }
+
   render() {
     const {
       className,
@@ -24,6 +37,7 @@ class CollapsePanel extends Component {
       showArrow,
       destroyInactivePanel,
       disabled,
+      accordion,
       forceRender,
     } = this.props;
     const headerCls = classNames(`${prefixCls}-header`, {
@@ -35,12 +49,14 @@ class CollapsePanel extends Component {
       [`${prefixCls}-item-disabled`]: disabled,
     }, className);
     return (
-      <div className={itemCls} style={style} id={id} role="tablist">
+      <div className={itemCls} style={style} id={id} >
         <div
           className={headerCls}
-          onClick={this.handleItemClick.bind(this)}
-          role="tab"
+          onClick={this.handleItemClick}
+          role={accordion ? 'tab' : 'button'}
+          tabIndex={disabled ? -1 : 0}
           aria-expanded={isActive}
+          onKeyPress={this.handleKeyPress}
         >
           {showArrow && <i className="arrow" />}
           {header}
@@ -56,6 +72,7 @@ class CollapsePanel extends Component {
             isActive={isActive}
             destroyInactivePanel={destroyInactivePanel}
             forceRender={forceRender}
+            role={accordion ? 'tabpanel' : null}
           >
             {children}
           </PanelContent>
@@ -86,6 +103,7 @@ CollapsePanel.propTypes = {
   style: PropTypes.object,
   destroyInactivePanel: PropTypes.bool,
   disabled: PropTypes.bool,
+  accordion: PropTypes.bool,
   forceRender: PropTypes.bool,
 };
 

src/PanelContent.jsx

@@ -12,7 +12,7 @@ class PanelContent extends Component {
     if (!this._isActived) {
       return null;
     }
-    const { prefixCls, isActive, children, destroyInactivePanel, forceRender } = this.props;
+    const { prefixCls, isActive, children, destroyInactivePanel, forceRender, role } = this.props;
     const contentCls = classnames({
       [`${prefixCls}-content`]: true,
       [`${prefixCls}-content-active`]: isActive,
@@ -23,7 +23,7 @@ class PanelContent extends Component {
     return (
       <div
         className={contentCls}
-        role="tabpanel"
+        role={role}
       >{child}</div>
     );
   }
@@ -35,6 +35,7 @@ PanelContent.propTypes = {
   children: PropTypes.any,
   destroyInactivePanel: PropTypes.bool,
   forceRender: PropTypes.bool,
+  role: PropTypes.string,
 };
 
 export default PanelContent;

tests/index.spec.js

@@ -91,6 +91,16 @@ describe('collapse', () => {
         done();
       }, 500);
     });
+
+    it('should not have role', () => {
+      const item = findDOMNode(collapse, 'rc-collapse')[0];
+      expect(item.getAttribute('role')).to.eql(null);
+    });
+
+    it('should set button role on panel title', () => {
+      const item = findDOMNode(collapse, 'rc-collapse-header')[0];
+      expect(item.getAttribute('role')).to.eql('button');
+    });
   });
 
   describe('destroyInactivePanel', () => {
@@ -195,6 +205,26 @@ describe('collapse', () => {
         }, 500);
       }, 500);
     });
+
+    it('should add tab role on panel title', () => {
+      const item = findDOMNode(collapse, 'rc-collapse-header')[0];
+      expect(item.getAttribute('role')).to.eql('tab');
+    });
+
+    it('should add tablist role on accordion', () => {
+      const item = findDOMNode(collapse, 'rc-collapse')[0];
+      expect(item.getAttribute('role')).to.eql('tablist');
+    });
+
+    it('should add tablist role on PanelContent', (done) => {
+      const header = findDOMNode(collapse, 'rc-collapse-header')[0];
+      Simulate.click(header);
+      setTimeout(() => {
+        const item = findDOMNode(collapse, 'rc-collapse-content')[0];
+        expect(item.getAttribute('role')).to.eql('tabpanel');
+        done();
+      }, 500);
+    });
   });
 
   describe('forceRender', () => {