Fixed #4470

primefaces · Nov 23, 2017 · 5c53117 · 5c53117
1 parent 9949923
commit 5c53117
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/app/components/fieldset/fieldset.css b/src/app/components/fieldset/fieldset.css
@@ -20,6 +20,10 @@
     vertical-align: middle;
 }
 
+.ui-fieldset .ui-fieldset-legend-text {
+    vertical-align: middle;
+}
+
 .ui-fieldset .ui-fieldset-content-wrapper-overflown {
     overflow: hidden;
 } 
diff --git a/src/app/components/fieldset/fieldset.ts b/src/app/components/fieldset/fieldset.ts
@@ -11,15 +11,11 @@ let idx: number = 0;
     template: `
         <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">
+                <a href="#" (click)="toggle($event)" [attr.aria-controls]="id + '-content'" [attr.aria-expanded]="!collapsed" [attr.tabindex]="toggleable ? null : -1">
                     <span class="ui-fieldset-toggler fa fa-w" [ngClass]="{'fa-minus': !collapsed,'fa-plus':collapsed}"></span>
-                    {{legend}}
+                    <span class="ui-fieldset-legend-text">{{legend}}</span>
                     <ng-content select="p-header"></ng-content>
                 </a>
-                <ng-container *ngIf="!toggleable">
-                    {{legend}}
-                    <ng-content select="p-header"></ng-content>
-                </ng-container>
             </legend>
             <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"

diff --git a/src/app/showcase/components/fieldset/fieldsetdemo.html b/src/app/showcase/components/fieldset/fieldsetdemo.html
@@ -15,6 +15,9 @@
     </p-fieldset>
     <br>
     <p-fieldset legend="Toggleable" [toggleable]="true">
+        <p-header>
+            Prime
+        </p-header>
         The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
         His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
         Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,