Activities of "AlderCove"

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

Hi

Thank you for the technical solution.

Unfortunately, the menu doesn't behave as expected.

1. Can tab to the General settings menu (all options outlined)
2. Pressing enter opens the General Settings drop-down menu
3. Pressing tab once the menu is showing, tabs through the individual items on the top (not to the drop-down menu)
4. It's not possible to tab to the drop-down menu and press enter to change a setting

Can you address these issues?

As an alternative, I thought it would be possible to move the appearance and language menus to the top toolbar like this:

I've got it partially working but have run into some issues due to the javascript for the general settings menu. I don't have much insight into what's happening under the hood, but I'm getting an exception which prevents the user menu from loading.

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at t.initChildren (lepton-x.bundle.min.js?_v=638261408440000000:2:43721)
    at new t (lepton-x.bundle.min.js?_v=638261408440000000:2:41474)
    at t.create (lepton-x.bundle.min.js?_v=638261408440000000:2:41563)
    at t.createSettingGroupWithMenu (lepton-x.bundle.min.js?_v=638261408440000000:2:86551)
    at e [as constructor] (lepton-x.bundle.min.js?_v=638261408440000000:2:68837)
    at new e (lepton-x.bundle.min.js?_v=638261408440000000:2:71613)
    at e.create (lepton-x.bundle.min.js?_v=638261408440000000:2:71708)
    at t.createSettingGroups (lepton-x.bundle.min.js?_v=638261408440000000:2:73132)
    at t.create (lepton-x.bundle.min.js?_v=638261408440000000:2:72833)
    at NodeList.forEach (<anonymous>)

If the tabbing/enter issue in the general settings cannot be addressed, can you kindly assist in providing a technical solution for implementing two independent components on the toolbar to change the appearance and language?

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

Reopening

Hi, can you please provide us with a timeframe for the release, so we can inform our customers? Also, we are on ABP.io 6.01. Can we continue with this, or will the LeptonX release require an update to our ABP.io version too?

• ABP Framework version: v6.0.1
• UI type: MVC / Lepton-X 1.0.4
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes

We require keyboard navigation support as our solution needs to meet accessibility standards.

In this specific instance, we require keyboard navigation support for the General Settings.

I've added tabindex(0) to each of the option groups (appearance, language, general settings) - we also require the ability for users to press enter to display the various options (defaulting to options for the selected group. The behaviour for pressing the enter key should mimic the click event.

It's not straightforward to make these changes as commercial javascript backs the current implementation, which I am not sure how to utilize.

<div class="lpx-settings" id="lpx-settings">
	<div id="appearance" class="setting-icon" data-lpx-setting-icon="appearance" data-lpx-setting-id="settings-context-menu" tabindex="0">
		<div class="setting">
			<i class="bi bi-laptop-fill"></i>
		</div>
	</div>

	@if (MvcOptions.Value.ApplicationLayout == LeptonXMvcLayouts.SideMenu)
	{
		<div id="containerWidth" class="setting-icon" data-lpx-setting-icon="containerWidth" data-lpx-setting-id="settings-context-menu" tabindex="0">
			<div class="setting">
				<i class="bi bi-layout-three-columns"></i>
			</div>
		</div>
	}

	<div id="language" class="setting-icon" data-lpx-setting-icon="language" data-lpx-setting-id="settings-context-menu" tabindex="0">
		<div class="setting">
			<span></span>
		</div>
	</div>

	<div class="setting-icon" tabindex="0">
		<i class="bi bi-gear-wide-connected" aria-hidden="true" data-lpx-ctx-toggle="settings-context-menu"></i>
	</div>

Can you please provide a solution for this issue.

Thanks

Just adding a little more info - with the tab issue resolved:

1. The lpx-inner-menu "collapsed" class is correctly being applied to the submenu unordered list element
2. The enclosing lpx-menu-dropdown div and child lpx-inner-menu-item elements are not being displayed

