Fixed #3288 - Fieldset: toggleButtonProps prop defect

primefaces · Nov 17, 2022 · 6665952 · 6665952
1 parent 70b8912
commit 6665952
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/components/fieldset/Fieldset.d.ts b/src/components/fieldset/Fieldset.d.ts
@@ -28,7 +28,7 @@ export interface FieldsetProps {
     /**
      * Uses to pass the custom value to read for the anchor inside the component.
      */
-    toggleButtonProps?: string | undefined;
+    toggleButtonProps?: object | undefined;
 }
 
 export interface FieldsetSlots {

diff --git a/src/components/fieldset/Fieldset.vue b/src/components/fieldset/Fieldset.vue
@@ -4,7 +4,19 @@
             <slot v-if="!toggleable" name="legend">
                 <span :id="ariaId + '_header'" class="p-fieldset-legend-text">{{ legend }}</span>
             </slot>
-            <a v-if="toggleable" :id="ariaId + '_header'" v-ripple tabindex="0" role="button" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" :aria-label="toggleButtonProps || legend" @click="toggle" @keydown="onKeyDown">
+            <a
+                v-if="toggleable"
+                :id="ariaId + '_header'"
+                v-ripple
+                tabindex="0"
+                role="button"
+                :aria-controls="ariaId + '_content'"
+                :aria-expanded="!d_collapsed"
+                :aria-label="buttonAriaLabel"
+                @click="toggle"
+                @keydown="onKeyDown"
+                v-bind="toggleButtonProps"
+            >
                 <span :class="iconClass"></span>
                 <slot name="legend">
                     <span class="p-fieldset-legend-text">{{ legend }}</span>
@@ -32,7 +44,10 @@ export default {
         legend: String,
         toggleable: Boolean,
         collapsed: Boolean,
-        toggleButtonProps: String
+        toggleButtonProps: {
+            type: null,
+            default: null
+        }
     },
     data() {
         return {
@@ -72,6 +87,9 @@ export default {
         },
         ariaId() {
             return UniqueComponentId();
+        },
+        buttonAriaLabel() {
+            return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.legend;
         }
     },
     directives: {

diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
@@ -99,7 +99,7 @@ import Fieldset from 'primevue/fieldset';
                     </tr>
                     <tr>
                         <td>toggleButtonProps</td>
-                        <td>string</td>
+                        <td>object</td>
                         <td>null</td>
                         <td>Uses to pass the custom value to read for the anchor inside the component.</td>
                     </tr>