diff --git a/packages/primeng/src/panel/panel.ts b/packages/primeng/src/panel/panel.ts
index 7c0b9911fdd..cc6a9dab06f 100755
--- a/packages/primeng/src/panel/panel.ts
+++ b/packages/primeng/src/panel/panel.ts
@@ -1,6 +1,6 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { CommonModule } from '@angular/common';
-import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { uuid } from '@primeuix/utils';
import { BlockableUI, Footer, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
@@ -139,7 +139,7 @@ export interface PanelHeaderIconsTemplateContext {
"
(@panelContent.done)="onToggleDone($event)"
>
-
+
@@ -315,6 +315,8 @@ export class Panel extends BaseComponent implements BlockableUI {
*/
@ContentChild('headericons') headericonsTemplate: TemplateRef
| undefined;
+ @ViewChild('contentWrapper') contentWrapperViewChild: ElementRef;
+
readonly id = uuid('pn_id_');
get buttonAriaLabel() {
@@ -355,17 +357,32 @@ export class Panel extends BaseComponent implements BlockableUI {
expand() {
this.collapsed = false;
this.collapsedChange.emit(this.collapsed);
+ this.updateTabIndex();
}
collapse() {
this.collapsed = true;
this.collapsedChange.emit(this.collapsed);
+ this.updateTabIndex();
}
getBlockableElement(): HTMLElement {
return this.el.nativeElement.children[0];
}
+ updateTabIndex() {
+ if (this.contentWrapperViewChild) {
+ const focusableElements = this.contentWrapperViewChild.nativeElement.querySelectorAll('input, button, select, a, textarea, [tabindex]:not([tabindex="-1"])');
+ focusableElements.forEach((element: HTMLElement) => {
+ if (this.collapsed) {
+ element.setAttribute('tabindex', '-1');
+ } else {
+ element.removeAttribute('tabindex');
+ }
+ });
+ }
+ }
+
onKeyDown(event) {
if (event.code === 'Enter' || event.code === 'Space') {
this.toggle(event);