[added] accessibility props for PanelGroup and Panels.

Signed-off-by: Kenny Wang <kwang@pivotal.io>
kyletsang · Aug 20, 2015 · 769781d · 769781d
1 parent 136d442
commit 769781d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 18 deletions.
diff --git a/src/Panel.js b/src/Panel.js
@@ -60,26 +60,32 @@ const Panel = React.createClass({
   },
 
   render() {
+    let {headerRole, panelRole, ...props} = this.props;
     return (
-      <div {...this.props}
+      <div {...props}
         className={classNames(this.props.className, this.getBsClassSet())}
         id={this.props.collapsible ? null : this.props.id} onSelect={null}>
-        {this.renderHeading()}
-        {this.props.collapsible ? this.renderCollapsibleBody() : this.renderBody()}
+        {this.renderHeading(headerRole)}
+        {this.props.collapsible ? this.renderCollapsibleBody(panelRole) : this.renderBody()}
         {this.renderFooter()}
       </div>
     );
   },
 
-  renderCollapsibleBody() {
-    let collapseClass = this.prefixClass('collapse');
+  renderCollapsibleBody(panelRole) {
+    let props = {
+      className: this.prefixClass('collapse'),
+      id: this.props.id,
+      ref: 'panel',
+      'aria-hidden': !this.isExpanded()
+    };
+    if (panelRole) {
+      props.role = panelRole;
+    }
 
     return (
       <Collapse in={this.isExpanded()}>
-        <div
-          className={collapseClass}
-          id={this.props.id}
-          ref='panel'>
+        <div {...props}>
           {this.renderBody()}
 
         </div>
@@ -148,7 +154,7 @@ const Panel = React.createClass({
     return React.isValidElement(child) && child.props.fill != null;
   },
 
-  renderHeading() {
+  renderHeading(headerRole) {
     let header = this.props.header;
 
     if (!header) {
@@ -157,7 +163,7 @@ const Panel = React.createClass({
 
     if (!React.isValidElement(header) || Array.isArray(header)) {
       header = this.props.collapsible ?
-        this.renderCollapsibleTitle(header) : header;
+        this.renderCollapsibleTitle(header, headerRole) : header;
     } else {
       const className = classNames(
         this.prefixClass('title'), header.props.className
@@ -166,7 +172,7 @@ const Panel = React.createClass({
       if (this.props.collapsible) {
         header = cloneElement(header, {
           className,
-          children: this.renderAnchor(header.props.children)
+          children: this.renderAnchor(header.props.children, headerRole)
         });
       } else {
         header = cloneElement(header, {className});
@@ -180,23 +186,25 @@ const Panel = React.createClass({
     );
   },
 
-  renderAnchor(header) {
+  renderAnchor(header, headerRole) {
     return (
       <a
         href={'#' + (this.props.id || '')}
         aria-controls={this.props.collapsible ? this.props.id : null}
         className={this.isExpanded() ? null : 'collapsed'}
         aria-expanded={this.isExpanded()}
-        onClick={this.handleSelect}>
+        aria-selected={this.isExpanded()}
+        onClick={this.handleSelect}
+        role={headerRole}>
         {header}
       </a>
     );
   },
 
-  renderCollapsibleTitle(header) {
+  renderCollapsibleTitle(header, headerRole) {
     return (
       <h4 className={this.prefixClass('title')}>
-        {this.renderAnchor(header)}
+        {this.renderAnchor(header, headerRole)}
       </h4>
     );
   },

diff --git a/src/PanelGroup.js b/src/PanelGroup.js
@@ -35,9 +35,11 @@ const PanelGroup = React.createClass({
 
   render() {
     let classes = this.getBsClassSet();
+    let {className, ...props} = this.props;
+    if (this.props.accordion) { props.role = 'tablist'; }
     return (
-      <div {...this.props} className={classNames(this.props.className, classes)} onSelect={null}>
-        {ValidComponentChildren.map(this.props.children, this.renderPanel)}
+      <div {...props} className={classNames(className, classes)} onSelect={null}>
+        {ValidComponentChildren.map(props.children, this.renderPanel)}
       </div>
     );
   },
@@ -53,6 +55,8 @@ const PanelGroup = React.createClass({
     };
 
     if (this.props.accordion) {
+      props.headerRole = 'tab';
+      props.panelRole = 'tabpanel';
       props.collapsible = true;
       props.expanded = (child.props.eventKey === activeKey);
       props.onSelect = this.handleSelect;

diff --git a/test/PanelGroupSpec.js b/test/PanelGroupSpec.js
@@ -47,4 +47,58 @@ describe('PanelGroup', function () {
 
     assert.notOk(panel.state.collapsing);
   });
+
+  describe('Web Accessibility', function() {
+    let instance, panelBodies, panelGroup, links;
+
+    beforeEach(function() {
+      instance = ReactTestUtils.renderIntoDocument(
+        <PanelGroup defaultActiveKey='1' accordion>
+          <Panel header='Collapsible Group Item #1' eventKey='1' id='Panel1ID'>Panel 1</Panel>
+          <Panel header='Collapsible Group Item #2' eventKey='2' id='Panel2ID'>Panel 2</Panel>
+        </PanelGroup>
+      );
+      let accordion = ReactTestUtils.findRenderedComponentWithType(instance, PanelGroup);
+      panelGroup = ReactTestUtils.findRenderedDOMComponentWithClass(accordion, 'panel-group');
+      panelBodies = ReactTestUtils.scryRenderedDOMComponentsWithClass(panelGroup, 'panel-collapse');
+      links = ReactTestUtils.scryRenderedDOMComponentsWithClass(panelGroup, 'panel-heading')
+        .map(function(header) {
+          return ReactTestUtils.findRenderedDOMComponentWithTag(header, 'a');
+        });
+    });
+
+    it('Should have a role of tablist', function() {
+      assert.equal(panelGroup.props.role, 'tablist');
+    });
+
+    it('Should provide each header tab with role of tab', function() {
+      assert.equal(links[0].props.role, 'tab');
+      assert.equal(links[1].props.role, 'tab');
+    });
+
+    it('Should provide the panelBodies with role of tabpanel', function() {
+      assert.equal(panelBodies[0].props.role, 'tabpanel');
+    });
+
+    it('Should provide each panel with an aria-labelledby referencing the corresponding header', function() {
+      assert.equal(panelBodies[0].props.id, links[0].props['aria-controls']);
+      assert.equal(panelBodies[1].props.id, links[1].props['aria-controls']);
+    });
+
+    it('Should maintain each tab aria-selected state', function() {
+      assert.equal(links[0].props['aria-selected'], true);
+      assert.equal(links[1].props['aria-selected'], false);
+    });
+
+    it('Should maintain each tab aria-hidden state', function() {
+      assert.equal(panelBodies[0].props['aria-hidden'], false);
+      assert.equal(panelBodies[1].props['aria-hidden'], true);
+    });
+
+    afterEach(function() {
+      if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
+        React.unmountComponentAtNode(React.findDOMNode(instance));
+      }
+    });
+  });
 });