Focus and Screen Reader Accessibility Issue in p-dropdown Without Filter Attribute

[Icorebleidd]

Description:
I am experiencing an accessibility issue with the p-dropdown component in PrimeNG. When the filter attribute is not used, the focus is not available for the list items, and the aria-label associated with them is not read by screen readers. This issue affects the usability of the dropdown for users relying on screen readers.

Steps to Reproduce:

1. Create a p-dropdown component without the filter attribute.
2. Open the dropdown and attempt to navigate through the list items using the keyboard.
3. Observe that the focus is not available for the list items, and the aria-labels are not read by screen readers.

Expected Behavior:
The list items in the p-dropdown should be focusable, and the aria-labels should be read by screen readers, even when the filter attribute is not used.

Actual Behavior:
Without the filter attribute, the list items are not focusable, and the aria-labels are not read by screen readers.

Not focusing Code:

<div *ngIf="lang" class="container language-selector h-[32px]" [ngClass]="theme != 'light' ? theme : ''">    
    <p-dropdown [options]="langs" [(ngModel)]="lang" class="w-full h-[32px] max-w-[160px]" (onChange)="selectLang($event.value)" optionLabel="name" ariaLabel="Select a language, the selected language is {{lang.name}}" [panelStyleClass]="theme != 'light' ? theme : ''">
        <ng-template pTemplate="selectedItem">
            <div class="flex flex-row justify-between align-center h-full">
                <span class="pt-[4px] pl-[8px] pr-[2px] pb-[4px] flex-1 whitespace-nowrap overflow-hidden text-ellipsis" [tooltip]="lang.name">
                    <i class="fi fi-{{getIcon(lang.code)}} rounded-sm mr-1"></i>
                    {{lang.name}}
                </span>
                <fa-icon [icon]="['fal', 'angle-down']" class="selectIcon h-[30px] w-[30px] flex flex-row justify-center items-center text-[20px]"></fa-icon>
            </div>
        </ng-template>
        <ng-template let-l pTemplate="item">
            <div class="language-selector-item flex flex-row align-center justify-start">
                <i class="fi fi-{{getIcon(l.code)}} rounded-sm mr-2"></i>
                <span>{{l.name}}</span>
            </div>
        </ng-template>
    </p-dropdown>
</div>

Focusing Code

<div *ngIf="lang" class="container language-selector h-[32px]" [ngClass]="theme != 'light' ? theme : ''">    
    <p-dropdown [options]="langs" [(ngModel)]="lang" class="w-full h-[32px] max-w-[160px]" (onChange)="selectLang($event.value)" optionLabel="name" ariaLabel="Seleziona la lingua, la lingua selezionata è {{lang.name}}" [panelStyleClass]="theme != 'light' ? theme : ''" [filter]="true" filterBy="name">
        <ng-template pTemplate="selectedItem">
            <div class="flex flex-row justify-between align-center h-full">
                <span class="pt-[4px] pl-[8px] pr-[2px] pb-[4px] flex-1 whitespace-nowrap overflow-hidden text-ellipsis" [tooltip]="lang.name">
                    <i class="fi fi-{{getIcon(lang.code)}} rounded-sm mr-1"></i>
                    {{lang.name}}
                </span>
                <fa-icon [icon]="['fal', 'angle-down']" class="selectIcon h-[30px] w-[30px] flex flex-row justify-center items-center text-[20px]"></fa-icon>
            </div>
        </ng-template>
        <ng-template let-l pTemplate="item">
            <div class="language-selector-item flex flex-row align-center justify-start">
                <i class="fi fi-{{getIcon(l.code)}} rounded-sm mr-2"></i>
                <span>{{l.name}}</span>
            </div>
        </ng-template>
    </p-dropdown>
</div>

Additional Context:
This issue significantly impacts the accessibility of the p-dropdown component for users relying on screen readers. Ensuring that all interactive elements are focusable and properly labeled is crucial for accessibility compliance.