From c60dc038a402abf297fd83d5016554b2840d8fd1 Mon Sep 17 00:00:00 2001
From: August Toman-Yih <atomanyih@pivotal.io>
Date: Mon, 3 Aug 2015 11:53:00 -0700
Subject: [PATCH] [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 <kwang@pivotal.io>
---
 src/Collapse.js      |  9 +++++++--
 src/Panel.js         |  3 +--
 test/CollapseSpec.js | 20 ++++++++++++++++++++
 test/PanelSpec.js    |  4 ----
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index 2a632f55e9..ab8e4b652f 100644
--- a/src/Collapse.js
+++ b/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 = {
diff --git a/src/Panel.js b/src/Panel.js
index 7499aa8254..2e597fc509 100644
--- a/src/Panel.js
+++ b/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>
diff --git a/test/CollapseSpec.js b/test/CollapseSpec.js
index 0ac893fcf0..8b7f71509c 100644
--- a/test/CollapseSpec.js
+++ b/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');
+    });
+  });
 });
diff --git a/test/PanelSpec.js b/test/PanelSpec.js
index aba23266d0..0c9cfc09f1 100644
--- a/test/PanelSpec.js
+++ b/test/PanelSpec.js
@@ -191,9 +191,7 @@ 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');
     });
 
@@ -201,9 +199,7 @@ describe('Panel', 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');
     });