Fixed #14358

primefaces · Feb 29, 2024 · c77dbbb · c77dbbb
1 parent 4e9ee35
commit c77dbbb
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -81,8 +81,8 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-required]="required"
-                [attr.aria-expanded]="overlayVisible"
-                [attr.aria-controls]="id + '_list'"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? id + '_list' : null"
                 [attr.aria-aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (input)="onInput($event)"
                 (keydown)="onKeyDown($event)"
@@ -155,8 +155,8 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                         [attr.aria-label]="ariaLabel"
                         [attr.aria-labelledby]="ariaLabelledBy"
                         [attr.aria-required]="required"
-                        [attr.aria-expanded]="overlayVisible"
-                        [attr.aria-controls]="id + '_list'"
+                        [attr.aria-expanded]="overlayVisible ?? false"
+                        [attr.aria-controls]="overlayVisible ? id + '_list' : null"
                         [attr.aria-aria-activedescendant]="focused ? focusedOptionId : undefined"
                         (input)="onInput($event)"
                         (keydown)="onKeyDown($event)"

diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
@@ -73,8 +73,8 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                     [attr.aria-required]="required"
                     aria-autocomplete="none"
                     aria-haspopup="dialog"
-                    [attr.aria-expanded]="overlayVisible"
-                    [attr.aria-controls]="panelId"
+                    [attr.aria-expanded]="overlayVisible ?? false"
+                    [attr.aria-controls]="overlayVisible ? panelId : null"
                     [attr.aria-labelledby]="ariaLabelledBy"
                     [attr.aria-label]="ariaLabel"
                     [value]="inputFieldValue"
@@ -103,8 +103,8 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                     type="button"
                     [attr.aria-label]="iconButtonAriaLabel"
                     aria-haspopup="dialog"
-                    [attr.aria-expanded]="overlayVisible"
-                    [attr.aria-controls]="panelId"
+                    [attr.aria-expanded]="overlayVisible ?? false"
+                    [attr.aria-controls]="overlayVisible ? panelId : null"
                     pButton
                     pRipple
                     *ngIf="showIcon && iconDisplay === 'button'"

diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts
@@ -243,8 +243,8 @@ export class CascadeSelectSub implements OnInit {
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 aria-haspopup="tree"
-                [attr.aria-expanded]="overlayVisible"
-                [attr.aria-controls]="id + '_tree'"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? id + '_tree' : null"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
@@ -267,7 +267,7 @@ export class CascadeSelectSub implements OnInit {
             </span>
         </ng-container>
 
-        <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.data-pc-section]="'dropdownIcon'" [attr.aria-hidden]="true">
+        <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'dropdownIcon'" [attr.aria-hidden]="true">
             <ChevronDownIcon *ngIf="!triggerIconTemplate" [styleClass]="'p-cascadeselect-trigger-icon'" />
             <span *ngIf="triggerIconTemplate" class="p-cascadeselect-trigger-icon">
                 <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>

diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
@@ -154,8 +154,8 @@ export class MultiSelectItem {
                     [attr.aria-label]="ariaLabel"
                     [attr.aria-labelledby]="ariaLabelledBy"
                     [attr.aria-haspopup]="'listbox'"
-                    [attr.aria-expanded]="overlayVisible"
-                    [attr.aria-controls]="id + '_list'"
+                    [attr.aria-expanded]="overlayVisible ?? false"
+                    [attr.aria-controls]="overlayVisible ? id + '_list' : null"
                     [attr.tabindex]="!disabled ? tabindex : -1"
                     [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                     (focus)="onInputFocus($event)"

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -4951,8 +4951,8 @@ export class ReorderableRow implements AfterViewInit {
                 class="p-column-filter-menu-button p-link"
                 aria-haspopup="true"
                 [attr.aria-label]="filterMenuButtonAriaLabel"
-                [attr.aria-controls]="overlayId"
-                [attr.aria-expanded]="overlayVisible"
+                [attr.aria-controls]="overlayVisible ? overlayId : null"
+                [attr.aria-expanded]="overlayVisible ?? false"
                 [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
                 (click)="toggleMenu()"
                 (keydown)="onToggleButtonKeyDown($event)"

diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts
@@ -39,9 +39,9 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                     (blur)="onBlur()"
                     (keydown)="onKeyDown($event)"
                     [attr.tabindex]="!disabled ? tabindex : -1"
-                    [attr.aria-controls]="listId"
+                    [attr.aria-controls]="overlayVisible ? listId : null"
                     [attr.aria-haspopup]="'tree'"
-                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-expanded]="overlayVisible ?? false"
                     [attr.aria-labelledby]="ariaLabelledBy"
                     [attr.aria-label]="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
                 />
@@ -70,7 +70,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                     </span>
                 </ng-container>
             </div>
-            <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible" [attr.aria-label]="'treeselect trigger'">
+            <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
                 <ChevronDownIcon *ngIf="!triggerIconTemplate" [styleClass]="'p-treeselect-trigger-icon'" />
                 <span *ngIf="triggerIconTemplate" class="p-treeselect-trigger-icon">
                     <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>