Fixed #201

primefaces · Dec 2, 2017 · 0d55cf3 · 0d55cf3
1 parent f234a67
commit 0d55cf3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/src/components/fieldset/Fieldset.css b/src/components/fieldset/Fieldset.css
@@ -1,11 +1,17 @@
-.ui-fieldset, .ui-fieldset .ui-fieldset-legend {
-    padding: 0.6em 1em;
+.ui-fieldset, 
+.ui-fieldset .ui-fieldset-legend {
+    padding: 0.5em 1em;
 }
 
 .ui-fieldset-toggleable .ui-fieldset-legend {
-    padding: 0.5em 1em 0.5em 0.5em;
+    padding: 0;
+}
+
+.ui-fieldset-toggleable .ui-fieldset-legend a {
+    padding: 0.5em 1em;
     cursor:pointer;
     white-space: nowrap;
+    display: block;
 }
 
 .ui-fieldset .ui-fieldset-toggler {
@@ -14,8 +20,8 @@
     vertical-align: middle;
 }
 
-.ui-fieldset .ui-fieldset-content-wrapper-overflown {
-    overflow: hidden;
+.ui-fieldset .ui-fieldset-legend-text {
+    vertical-align: middle;
 }
 
 .ui-fieldset-content-wrapper-collapsed {

diff --git a/src/components/fieldset/Fieldset.js b/src/components/fieldset/Fieldset.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DomHandler from '../utils/DomHandler';
+import UniqueComponentId from '../utils/UniqueComponentId';
 
 export class Fieldset extends Component {
 
@@ -33,6 +34,10 @@ export class Fieldset extends Component {
         this.toggle = this.toggle.bind(this);
     }
 
+    componentWillMount() {
+        this.id = this.props.id || UniqueComponentId();
+    }
+
     componentDidUpdate() {
         if(this.props.toggleable && !this.state.collapsed && this.expanding) {
             DomHandler.addClass(this.contentWrapper, 'ui-fieldset-content-wrapper-expanding');
@@ -83,25 +88,43 @@ export class Fieldset extends Component {
             'ui-fieldset-content-wrapper-collapsed': (this.state.collapsed && this.props.toggleable),
             'ui-fieldset-content-wrapper-expanded': (!this.state.collapsed && this.props.toggleable)
         });
+        let id = this.id + '_content';
 
         return (
-            <div ref={(el) => this.contentWrapper = el} className={className}>
+            <div ref={(el) => this.contentWrapper = el} className={className} id={id} aria-hidden={this.state.collapsed} role="region">
                 <div className="ui-fieldset-content">
                     {this.props.children}
                 </div>
             </div>
         );
     }
 
+    renderToggleIcon() {
+        if(this.props.toggleable) {
+            let className = classNames('ui-fieldset-toggler fa fa-fw', { 'fa-plus': this.state.collapsed, 'fa-minus': !this.state.collapsed });
+
+            return (
+                <span className={className}></span>
+            );
+        }
+        else {
+            return null;
+        }
+    }
+
     render() {
         let content = this.renderContent();
         let className = classNames('ui-fieldset ui-widget ui-widget-content ui-corner-all', this.props.className, {'ui-fieldset-toggleable': this.props.toggleable});
+        let toggleIcon = this.renderToggleIcon();
+        let ariaControls = this.id + '_content';
 
         return (
             <fieldset id={this.props.id} className={className} style={this.props.style}>
                 <legend className="ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text" onClick={this.toggle}>
-                    {this.props.toggleable && <span className={classNames('ui-fieldset-toggler fa fa-fw', {'fa-plus': this.state.collapsed, 'fa-minus': !this.state.collapsed})}></span>}
-                    {this.props.legend}
+                    <a href="#" aria-controls={ariaControls} aria-expanded={!this.state.collapsed} tabIndex={this.props.toggleable ? null  : -1}>
+                        {toggleIcon}
+                        <span className="ui-fieldset-legend-text">{this.props.legend}</span>
+                    </a>
                 </legend>
                 {content}
             </fieldset>