dspace-angular
dspace-angular copied to clipboard
Hangs when selecting items via keyboard from the hamburger menu - content does not appear (versions 7 and 8)
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.
To Reproduce
Steps to reproduce the behavior:
- Resize the browser window so that it's small enough that the hamburger menu appears in the theme.
- Use the keyboard to navigate to the menu. It will appear highlighted
- Activate the hamburger menu with enter. The menu will appear highlighted.
- 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.
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.
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.
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.
@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.
Hej, Thanks for testing @Andrea-Guevara I'm sorry, I didn't react, I forgot about this. I'll open a PR.