[fixed] Accessibility: Panel header uses aria-controls

viktorrusakov · Jun 18, 2015 · ccc50e0 · ccc50e0
1 parent 1e552cc
commit ccc50e0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/src/Panel.js b/src/Panel.js
@@ -176,6 +176,7 @@ const Panel = React.createClass({
     return (
       <a
         href={'#' + (this.props.id || '')}
+        aria-controls={this.props.collapsible ? this.props.id : null}
         className={this.isExpanded() ? null : 'collapsed'}
         aria-expanded={this.isExpanded() ? 'true' : 'false'}
         onClick={this.handleSelect}>

diff --git a/test/PanelSpec.js b/test/PanelSpec.js
@@ -123,26 +123,6 @@ describe('Panel', function () {
     assert.ok(anchor.className.match(/\bcollapsed\b/));
   });
 
-  it('Should be aria-expanded=true', 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');
-  });
-
   it('Should call onSelect handler', function (done) {
     function handleSelect (e, key) {
       assert.equal(key, '1');
@@ -204,4 +184,40 @@ describe('Panel', function () {
     assert.equal(children[0].nodeName, 'TABLE');
     assert.notOk(children[0].className.match(/\bpanel-body\b/));
   });
+
+  describe('Web Accessibility', function(){
+
+    it('Should be aria-expanded=true', 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');
+    });
+
+    it('Should add aria-controls with id', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Panel id='panel-1' collapsible expanded 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('id'), 'panel-1');
+      assert.equal(anchor.getAttribute('aria-controls'), 'panel-1');
+    });
+
+  });
 });