Skip to content

Commit

Permalink
Fixed #10667 - Picklist | aria-label support for Buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Sep 24, 2021
1 parent 29f01ab commit 48d2670
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 14 deletions.
40 changes: 28 additions & 12 deletions src/app/components/picklist/picklist.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
`,
Expand All @@ -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;
Expand Down
52 changes: 50 additions & 2 deletions src/app/showcase/components/picklist/picklistdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -492,9 +540,9 @@ <h5>Dependencies</h5>
export class PickListDemo &#123;

sourceProducts: Product[];

targetProducts: Product[];

constructor(private carService: ProductService) &#123; &#125;

ngOnInit() &#123;
Expand Down

0 comments on commit 48d2670

Please sign in to comment.