diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index d2b249e923d..3eb2e472c04 100755 --- 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 index ce28618cce4..1f7a81af1e2 100755 --- 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 index cee7c80b204..f24d8fe4cb5 100755 --- 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 { -
+
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index 06a80caf2ed..8eac24027f6 100755 --- 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 index c327ccbd3ee..83fee50f5e7 100644 --- 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 index 70b3af85bba..8e85f9dc6ae 100755 --- 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 = {
-
+