From 14f284cedf7bdd4160fa332e2e3bb588108a43e5 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Mon, 12 Jan 2026 15:15:06 +0300
Subject: [PATCH] Refactor setting management to use @angular/aria tabs

Replaces custom tab implementation in the setting management component with @angular/aria's Tabs, TabList, Tab, and TabPanel components. Updates the template and adds necessary styles and module imports for improved accessibility and maintainability. Also adds @angular/aria as a dependency in package.json.
---
 npm/ng-packs/package.json                     |  3 +-
 .../setting-management.component.html         | 38 +++++++------------
 .../setting-management.component.ts           |  8 +++-
 3 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json
index c5c3b698c7..e01812626e 100644
--- a/npm/ng-packs/package.json
+++ b/npm/ng-packs/package.json
@@ -56,6 +56,7 @@
     "@angular-eslint/eslint-plugin-template": "~21.0.0",
     "@angular-eslint/template-parser": "~21.0.0",
     "@angular/animations": "21.0.0",
+    "@angular/aria": "~21.0.0",
     "@angular/build": "~21.0.0",
     "@angular/cli": "~21.0.0",
     "@angular/common": "~21.0.0",
@@ -147,4 +148,4 @@
   "dependencies": {
     "openid-client": "^6.6.4"
   }
-}
+}
\ No newline at end of file
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
index 0ffdd873c8..07830f2d1f 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
@@ -2,41 +2,29 @@
   <div id="SettingManagementWrapper">
     <div class="card">
       <div class="card-body">
-        <div class="row">
+        <div class="row" ngTabs>
           <div class="col-12 col-md-3 mb-2 mb-md-0">
-            <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
+            <div class="nav flex-column nav-pills" id="nav-tab" ngTabList orientation="vertical"
+              [selectedTab]="selected?.name">
               <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-                <li
-                  (click)="selected = setting"
-                  class="nav-item pointer"
-                  *abpPermission="setting.requiredPolicy"
-                >
-                  <a
-                    class="nav-link"
-                    [id]="setting.name + '-tab'"
-                    role="tab"
-                    [class.active]="setting.name === selected.name"
-                    >{{ setting.name | abpLocalization }}</a
-                  >
-                </li>
+                <button ngTab #tab="ngTab" [value]="setting.name" (click)="selected = setting"
+                  class="nav-link text-start" [class.active]="tab.selected()" *abpPermission="setting.requiredPolicy">
+                  {{ setting.name | abpLocalization }}
+                </button>
               </ng-container>
-            </ul>
+            </div>
           </div>
           <div class="col-12 col-md-9">
             @if (settings.length) {
-              <div class="tab-content pt-0">
-                <div
-                  class="tab-pane fade show active"
-                  [id]="selected.name + '-tab'"
-                  role="tabpanel"
-                >
-                  <ng-container *ngComponentOutlet="selected.component" />
-                </div>
+            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
+              <div ngTabPanel [value]="setting.name" class="tab-pane" *abpPermission="setting.requiredPolicy">
+                <ng-container *ngComponentOutlet="setting.component" />
               </div>
+            </ng-container>
             }
           </div>
         </div>
       </div>
     </div>
   </div>
-</abp-page>
+</abp-page>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts
index 1cec644ed6..2bf5e684e4 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts
@@ -4,11 +4,17 @@ import { Component, inject, OnDestroy, OnInit, TrackByFunction } from '@angular/
 import { Subscription } from 'rxjs';
 import { NgComponentOutlet } from '@angular/common';
 import { PageComponent } from '@abp/ng.components/page';
+import { Tab, Tabs, TabList, TabPanel } from '@angular/aria/tabs';
 
 @Component({
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
-  imports: [NgComponentOutlet, PageComponent, LocalizationPipe, PermissionDirective, ForDirective],
+  imports: [NgComponentOutlet, PageComponent, LocalizationPipe, PermissionDirective, ForDirective, Tabs, TabList, Tab, TabPanel],
+  styles: [`
+    :host [ngTabPanel][inert] {
+      display: none;
+    }
+  `],
 })
 export class SettingManagementComponent implements OnDestroy, OnInit {
   private settingTabsService = inject(SettingTabsService);