dspace-angular icon indicating copy to clipboard operation
dspace-angular copied to clipboard

Hangs when selecting items via keyboard from the hamburger menu - content does not appear (versions 7 and 8)

Open keithgee opened this issue 10 months ago • 2 comments

Describe the bug

This was discovered when testing for accessibility (making sure the site is usable from the keyboard).

When using the keyboard (Enter key) to activate menu items in the hamburger menu, such as "Communities & Collections", the content does not appear. It seems to hang and either take a very long time or not appear at all.

Tested with Safari and Chrome on MacOS. Screenshot 2024-04-18 at 2 02 32 PM

To Reproduce

Steps to reproduce the behavior:

  1. Resize the browser window so that it's small enough that the hamburger menu appears in the theme.
  2. Use the keyboard to navigate to the menu. It will appear highlighted
  3. Activate the hamburger menu with enter. The menu will appear highlighted.
  4. Choose the menu options such as "communities & Collections", also activating with the keyboard.

The communities and collections menu will not appear.

Expected behavior I expected the content "Communities and Collections" to appear quickly.

keithgee avatar Apr 18 '24 18:04 keithgee

I was able to reproduce this bug while using Chromium (Linux), but it didn't occur in Firefox.

Interesting fact: If I select the navigation by tapping SPACE it works.

Leano1998 avatar Apr 19 '24 08:04 Leano1998

I think the problem lies in the event handling of keyup.enter in Chrome. I changed the code in the link-menu-item.component.html to :

<a class="ds-menu-item" role="menuitem"
   [ngClass]="{ 'disabled': !hasLink || item.disabled }"
   [attr.aria-disabled]="!hasLink || item.disabled"
   [attr.data-test]="'link-menu-item.'+item.text"
   [routerLink]="getRouterLink()"
   [queryParams]="item.queryParams"
   (click)="$event.stopPropagation()"
   (keyup.space)="navigate($event)"
   (keydown.enter)="navigate($event)"
   href="javascript:void(0);"
>{{item.text | translate}}</a>

So the event is triggered by keydown and it worked, but it's not a real solution, it's just a workaround.

Leano1998 avatar Apr 19 '24 08:04 Leano1998

Hi, I'm Andrea Guevara from Neki-it. Our team has analyzed the problem and the issue expressed in DSpace version 8 does indeed occur. We don't think that the code suggestion above is just a workaround, but a real solution. We have tested the code and it is working as expected.

Andrea-Guevara avatar Jun 05 '24 18:06 Andrea-Guevara

@Leano1998 : Per @Andrea-Guevara 's comment above, if you would be willing to provide a PR with your solution, it would be appreciated. That way others can more easily test it.

tdonohue avatar Jun 06 '24 21:06 tdonohue

Hej, Thanks for testing @Andrea-Guevara I'm sorry, I didn't react, I forgot about this. I'll open a PR.

Leano1998 avatar Jun 13 '24 08:06 Leano1998