Refactor setting management to use @angular/aria tabs - issue-24565

[fahrigedik]

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.

Ayarlar._.MyProjectName.webm

In the old version, we couldn't access the tab menu using the arrow keys and the tab key, but in the new version, we can.

Description

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

TODO: Describe what this PR has changed, add screenshot or animated GIF if available, write if it is a breaking change, and how to fix the breaking changes for existing applications if so.

How to test it?

you have to change branch issue-24565 on volo and abp repository.
you have to run dev app on volo

[sumeyyeKurtulus]

Hello @fahrigedik thank you checking this feature and adding an initial example.

We should declare the @angular/aria dependency as a peer dependency in the library and update the template dependencies separately in the same way. Other than that, this PR is mergable.

[Copilot]

Pull request overview

This PR refactors the setting management component to replace the custom tab implementation with @angular/aria's accessible tab components (Tabs, TabList, Tab, and TabPanel). The change improves keyboard navigation and screen reader support, addressing accessibility requirements.

Changes:

• Added @angular/aria dependency to all Angular template package.json files and the setting-management package
• Replaced custom tab markup with @angular/aria tab directives (ngTabs, ngTabList, ngTab, ngTabPanel)
• Added CSS to hide inactive tab panels using the [inert] attribute selector

Reviewed changes

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

Show a summary per file

File	Description
templates/module/angular/package.json	Adds @angular/aria dependency for module template projects
templates/app/angular/package.json	Adds @angular/aria dependency for app template projects
templates/app-nolayers/angular/package.json	Adds @angular/aria dependency for app-nolayers template projects
npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts	Imports @angular/aria tab components and adds styles to hide inert tab panels
npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html	Replaces custom tab implementation with @angular/aria tab directives
npm/ng-packs/packages/setting-management/package.json	Declares @angular/aria as a peer dependency
npm/ng-packs/package.json	Adds @angular/aria as a dev dependency for the monorepo

[Copilot]

The (click)="selected = setting" handler may be redundant since @angular/aria's Tab component should manage tab selection internally via the [selectedTab]="selected?.name" binding on the TabList. If the @angular/aria tabs properly sync with the selectedTab input, the manual click handler may cause unnecessary state updates. Consider removing the click handler and letting @angular/aria manage the selection state, or if manual tracking is needed, consider using a change event from the @angular/aria tabs instead.

Suggested change

	<button ngTab #tab="ngTab" [value]="setting.name" (click)="selected = setting"
	<button ngTab #tab="ngTab" [value]="setting.name"

[Copilot]

All tab panels are being rendered in the DOM regardless of whether they are selected, with visibility controlled by the [inert] attribute and CSS display: none. This means that all setting components are instantiated and initialized when the page loads, which could impact performance if there are many tabs or if the components are expensive to initialize. Consider whether @angular/aria supports lazy rendering of tab panels, or if the current approach is acceptable given the typical number of setting tabs.

Suggested change

	<div ngTabPanel [value]="setting.name" class="tab-pane" *abpPermission="setting.requiredPolicy">
	<ng-container *ngComponentOutlet="setting.component" />
	<div ngTabPanel [value]="setting.name" class="tab-pane" *abpPermission="setting.requiredPolicy">
	@if (selected?.name === setting.name) {
	<ng-container *ngComponentOutlet="setting.component" />
	}