[POC] Render MenuItem as li > button

[miroslavstastny]

Menu

!!! DO NOT MERGE !!!

For accessibility reasons, Menu renders as ul > li > a with onClick handler on a, see #44.
This still does not work as expected, see #61.

This is a Proof of Concept which renders the menu as ul > li > button to test if it helps with the accessibility.

There should be no visual regression, however UTs are failing at the moment.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

[kolaps33]

Tested with the change as button and now it works as expected for each case.
Space and Enter trigger onclick method.
Tested with:
Chrome > JAWS with and without virtual cursor
Edge > Narrator when scan mode is on/off
Firefox > NVDA > when browse mode is on/off
OSX > Chrome > VoiceOver > without and with VoiceOver keys

[kolaps33]

Today we have been testing more using "a" tag for menu and figure out following:

When added on menu "a" handleKeydown method:
handleKeydown = e => {
if (e.which === 32 || e.which === 13) {
this.handleClick(e)
// _.invoke(this.props, 'onClick', e, this.props)
e.preventDefault()
}
}

2. Then space/enter was working properly

3. And JAWS was not listed link in link view... What is fine...

So in the end I think we could go with "a" tag in menu.

@jurokapsiar @miroslavstastny

[notandrew]

Do we really want to replace the a tag with a button? I think that might have its own set of issues. I don't understand the root issue though. Is it that the onclick handler is interfering with the default link?

[miroslavstastny]

After discussion with @jurokapsiar we decided to stick with ul > li > a for now and handle Enter/Space in Menu Behavior