Activities of "AlderCove"

I’ve reviewed the latest ABP documentation and samples, but couldn’t find guidance on extending LeptonX UI behavior for accessibility (keyboard interaction and ARIA support).

Context In the LeptonX UI layout, the left navigation menu includes a collapse icon (the small ) that narrows the sidebar to icon-only mode. When collapsed, it automatically expands again when hovered with the mouse.

However, this interaction currently depends entirely on mouse hover, which makes it inaccessible to keyboard and screen reader users. When the menu is collapsed, there’s no keyboard-focusable control available to re-expand it.

What I’m Trying to Achieve

I’d like to implement keyboard accessibility and ARIA support for the LeptonX sidebar collapse/expand toggle, in alignment with WCAG 2.1 AA requirements.

Specifically, the improvements should:

• Make the collapse icon keyboard focusable ( or role="button").
• Toggle the sidebar state on Enter/Space.
• Expose the menu’s state via aria-expanded="true|false".
• Keep a persistent, focusable toggle even when the sidebar is collapsed.
• Optionally expand the sidebar when it gains keyboard focus (to match hover behavior).

Current HTML Structure <lpx-icon iconclass="bi bi-filter-left" class="menu-collapse-icon hidden-in-hover-trigger" ng-reflect-icon-class="bi bi-filter-left"> <i aria-hidden="true" class="lpx-icon bi bi-filter-left"></i> </lpx-icon>

Goal Example (Accessible Version) <button type="button" class="menu-collapse-icon" [attr.aria-label]="isCollapsed ? 'Expand navigation' : 'Collapse navigation'" [attr.aria-expanded]="!isCollapsed" (click)="toggleSidebar()"> Where toggleSidebar() updates the isCollapsed state and toggles a CSS class on the sidebar container.

Request for Assistance Could you please advise on:

• The best practice or extension point in LeptonX layout to override or extend this behavior cleanly?
• Whether there’s a recommended way to customize or replace the collapse icon template within the lpx-layout component.
• If any ABP-provided directive/service already handles sidebar state so we can bind to it instead of reimplementing the logic.
• Any considerations to maintain compatibility with LeptonX hover-trigger behavior while adding focus-trigger support.

Environment Info ABP Framework Version: 9.x UI Framework: Angular (LeptonX Theme) Solution Type: Modular Monolith (ABP Commercial) Browser: Chrome 141 Accessibility Tools Used: NVDA, Axe, and WAVE

Steps to Reproduce

Run the Angular application with LeptonX theme. Collapse the left navigation using the collapse icon. Attempt to re-expand using only the keyboard — there’s no focusable element. Observe: menu can only expand on mouse hover, not via keyboard.

Expected Result

Keyboard users should be able to toggle the sidebar state using Tab + Enter/Space, and assistive technologies should receive correct aria-expanded and label updates.

• Template: app
• Created ABP Studio Version: 1.2.1
• Current ABP Studio Version: 1.2.1
• Tiered: Yes
• Multi-Tenancy: No
• UI Framework: angular
• Theme: leptonx
• Theme Style: system
• Theme Menu Placement: side
• Run Install Libs: Yes
• Progressive Web App: No
• Run Progressive Web App Support: No
• Database Provider: ef
• Database Management System: sqlserver
• Separate Tenant Schema: No
• Create Initial Migration: Yes
• Run Db Migrator: Yes
• Mobile Framework: none
• Public Website: No
• Social Login: No
• Include Tests: No
• Kubernetes Configuration: No
• Distributed Event Bus: none
• Use Local References: No
• Optional Modules:
  • GDPR
  • TextTemplateManagement
  • LanguageManagement
  • AuditLogging
  • OpenIddictAdmin
• Selected Languages: English, English (United Kingdom), Chinese (Simplified), Spanish, Arabic, Hindi , Portuguese (Brazil), French, Russian, German (Germany), Turkish, Italian, Czech, Hungarian, Romanian (Romania), Swedish, Finnish, Slovak, Icelandic, Chinese (Traditional)
• Default Language: English
• Create Command: abp new Acs.Cts.SecureMessaging -t app --tiered --ui-framework angular --database-provider ef --database-management-system sqlserver --theme leptonx --no-tests --without-cms-kit --dont-run-bundling --no-multi-tenancy --no-social-logins -no-saas -no-file-management

