Activities of "AlderCove"

It looks to me like I'd have to replace the whole navbar.

How can I add a request for the Lepton-X theme to be changed so that when its expanded the collapse icon is visible:

and when Its collapsed, the expand icon is visble:

Also making accessible as a button would be preferred.

thanks

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.

I had 2 .module.ts files in one folder - moved one and it resolved the issue

• 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).

I reinstalled yarn and it works now

Here's my package.json:

{ "version": "0.1.0", "name": "my-app-authserver", "private": true, "dependencies": { "@volo/abp.aspnetcore.mvc.ui.theme.leptonx": "~4.3.1", "@volo/account": "~9.3.1" } }

yarn output:

yarn install v1.22.5 (node:12724) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. (Use node --trace-deprecation ... to show where the warning was created) [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning "@volo/abp.aspnetcore.mvc.ui.theme.leptonx > @volo/abp.aspnetcore.mvc.ui.theme.commercial > @abp/aspnetcore.mvc.ui.theme.shared > @abp/bootstrap > bootstrap@5.3.7" has unmet peer dependency "@popperjs/core@^2.11.8". [4/4] Building fresh packages...

success Saved lockfile. warning Your current version of Yarn is out of date. The latest version is "1.22.22", while you're on "1.22.5". info To upgrade, download the latest installer at "https://yarnpkg.com/latest.msi". Done in 8.74s.

This project has a stand-alone MVC auth server for logging in, in addition to the angular app.

Another project also has the public website MVC app and the same issue appears there

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

[maliming] said: hi

Add Volo.Abp.Account.Pro.Public.Web.Shared will be fine.

Can you check your public website page HTML code to see if your page includes Idle component?

Thanks.

Yes, that's being included and seems to be working.

Also, I have another standalone angular app - it uses the AccountPublicConfigModule but not the AccountAdminConfigModule and the idle timer doesn't work with that app. How do you suggest getting that working? We don't want admin capabilities in this angular app. Would it make more sense for the idle timer to be part of the public module or a shared account module? Or, am I misunderstanding how its implemented?

Thanks

(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