From 48d26708d35f3cc80e2502c68d193a2fced5cd59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Fri, 24 Sep 2021 12:45:29 +0300
Subject: [PATCH] Fixed #10667 - Picklist | aria-label support for Buttons

---
 src/app/components/picklist/picklist.ts       | 40 +++++++++-----
 .../components/picklist/picklistdemo.html     | 52 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
index 201aa9cb32c..0ebc2b163ae 100755
--- a/src/app/components/picklist/picklist.ts
+++ b/src/app/components/picklist/picklist.ts
@@ -12,10 +12,10 @@ import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
     template: `
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-picklist p-component'" cdkDropListGroup>
             <div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls">
-                <button type="button" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" [attr.aria-label]="topButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" [attr.aria-label]="downButtonAriaLabel" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" [attr.aria-label]="bottomButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
                 <div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
@@ -49,10 +49,10 @@ import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-transfer-buttons">
-                <button type="button" pButton pRipple icon="pi pi-angle-right" [disabled]="disabled" (click)="moveRight()"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-right" [disabled]="disabled" (click)="moveAllRight()"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-left" [disabled]="disabled" (click)="moveLeft()"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-left" [disabled]="disabled" (click)="moveAllLeft()"></button>
+                <button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple icon="pi pi-angle-right" [disabled]="disabled" (click)="moveRight()"></button>
+                <button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-right" [disabled]="disabled" (click)="moveAllRight()"></button>
+                <button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple icon="pi pi-angle-left" [disabled]="disabled" (click)="moveLeft()"></button>
+                <button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-left" [disabled]="disabled" (click)="moveAllLeft()"></button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
                 <div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
@@ -85,10 +85,10 @@ import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls">
-                <button type="button" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" [attr.aria-label]="topButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" [attr.aria-label]="downButtonAriaLabel" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" [attr.aria-label]="bottomButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
             </div>
         </div>
     `,
@@ -107,6 +107,22 @@ export class PickList implements AfterViewChecked,AfterContentInit {
 
     @Input() sourceHeader: string;
 
+    @Input() rightButtonAriaLabel: string;
+
+    @Input() leftButtonAriaLabel: string;
+
+    @Input() allRightButtonAriaLabel: string;
+
+    @Input() allLeftButtonAriaLabel: string;
+
+    @Input() upButtonAriaLabel: string;
+
+    @Input() downButtonAriaLabel: string;
+
+    @Input() topButtonAriaLabel: string;
+
+    @Input() bottomButtonAriaLabel: string;
+
     @Input() targetHeader: string;
 
     @Input() responsive: boolean;
diff --git a/src/app/showcase/components/picklist/picklistdemo.html b/src/app/showcase/components/picklist/picklistdemo.html
index 3a57f322904..0a6af3a596c 100755
--- a/src/app/showcase/components/picklist/picklistdemo.html
+++ b/src/app/showcase/components/picklist/picklistdemo.html
@@ -273,6 +273,54 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Defines a string that labels the filter input of target list.</td>
                         </tr>
+                        <tr>
+                            <td>rightButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to right button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>leftButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to left button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>allRightButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to all right button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>allLeftButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to all left button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>upButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to up button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>downButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to down button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>topButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to top button for accessibility.</td>
+                        </tr>
+                        <tr>
+                            <td>bottomButtonAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the move to bottom button for accessibility.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -492,9 +540,9 @@ <h5>Dependencies</h5>
 export class PickListDemo &#123;
 
     sourceProducts: Product[];
-    
+
     targetProducts: Product[];
-    
+
     constructor(private carService: ProductService) &#123; &#125;
 
     ngOnInit() &#123;