From 349e49c4940b6b122be931a25693178dfd6b0d15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:03:50 +0300
Subject: [PATCH] Fixed #16972 | Panel: Panel Content focusable and announced
 by assistive technology even when collapsed

---
 packages/primeng/src/panel/panel.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

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)"
             >
-                <div class="p-panel-content">
+                <div class="p-panel-content" #contentWrapper>
                     <ng-content></ng-content>
                     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
                 </div>
@@ -315,6 +315,8 @@ export class Panel extends BaseComponent implements BlockableUI {
      */
     @ContentChild('headericons') headericonsTemplate: TemplateRef<PanelHeaderIconsTemplateContext> | 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);