[fixed] only add aria-expanded to Collapse when an ARIA role is present

Also remove redundant aria-expanded from Panel collapsible body

Signed-off-by: Kenny Wang <[email protected]>

Author: August Toman-Yih

src/Collapse.js

@@ -48,7 +48,7 @@ class Collapse extends React.Component {
       <Transition
         ref='transition'
         {...this.props}
-        aria-expanded={this.props.in}
+        aria-expanded={this.props.role ? this.props.in : null}
         className={this._dimension() === 'width' ? 'width' : ''}
         exitedClassName='collapse'
         exitingClassName='collapsing'
@@ -184,7 +184,12 @@ Collapse.propTypes = {
    * should animate in its specified dimension. Called with the current
    * dimension prop value and the DOM node.
    */
-  getDimensionValue: React.PropTypes.func
+  getDimensionValue: React.PropTypes.func,
+
+  /**
+   * ARIA role of collapsible element
+   */
+  role: React.PropTypes.string
 };
 
 Collapse.defaultProps = {

src/Panel.js

@@ -79,8 +79,7 @@ const Panel = React.createClass({
         <div
           className={collapseClass}
           id={this.props.id}
-          ref='panel'
-          aria-expanded={this.isExpanded()}>
+          ref='panel'>
           {this.renderBody()}
 
         </div>

test/CollapseSpec.js

@@ -213,4 +213,24 @@ describe('Collapse', function () {
       assert.equal(instance.collapse._dimension(), 'whatevs');
     });
   });
+
+  describe('with a role', function() {
+    beforeEach(function(){
+      instance = ReactTestUtils.renderIntoDocument(
+        <Component role="note">Panel content</Component>
+      );
+    });
+
+    it('sets aria-expanded true when expanded', function() {
+      let node = React.findDOMNode(instance);
+      instance.setProps({ in: true});
+      assert.equal(node.getAttribute('aria-expanded'), 'true');
+    });
+
+    it('sets aria-expanded false when collapsed', function() {
+      let node = React.findDOMNode(instance);
+      instance.setProps({ in: false});
+      assert.equal(node.getAttribute('aria-expanded'), 'false');
+    });
+  });
 });

test/PanelSpec.js

@@ -191,19 +191,15 @@ describe('Panel', function () {
       let instance = ReactTestUtils.renderIntoDocument(
         <Panel collapsible={true} expanded={true} header="Heading">Panel content</Panel>
       );
-      let collapse = React.findDOMNode(instance).querySelector('.panel-collapse');
       let anchor = React.findDOMNode(instance).querySelector('.panel-title a');
-      assert.equal(collapse.getAttribute('aria-expanded'), 'true');
       assert.equal(anchor.getAttribute('aria-expanded'), 'true');
     });
 
     it('Should be aria-expanded=false', function () {
       let instance = ReactTestUtils.renderIntoDocument(
         <Panel collapsible={true} expanded={false} header="Heading">Panel content</Panel>
       );
-      let collapse = React.findDOMNode(instance).querySelector('.panel-collapse');
       let anchor = React.findDOMNode(instance).querySelector('.panel-title a');
-      assert.equal(collapse.getAttribute('aria-expanded'), 'false');
       assert.equal(anchor.getAttribute('aria-expanded'), 'false');
     });