An a element without an href can lead to accessibility issues. For instance their not focusable by default using the Tab key on the keyboard. However, Menu.Item becomes an a when an onClick props is passed, even if there is no href prop.
Proposed solution
One option could be to use an aria role="button" or role="link" plus a tabindex. Another would be that Menu.Item won't automatically become an a when only onClick is passed, but keep it as a div with a link class (for the style), a tabindex="0" (for accessibility) and any aria related tag (probably role="button") instead.
What I think could be the better approach is that a Menu.Item with only an onClick and no href becomes a <button> without borders. This way all functionality will be there by default: no need to use tabindex or role, and navigation with keyboard is as expected.
I would like to add that I'm far from being an expert in accessibility, aria and all that stuff. I opened this issue as a feature request but primarily as place to discuss the better implementation for this.
Feature Request
Problem description
An
aelement without anhrefcan lead to accessibility issues. For instance their not focusable by default using theTabkey on the keyboard. However,Menu.Itembecomes anawhen anonClickprops is passed, even if there is nohrefprop.Proposed solution
One option could be to use an aria
role="button"orrole="link"plus atabindex. Another would be thatMenu.Itemwon't automatically become anawhen onlyonClickis passed, but keep it as adivwith alinkclass (for the style), atabindex="0"(for accessibility) and any aria related tag (probablyrole="button") instead.What I think could be the better approach is that a
Menu.Itemwith only anonClickand nohrefbecomes a<button>without borders. This way all functionality will be there by default: no need to usetabindexorrole, and navigation with keyboard is as expected.I would like to add that I'm far from being an expert in accessibility, aria and all that stuff. I opened this issue as a feature request but primarily as place to discuss the better implementation for this.