fix(Collapse): add aria-expanded attribute (#1657)

reactstrap · Oct 11, 2019 · 2fdf15a · 2fdf15a
1 parent 32f0c0d
commit 2fdf15a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/src/Collapse.js b/src/Collapse.js
@@ -127,6 +127,7 @@ class Collapse extends Component {
               style={{ ...childProps.style, ...style }}
               className={classes}
               ref={this.props.innerRef}
+              aria-expanded={isOpen ? 'true' : 'false'}
             >
               {children}
             </Tag>

diff --git a/src/__tests__/Collapse.spec.js b/src/__tests__/Collapse.spec.js
@@ -122,4 +122,12 @@ describe('Collapse', () => {
     expect(wrapper.state('height')).toBe(null);
     wrapper.unmount();
   });
+
+  it('should set aria-expanded', () => {
+    isOpen = false;
+    wrapper = mount(<Collapse isOpen={isOpen} />);
+    expect(wrapper.find('div').prop('aria-expanded')).toBe('false');
+    toggle();
+    expect(wrapper.find('div').prop('aria-expanded')).toBe('true');
+  });
 });
diff --git a/src/__tests__/UncontrolledCollapse.spec.js b/src/__tests__/UncontrolledCollapse.spec.js
@@ -95,4 +95,14 @@ describe('UncontrolledCollapse', () => {
 
     expect(UncontrolledCollapse.prototype.toggle.mock.calls.length).toBe(1);
   });
+
+  it('should set aria-expanded', () => {
+    const collapse = mount(<UncontrolledCollapse toggler="#toggler">Yo!</UncontrolledCollapse>);
+
+    expect(collapse.find('div').prop('aria-expanded')).toBe('false');
+    toggler.click();
+    collapse.update();
+
+    expect(collapse.find('div').prop('aria-expanded')).toBe('true');
+  });
 });