From 55afab7ac6d59335100768db255348c992433032 Mon Sep 17 00:00:00 2001
From: Taneli Tuomola <taneli.tuomola@ruokavirasto.fi>
Date: Tue, 12 Mar 2024 11:36:19 +0200
Subject: [PATCH] fix #14944 picklist listbox aria-labelledby

---
 src/app/components/picklist/picklist.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
index b4e24350d34..7f21dfc3826 100755
--- a/src/app/components/picklist/picklist.ts
+++ b/src/app/components/picklist/picklist.ts
@@ -112,7 +112,7 @@ import {
                 </button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-source-wrapper" [attr.data-pc-section]="'sourceWrapper'" [attr.data-pc-group-section]="'listWrapper'">
-                <div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate" [attr.data-pc-section]="'sourceHeader'" [attr.data-pc-group-section]="'header'">
+                <div [id]="idSource + '_header'" class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate" [attr.data-pc-section]="'sourceHeader'" [attr.data-pc-group-section]="'header'">
                     <div class="p-picklist-title" *ngIf="!sourceHeaderTemplate">{{ sourceHeader }}</div>
                     <ng-container *ngTemplateOutlet="sourceHeaderTemplate"></ng-container>
                 </div>
@@ -145,6 +145,7 @@ import {
                     #sourcelist
                     class="p-picklist-list p-picklist-source"
                     [id]="idSource + '_list'"
+                    [attr.aria-labelledby]="idSource + '_header'"
                     (keydown)="onItemKeyDown($event, selectedItemsSource, onSourceSelect, SOURCE_LIST)"
                     (focus)="onListFocus($event, SOURCE_LIST)"
                     (blur)="onListBlur($event, SOURCE_LIST)"
@@ -221,7 +222,7 @@ import {
                 </button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-target-wrapper" [attr.data-pc-section]="'targetWrapper'" [attr.data-pc-group-section]="'listwrapper'">
-                <div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate" [attr.data-pc-section]="'targetHead'" [attr.data-pc-group-section]="'header'">
+                <div [id]="idTarget + '_header'" class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate" [attr.data-pc-section]="'targetHead'" [attr.data-pc-group-section]="'header'">
                     <div class="p-picklist-title" *ngIf="!targetHeaderTemplate">{{ targetHeader }}</div>
                     <ng-container *ngTemplateOutlet="targetHeaderTemplate"></ng-container>
                 </div>
@@ -253,6 +254,7 @@ import {
                     #targetlist
                     class="p-picklist-list p-picklist-target"
                     [id]="idTarget + '_list'"
+                    [attr.aria-labelledby]="idTarget + '_header'"
                     (keydown)="onItemKeyDown($event, selectedItemsTarget, onTargetSelect, TARGET_LIST)"
                     (focus)="onListFocus($event, TARGET_LIST)"
                     (blur)="onListBlur($event, TARGET_LIST)"