Other types of menu items?

[tbohlen]

This is a question rather than strictly an issue - apologies if this muddies your issue list!

Love what you've built. I'd like to be able to use this with button components within the menu, not just links in the case of an application menu. Given your knowledge about the accessibility requirements, are there any modifications to the props handed back by this hook that would need to be made to accomplish this from an accessibility standpoint?

Thanks!

[corymharper]

Hi there, thanks for the interest in the package!

To my knowledge, there should be no accessibility issues with changing the a elements to button elements. The role of menuitem that is applied to the buttons should properly indicate that they are a button in a menu which will launch some action. As long as those buttons have semantically descriptive text as towards what their function is, I don't think there are accessibility concerns. If they do not, it's appropriate to add an aria-label property to the button.

However, there will be complaints from Typescript, as the package is currently only designed to accept HTMLAnchorElement as the target of it's ref. A possible and probably warranted feature addition is making the typing for menu items more generic.

[WesCossick]

A possible and probably warranted feature addition is making the typing for menu items more generic.

@corymharper created #174 in response to this. Closing this issue in favor of that one.

[tbohlen]

Thanks Wes! Good to close.

[prios-chris-abbato]

One issue I have seen here is when trying to use a button in place of an anchor tag, any onClick listener is activated twice when using the Enter key. I believe this is because the default behavior of the button already activates the onClick and then this hook is also activating it. Changing the item element to a

corrects this.

[corymharper]

One issue I have seen here is when trying to use a button in place of an anchor tag, any onClick listener is activated twice when using the Enter key. I believe this is because the default behavior of the button already activates the onClick and then this hook is also activating it. Changing the item element to a

corrects this.

That's a fair point, if we fully roll out support for other kinds of menu items we'll probably have to consider preventing the default behavior and the implications of that. For now, the package still only full supports HTMLAnchorElement children as menu items.