Angular Aria Implementation for ABP Packages - Issue 24684

[fahrigedik]

Resolves #24684 (write the related issue number if available)

Angular Aria Implementation for ABP Packages

This PR introduces Angular Aria directives to improve accessibility across several ABP Angular packages.

Packages Affected

1. @abp/ng.feature-management

• Feature Management Tabs: Refactored feature-management.component.html to use Angular Aria ngTabs (Vertical).
• Replaced ngbNav with ngTabs structure.
• Implemented selectionMode="follow" for better keyboard navigation.

2. @abp/ng.identity

• Users Component (Modal): Refactored tab structure in user edit modal to use ngTabs.
• Ensured default tab selection (User Information) upon opening the modal.
• Updated logic to use string-based values ('0', '1') compatible with Angular Aria.

3. @abp/ng.permission-management

• Permission Tree: Replaced Bootstrap nav-pills with Angular Aria ngTabs (Vertical).
• Implemented onTabChange method to bridge the gap between string-based tab selection and object-based Permission Group state.
• Preserved existing "Select All" functionality within tabs.

4. @abp/ng.setting-management

• Settings Tabs: Upgraded settings layout to use ngTabs.

Technical Details

• Added @angular/aria as a peerDependency to relevant packages (identity, permission-management, theme-basic, setting-management).
• Ensured keyboard navigation support (Arrow keys) for Tabs and Menus.

How to test it?

you have to change branch issue-24684 on abp
you have to run dev-app and test it.
note : you have to remove symlinks files.

[Copilot]

Pull request overview

This PR implements Angular Aria directives across multiple ABP Angular packages to improve accessibility by replacing ng-bootstrap navigation components with Angular Aria tabs. The changes affect feature-management, identity, permission-management, and setting-management packages.

Changes:

• Added @angular/aria as a peer dependency to four packages
• Replaced ng-bootstrap ngbNav components with Angular Aria ngTabs in feature-management, identity, and permission-management
• Updated CSS selectors to match the new div-based tab structure instead of ul/li elements
• Implemented keyboard navigation support through selectionMode="follow"

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
npm/ng-packs/packages/setting-management/package.json	Added @angular/aria peer dependency with exact version
npm/ng-packs/packages/permission-management/package.json	Added @angular/aria peer dependency
npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts	Imported Angular Aria tab components, updated CSS selectors from ul to .nav-pills, added onTabChange method
npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html	Refactored from ngbNav to ngTabs with vertical orientation, duplicated tab panel content for each group
npm/ng-packs/packages/identity/package.json	Added @angular/aria peer dependency
npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts	Imported Angular Aria tab components, added selectedTab property, initialized to '0' in openModal
npm/ng-packs/packages/identity/src/lib/components/users/users.component.html	Replaced ngbNav with ngTabs using string-based tab values
npm/ng-packs/packages/feature-management/package.json	Added @angular/aria peer dependency
npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts	Imported Angular Aria tab components and NgStyle
npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html	Replaced ngbNav with ngTabs vertical layout, moved template positioning, duplicated tab panels for each group
npm/ng-packs/package.json	Changed @angular/aria from ~21.0.0 to exact 21.0.0 version

[Copilot]

The id attribute "select-all-in-this-tabs" is now used multiple times within the @for loop (once per tab panel). HTML id attributes must be unique within the document. Consider using a dynamic id like "select-all-in-tab-{{group.name}}" and update the corresponding label's for attribute to match.

Suggested change

	id="select-all-in-this-tabs"
	name="select-all-in-this-tabs"
	class="form-check-input"
	[(ngModel)]="selectThisTab"
	[disabled]="disableSelectAllTab"
	(click)="onClickSelectThisTab()"
	/>
	<label class="form-check-label" for="select-all-in-this-tabs">{{
	'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
	}}</label>
	[attr.id]="'select-all-in-tab-' + group.name"
	name="select-all-in-this-tabs"
	class="form-check-input"
	[(ngModel)]="selectThisTab"
	[disabled]="disableSelectAllTab"
	(click)="onClickSelectThisTab()"
	/>
	<label
	class="form-check-label"
	[attr.for]="'select-all-in-tab-' + group.name"
	>{{
	'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
	}}</label
	>

[Copilot]

The button element with ngTab directive should include an explicit type="button" attribute to prevent it from being treated as a submit button within a form context. While this is shown in line 66, verify that all tab buttons consistently specify type="button".

Suggested change

	<button ngTab #tab="ngTab" [value]="group.displayName" class="nav-link text-start" [class.active]="tab.selected()">
	<button ngTab #tab="ngTab" type="button" [value]="group.displayName" class="nav-link text-start" [class.active]="tab.selected()">

[oykuermann]

waiting for https://github.com/volosoft/volo/pull/21504#pullrequestreview-3706242630