ExecaError: Command failed with exit code 1: .suite/schematics/node_modules/.bin/ng g "/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/collection.json:entity" --template module-pro --target Acs.Cts.SecureMessaging --source "C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/.suite/entities/MessagingAccessDelegation.json"

More than one module matches. Use the '--skip-import' option to skip importing the component into the closest module or use the module option to specify a module. at getFinalError (file:///C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/node_modules/execa/lib/return/final-error.js:6:9) at makeError (file:///C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/node_modules/execa/lib/return/result.js:108:16) at getAsyncResult (file:///C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/node_modules/execa/lib/methods/main-async.js:168:4) at handlePromise (file:///C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/node_modules/execa/lib/methods/main-async.js:151:17) at async file:///C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/run-schematics.mjs:13:20 { shortMessage: 'Command failed with exit code 1: .suite/schematics/node_modules/.bin/ng g "/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/collection.json:entity" --template module-pro --target Acs.Cts.SecureMessaging --source "C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/.suite/entities/MessagingAccessDelegation.json"', command: '.suite/schematics/node_modules/.bin/ng g /Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/collection.json:entity --template module-pro --target Acs.Cts.SecureMessaging --source C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/.suite/entities/MessagingAccessDelegation.json', escapedCommand: '.suite/schematics/node_modules/.bin/ng g "/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/angular/.suite/schematics/collection.json:entity" --template module-pro --target Acs.Cts.SecureMessaging --source "C:/Users/Jamie/Repo/Acs/modules/Acs.Cts.SecureMessaging/.suite/entities/MessagingAccessDelegation.json"', cwd: 'C:\Users\Jamie\Repo\Acs\modules\Acs.Cts.SecureMessaging\angular', durationMs: 3457.2956, failed: true, timedOut: false, isCanceled: false, isGracefullyCanceled: false, isTerminated: false, isMaxBuffer: false, isForcefullyTerminated: false, exitCode: 1, stdout: '', stderr: "\x1B[1m\x1B[31mMore than one module matches. Use the '--skip-import' option to skip importing the component into the closest module or use the module option to specify a module.\x1B[39m\x1B[22m", stdio: [ undefined, '', "\x1B[1m\x1B[31mMore than one module matches. Use the '--skip-import' option to skip importing the component into the closest module or use the module option to specify a module.\x1B[39m\x1B[22m" ], ipcOutput: [], pipedFrom: [] }

Node.js v22.16.0

2025-08-20 10:35:09.875 -07:00 [INF] 2/2 - AngularUiGenerateWithSchematicsCommand completed. | Duration: 4107 ms.

• Steps to reproduce the issue:

Scaffold an existing or new entity in ABP Suite and nothing is generated - abp suite log error found (see above).

Provide us with the following info:

• Template: app
• Created ABP Studio Version: 1.1.2
• Current ABP Studio Version: 1.1.2
• Tiered: Yes
• Multi-Tenancy: No
• UI Framework: angular
• Theme: leptonx
• Theme Style: system
• Theme Menu Placement: side
• Run Install Libs: Yes
• Progressive Web App: No
• Run Progressive Web App Support: No
• Database Provider: ef
• Database Management System: sqlserver
• Separate Tenant Schema: No
• Create Initial Migration: No
• Run Db Migrator: No
• Mobile Framework: none
• Public Website: No
• Social Login: No
• Include Tests: No
• Kubernetes Configuration: Yes
• Distributed Event Bus: none
• Use Local References: No
• Optional Modules:
  • LanguageManagement
  • AuditLogging
  • OpenIddictAdmin
• Selected Languages: English, English (United Kingdom), 简体中文, Español, العربية, हिन्दी, Português (Brasil), Français, Русский, Deutsch (Deutschland), Türkçe, Italiano, Čeština, Magyar, Română (România), Svenska, Suomi, Slovenčina, Íslenska, 繁體中文
• Default Language: English
• Create Command: abp new Acs.Cts.WorkforceManagement -t app --tiered --ui-framework angular --database-provider ef --database-management-system sqlserver --theme leptonx --skip-migration --skip-migrator --no-tests --without-cms-kit --dont-run-bundling --no-multi-tenancy --no-social-logins -no-saas -no-gdpr -no-file-management -no-text-template-management

When I start the Auth Server, I get an error: "The 'wwwroot/libs' folder does not exist or empty! If your application does not use any client-side libraries, you can disable this check by setting 'AbpMvcLibsOptions.CheckLibs' to 'false'".

I check the path "..AuthServer\wwwroot\libs" and sure enough its empty.

I run abp install-libs again and the folder is still empty: C:\Users\Jamie\Repo\AbpStudio\Acs\modules\Acs.Cts.WorkforceManagement\src\Acs.Cts.WorkforceManagement.AuthServer>abp install-libs [11:45:14 INF] You are running the second generation of the ABP CLI. If you're interested in the legacy CLI, see https://abp.io/new-cli [11:45:15 INF] Found 1 projects. [11:45:15 INF] C:\Users\Jamie\Repo\AbpStudio\Acs\modules\Acs.Cts.WorkforceManagement\src\Acs.Cts.WorkforceManagement.AuthServer [11:45:15 INF] Running Yarn on C:\Users\Jamie\Repo\AbpStudio\Acs\modules\Acs.Cts.WorkforceManagement\src\Acs.Cts.WorkforceManagement.AuthServer ➤ YN0000: ┌ Resolution step ➤ YN0002: │ @abp/bootstrap@npm:9.2.4 doesn't provide @popperjs/core (p97d37), requested by bootstrap ➤ YN0002: │ @abp/jquery-validation@npm:9.2.4 doesn't provide jquery (pcfe0e), requested by jquery-validation ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code ➤ YN0000: └ Completed ➤ YN0000: ┌ Fetch step ➤ YN0000: └ Completed ➤ YN0000: ┌ Link step ➤ YN0000: └ Completed ➤ YN0000: Done with warnings in 0s 273ms

I tried the following, to no effect:

• uninstalling abp cli and reinstalling it
• created new solutions
• manually running abp install-libs

(Please provide your ABP version and other relevant solution information here, as hinted by the template)

• ABP 9.2.0
• MVC/Razor
• Public Web Site
• Separate Auth-Server App

Hi

How can we get the idle timer to work in the Web Public App?

I added a reference to the Volo.Abp.Account.Pro.Public.Web.Shared 9.2.0 package and added the module dependency. What else do I need to configure?

Thanks Jamie

• ABP Framework version: v8.3.0
• UI Type: Angular
• Database System: EF Core SQL Server
• Tiered (for MVC) or Auth Server Separated (for Angular): yes

How do I download the source for this package?

I thought it might be the common commercial source but when I run the get-source, it is not found: abp-old get-source Volo.Abp.Commercial.Common -o "C:\Users\Jamie\Repo\AbpIO_commercial\modules\Volo.Abp.Commercial.Common" -v 8.3.0

[17:38:53 INF] You are running the second generation of the ABP CLI. If you're interested in the legacy CLI, see https://abp.io/new-cli Checking extensions... [17:38:53 INF] Downloading source code of Volo.Abp.Commercial.Common (Latest) [17:38:53 INF] Output folder: C:\Users\Jamie\Repo\AbpIO_commercial [17:38:53 ERR] Module not found: Volo.Abp.Commercial.Common Volo.Abp.Studio.AbpStudioException: Exception of type 'Volo.Abp.Studio.AbpStudioException' was thrown. at async Task<ModuleInfo> Volo.Abp.Studio.Modules.Remote.StudioModuleInfoProvider.GetAsync(string name) at async Task Volo.Abp.Studio.Cli.Commands.StudioGetSourceCommand.ExecuteAsync (CommandLineArgs commandLineArgs) at async Task Volo.Abp.Studio.Cli.StudioCliService.RunInternalAsync( CommandLineArgs commandLineArgs) at async Task Volo.Abp.Studio.Cli.StudioCliService.RunAsync(string[] args)

• ABP Framework version: v8.3.0
• UI Type: MVC
• Database System: EF Core (SQL Server)
• Tiered (for MVC) or Auth Server Separated (for Angular): yes
• Exception message and full stack trace:
• Steps to reproduce the issue:

I first noticed this in my own application, then tested the abp demo application to ensure it wasn't a local issue.

1. Navigate to the demo abp io page (https://demo.abp.io/)
2. Log in as admin
3. Create a new user - check the Force password change
4. Log out
5. Try logging in as the new user, with the wrong password

The system does not provide any feedback that the password is incorrect.

It appears that this was addressed in the framework by issue 19753 (https://github.com/abpframework/abp/issues/19753).

• ABP Framework version: v7.3.2
• UI Type: MVC
• Database System: EF Core (SQL Server
• Tiered (for MVC) or Auth Server Separated (for Angular): yes
• Exception message and full stack trace: Could not find localization source: AbpUi

Unable to upload profile picture Angular Project in My Account --> Profile Picture:

First experienced in our app, then replicated issue in scratch 7.3.2 project.

Error in browser

core.mjs:10171 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement') at volo-abp.ng.account-public.mjs:1758:60 at timer (zone.js:2367:41) at _ZoneDelegate.invokeTask (zone.js:402:31) at core.mjs:25893:55 at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25893:36) at _ZoneDelegate.invokeTask (zone.js:401:60) at Object.onInvokeTask (core.mjs:26194:33) at _ZoneDelegate.invokeTask (zone.js:401:60) at Zone.runTask (zone.js:173:47) at invokeTask (zone.js:483:34)

image.png

• UI Type: Angular

Hi

I like what you're doing with the lepton-x theme and example components, for example the wizard: https://x.leptontheme.com/side-menu/custom-pages/wizard-horizontal

Are there to develop angular components for these and is the current javascript for the demo pages available?

If there are plans for angular components, can you share a roadmap?

Thanks Jamie

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, and please first use the search on the homepage. Provide us with the following info:

• ABP Framework version: v6.1.0
• UI Type: Angular / MVC
• Database System: EF Core (SQL Server)
• Tiered (for MVC) or Auth Server Separated (for Angular): yes
• Exception message and full stack trace: Images must have alternate text
• Steps to reproduce the issue: Scan the page with accessibility tool

Accessibility tests raises critical issues (using AXE DevTools) for images that do not have alternate text.

A good example of this is the avatar image:

Test results: Ensures <img src=""> elements have alternate text or a role of none or presentation https://dequeuniversity.com/rules/axe/4.7/image-alt?application=AxeChrome

To solve this problem, you need to fix at least (1) of the following:

• Element does not have an alt attribute
• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute
• Element's default semantics were not overridden with role="none" or role="presentation"

Can you please update Lepton-x to address this issue.

Thanks

ABP Framework version: v7.3.1

UI type: MVC / Lepton-X 2.3.0

DB provider: EF Core

Tiered (MVC) or Identity Server Separated (Angular): yes

I'm following up on the previously asked question: https://support.abp.io/QA/Questions/4556/Lepton-x-keyboard-support-for-General-Settings

The Lepton-X theme still lacks support for keyboard navigation to the General Settings menu in the MVC project. There have been improvements made to tab navigation to other components, which is great, but it is still not possible to tab to the General Settings and use the enter key to show the options.

This is a high-priority feature for us, as our solution needs to meet accessibility standards. We have developed an accessible theme, but the application fails accessibility checks because users with accessibility requirements can't navigate to the General Settings menu to change to the accessible theme.

Can you provide a technical workaround, is this on your roadmap and what's the estimated release date?

Thanks Jamie