Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-menu): Enhance keyboard navigation #10243

Open
wants to merge 19 commits into
base: main
Choose a base branch
from

Conversation

Todor-ads
Copy link
Member

@Todor-ads Todor-ads commented Nov 25, 2024

After this change, it will be possible to navigate through the elements added to the endContent using the left and right arrow keys on the keyboard

BGSOFUIBALKAN-8852

packages/main/src/Menu.ts Outdated Show resolved Hide resolved
@Todor-ads Todor-ads changed the title feat(ui5-menu): endContent is now accessible via keyboard feat(ui5-menu): Enhance keyboard navigation Nov 25, 2024
packages/main/src/Menu.ts Outdated Show resolved Hide resolved
packages/main/src/Menu.ts Outdated Show resolved Hide resolved
packages/main/src/Menu.ts Show resolved Hide resolved
@unazko unazko self-requested a review December 19, 2024 23:50
packages/main/src/MenuItem.ts Outdated Show resolved Hide resolved
packages/main/src/Menu.ts Outdated Show resolved Hide resolved
packages/main/src/Menu.ts Outdated Show resolved Hide resolved
packages/main/src/Menu.ts Show resolved Hide resolved
@Todor-ads Todor-ads requested a review from vladitasev January 23, 2025 11:37
packages/main/src/Menu.ts Show resolved Hide resolved
packages/main/src/Menu.ts Show resolved Hide resolved
packages/main/src/Menu.ts Show resolved Hide resolved
packages/main/src/Menu.ts Show resolved Hide resolved
} else if ((shouldCloseMenu || isTabNextPrevious) && parentElement._popover) {
parentElement._popover.open = false;
parentElement.selected = false;
const opener = this._popover.getOpenerHTMLElement(parentElement._popover.opener);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this code to Popover.ts, create a new function called focusOpener(), add Teo Taushanov and Pepi Dimov for review.

The new function calls this.getOpener.......?focus(), annotate as @protected

packages/main/src/Menu.ts Show resolved Hide resolved
}

get _navigableItems(): Array<HTMLElement> {
return [...this.endContent];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would happen if the user passes non-interactive items in endContent? I saw the documentation says we expect button, link or icon( I presume button-like icon, i.e. clickable). But will there be an issue if they pass a normal static icon or just a div?

Even if it doesn't work in such scenarios, it should not break. Please check.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants