Fixed #3289 - Panel: toggleButtonProps prop defect

primefaces · Nov 17, 2022 · 259b908 · 259b908
1 parent 6665952
commit 259b908
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/panel/Panel.d.ts b/src/components/panel/Panel.d.ts
@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface PanelToggleEvent {
@@ -28,7 +28,7 @@ export interface PanelProps {
     /**
      * Uses to pass the custom value to read for the button inside the component.
      */
-    toggleButtonProps?: string | undefined;
+    toggleButtonProps?: ButtonHTMLAttributes | undefined;
 }
 
 export interface PanelSlots {

diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
@@ -13,11 +13,12 @@
                     type="button"
                     role="button"
                     class="p-panel-header-icon p-panel-toggler p-link"
-                    :aria-label="toggleButtonProps || header"
+                    :aria-label="buttonAriaLabel"
                     :aria-controls="ariaId + '_content'"
                     :aria-expanded="!d_collapsed"
                     @click="toggle"
                     @keydown="onKeyDown"
+                    v-bind="toggleButtonProps"
                 >
                     <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
                 </button>
@@ -81,6 +82,9 @@ export default {
         },
         containerClass() {
             return ['p-panel p-component', { 'p-panel-toggleable': this.toggleable }];
+        },
+        buttonAriaLabel() {
+            return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
         }
     },
     directives: {

diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
@@ -115,7 +115,7 @@ import Panel from 'primevue/panel';
                     </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 button inside the component.</td>
                     </tr>