I have messed around a little to try and get these elements to display:

1-) Updated the outer-menu-item list item in \Themes\LeptonX\Components\TopMenu\MainMenu\Default.cshtml to conditionally (if not a leaf) have "has-drop" class:

<li class="outer-menu-item @(!menuItem.MenuItem.IsLeaf ? "has-drop" : "")"> @await Html.PartialAsync("~/Themes/LeptonX/Components/TopMenu/MainMenu/_MenuItem.cshtml", menuItem) </li>

2-) Added menu.js (as in https://support.abp.io/QA/Questions/3314/Adding-support-to-sub-menus-on-the-main-menu-for-keyboard-accessibility) that adds/removes the 'open' class for the list items with 'has-drop' on click events:

$(function () {
    var menuItems = document.querySelectorAll('li.has-drop');
    Array.prototype.forEach.call(menuItems, function (el, i) {
        el.querySelector('a').addEventListener("click", function (event) {
            if (this.parentNode.classList.contains("has-drop")) {
                if (!this.parentNode.classList.contains("open")) 
                    this.parentNode.classList.add('open');
                else
                    this.parentNode.classList.remove('open');
            } else {
                this.parentNode.className = "has-submenu";
                this.setAttribute('aria-expanded', "false");
            }

            event.preventDefault();
            return false;
        });
    });
});

3-) Added a bit of css to handle the open class:

.lpx-header-bottom .lpx-nav-menu .outer-menu-item.open > .lpx-menu-dropdown {
    visibility: visible;
    opacity: 1;
    height: unset;
    display: block !important;
}

.lpx-header-bottom .lpx-nav-menu .outer-menu-item.open > .lpx-menu-dropdown .lpx-inner-menu .lpx-inner-menu-item .lpx-menu-item-link {
    display: flex;
    color: var(--lpx-content-text);
    white-space: nowrap;
    padding: 0.4em 0.7em;
    border-radius: var(--lpx-radius);
    text-decoration: none;
    transition: background-color 0.5s ease, color 0.25s ease;
}

.lpx-header-bottom .lpx-nav-menu .outer-menu-item.open > .lpx-menu-dropdown .lpx-menu-item {
    width: 100%;
    height: auto;
    line-height: 1.5;
}

Although I'm pretty certain this isn't the preferred approach, it almost works. The issue appears to be the incorrect height of the submenu. In this example, the submenu should show two options but only part of the first is visible (hover works fine):

Appreciate your help on this - its very urgent for us.

Thanks

I fixed the tabbing issue by overriding the LeptonX/Components/TopMenu/MainMenu/_MenuItem.cshtml and adding the href="javascript:'" in the top-level menu item:

<a href="javascript:;" class="lpx-menu-item-link lpx-menu-item @(Model.IsActive ? "selected" : "")">
	X
	@if (!Model.MenuItem.Icon.IsNullOrEmpty())
	{
		<span class="lpx-menu-item-icon"><i class="lpx-icon @Model.MenuItem.Icon" aria-hidden="true"></i></span>
	}

	<span class="lpx-menu-item-text hidden-in-hover-trigger">@Model.MenuItem.DisplayName</span>
</a>

The menu still needs to dropdown on enter though.

• ABP Framework version: v6.0.1
• UI type: MVC
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes

We need to support accessibility on the public website.

When tabbing through the menu items, the main menu items with children are skipped over and cannot be accessed by the keyboard.

The behaviour should:

1. Support tabbing to these menu items
2. Open the sub-menu when the user presses the enter key

This issue was partially addressed in the Lepton theme here but doesn't work with the Lepton-X theme: https://support.abp.io/QA/Questions/3314/Adding-support-to-sub-menus-on-the-main-menu-for-keyboard-accessibility

In this example, the News and Event and Tools have sub-menus:

Are you able to provide a fix that I can apply in the meantime?

I'm trying to use the module for a current project with 6.0.1