Fixed #4377

primefaces · Nov 7, 2017 · d325a9d · d325a9d
1 parent ceabf5b
commit d325a9d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/src/app/components/fieldset/fieldset.css b/src/app/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 {

diff --git a/src/app/components/fieldset/fieldset.ts b/src/app/components/fieldset/fieldset.ts
@@ -4,18 +4,26 @@ import {CommonModule} from '@angular/common';
 import {SharedModule} from '../common/shared';
 import {BlockableUI} from '../common/blockableui';
 
+let idx: number = 0;
+
 @Component({
     selector: 'p-fieldset',
     template: `
-        <fieldset [ngClass]="{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}" [ngStyle]="style" [class]="styleClass">
-            <legend class="ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text" (click)="toggle($event)">
-                <span *ngIf="toggleable" class="ui-fieldset-toggler fa fa-w" [ngClass]="{'fa-minus': !collapsed,'fa-plus':collapsed}"></span>
-                {{legend}}
-                <ng-content select="p-header"></ng-content>
+        <fieldset [attr.id]="id" [ngClass]="{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}" [ngStyle]="style" [class]="styleClass">
+            <legend class="ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text">
+                <a href="#" (click)="toggle($event)" *ngIf="toggleable" [attr.aria-controls]="id + '-content'" [attr.aria-expanded]="!collapsed">
+                    <span class="ui-fieldset-toggler fa fa-w" [ngClass]="{'fa-minus': !collapsed,'fa-plus':collapsed}"></span>
+                    {{legend}}
+                    <ng-content select="p-header"></ng-content>
+                </a>
+                <ng-container *ngIf="!toggleable">
+                    {{legend}}
+                    <ng-content select="p-header"></ng-content>
+                </ng-container>
             </legend>
-            <div class="ui-fieldset-content-wrapper" [@fieldsetContent]="collapsed ? 'hidden' : 'visible'" 
-                        [ngClass]="{'ui-fieldset-content-wrapper-overflown': collapsed||animating}"
-                         (@fieldsetContent.done)="onToggleDone($event)">
+            <div [attr.id]="id + '-content'" class="ui-fieldset-content-wrapper" [@fieldsetContent]="collapsed ? 'hidden' : 'visible'" 
+                        [ngClass]="{'ui-fieldset-content-wrapper-overflown': collapsed||animating}" [attr.aria-hidden]="collapsed"
+                         (@fieldsetContent.done)="onToggleDone($event)" role="region">
                 <div class="ui-fieldset-content">
                     <ng-content></ng-content>
                 </div>
@@ -54,23 +62,24 @@ export class Fieldset implements BlockableUI {
     public animating: boolean;
 
     constructor(private el: ElementRef) {}
+
+    id: string = `ui-fieldset-${idx++}`;
 
     toggle(event) {
-        if(this.toggleable) {
-            if(this.animating) {
-                return false;
-            }
-
-            this.animating = true;
-            this.onBeforeToggle.emit({originalEvent: event, collapsed: this.collapsed});
-
-            if(this.collapsed)
-                this.expand(event);
-            else
-                this.collapse(event);
-
-            this.onAfterToggle.emit({originalEvent: event, collapsed: this.collapsed});   
+        if(this.animating) {
+            return false;
         }
+
+        this.animating = true;
+        this.onBeforeToggle.emit({originalEvent: event, collapsed: this.collapsed});
+
+        if(this.collapsed)
+            this.expand(event);
+        else
+            this.collapse(event);
+
+        this.onAfterToggle.emit({originalEvent: event, collapsed: this.collapsed});   
+        event.preventDefault();
     }
 
     expand(event) {