Fixed #10666 - Autocomplete - aria-label for dropdown

primefaces · Sep 24, 2021 · 29f01ab · 29f01ab
1 parent c7e5d53
commit 29f01ab
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -37,7 +37,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                             aria-autocomplete="list" [attr.aria-controls]="listId" role="searchbox" [attr.aria-expanded]="overlayVisible" aria-haspopup="true" [attr.aria-activedescendant]="'p-highlighted-option'">
                 </li>
             </ul>
-            <i *ngIf="loading" class="p-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple
+            <i *ngIf="loading" class="p-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" [attr.aria-label]="dropdownAriaLabel" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple
                 (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>
             <div #panel *ngIf="overlayVisible" (click)="onOverlayClick($event)" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
                 [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
@@ -157,6 +157,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     @Input() ariaLabel: string;
 
+    @Input() dropdownAriaLabel: string;
+
     @Input() ariaLabelledBy: string;
 
     @Input() dropdownIcon: string = "pi pi-chevron-down";

diff --git a/src/app/showcase/components/autocomplete/autocompletedemo.html b/src/app/showcase/components/autocomplete/autocompletedemo.html
@@ -477,6 +477,12 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Specifies one or more IDs in the DOM that labels the input field.</td>
                         </tr>
+                        <tr>
+                            <td>dropdownAriaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines a string that labels the dropdown button for accessibility.</td>
+                        </tr>
                         <tr>
                             <td>unique</td>
                             <td>boolean</td>