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 1/2] 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 @@
-
+
- +
@if (settings.length) { -
-
- -
+ +
+
+ }
- + \ 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); From ca839dbe68d421befdc2bb15d1d4d9c472ca0932 Mon Sep 17 00:00:00 2001 From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com> Date: Thu, 15 Jan 2026 11:36:40 +0300 Subject: [PATCH 2/2] Add @angular/aria dependency to Angular packages Included @angular/aria version 21.0.0 as a dependency in Angular app and module templates, and as a peer dependency in the setting-management package. This ensures accessibility features are available and aligns with Angular 21 requirements. --- npm/ng-packs/packages/setting-management/package.json | 5 ++++- templates/app-nolayers/angular/package.json | 3 ++- templates/app/angular/package.json | 3 ++- templates/module/angular/package.json | 3 ++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/npm/ng-packs/packages/setting-management/package.json b/npm/ng-packs/packages/setting-management/package.json index 579c744222..7f514839e1 100644 --- a/npm/ng-packs/packages/setting-management/package.json +++ b/npm/ng-packs/packages/setting-management/package.json @@ -11,6 +11,9 @@ "@abp/ng.theme.shared": "~10.1.0-rc.1", "tslib": "^2.0.0" }, + "peerDependencies": { + "@angular/aria": "^21.0.0" + }, "publishConfig": { "access": "public" }, @@ -28,4 +31,4 @@ "csharp", "webapp" ] -} +} \ No newline at end of file diff --git a/templates/app-nolayers/angular/package.json b/templates/app-nolayers/angular/package.json index b1ea75904b..93db1446ad 100644 --- a/templates/app-nolayers/angular/package.json +++ b/templates/app-nolayers/angular/package.json @@ -22,6 +22,7 @@ "@abp/ng.theme.lepton-x": "~5.1.0-rc.1", "@abp/ng.theme.shared": "~10.1.0-rc.1", "@angular/animations": "~21.0.0", + "@angular/aria": "~21.0.0", "@angular/common": "~21.0.0", "@angular/compiler": "~21.0.0", "@angular/core": "~21.0.0", @@ -59,4 +60,4 @@ "karma-jasmine-html-reporter": "^1.7.0", "typescript": "~5.9.0" } -} +} \ No newline at end of file diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index e560238e6a..9710a598f6 100644 --- a/templates/app/angular/package.json +++ b/templates/app/angular/package.json @@ -22,6 +22,7 @@ "@abp/ng.theme.lepton-x": "~5.1.0-rc.1", "@abp/ng.theme.shared": "~10.1.0-rc.1", "@angular/animations": "~21.0.0", + "@angular/aria": "~21.0.0", "@angular/common": "~21.0.0", "@angular/compiler": "~21.0.0", "@angular/core": "~21.0.0", @@ -59,4 +60,4 @@ "karma-jasmine-html-reporter": "^1.7.0", "typescript": "~5.9.3" } -} +} \ No newline at end of file diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index aac3293e2a..b386586560 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -23,6 +23,7 @@ "@abp/ng.theme.basic": "~10.1.0-rc.1", "@abp/ng.theme.shared": "~10.1.0-rc.1", "@angular/animations": "~21.0.0", + "@angular/aria": "~21.0.0", "@angular/common": "~21.0.0", "@angular/compiler": "~21.0.0", "@angular/core": "~21.0.0", @@ -61,4 +62,4 @@ "symlink": "^2.0.0", "typescript": "~5.9.0" } -} +} \ No newline at end of file