Disabled menu items/buttons

[andredewaard]

I was wondering since everything here is really about accessibility.
Whenever a button is disabled. Don't you want to give the user feedback as of why that button is disabled?
When a button inside a menu is disabled it isn't focusable right now. But don't you want the user that is maybe visually impaired give a clue that the button is there, its just disabled because you still need to do X?

[reidbarber]

I think the intent is to mirror HTML disabled behavior, and behavior on native platforms. That being said, WAI-ARIA doesn't specifically say aria-disabled elements must not be able to receive focus (that I'm aware), and there is some discussion in this issue about it: #1696

In Spectrum, we recommend using ContextualHelp next to a disabled button to give the user more information about why it may be disabled. We have a similar thing for unavailable menu items where we open a submenu with more information.

[andredewaard]

This looks good! and will be very use full to have in our app. Can you give an example how this is implemented? Since the button it self is not focusable we cant put this ContextualHelp component inside the button?

[snowystinger]

No, you cannot put the ContextualHelp component inside the MenuItem, that would break aria. Menu items cannot have interactive children. We've been working on this for Spectrum, you can check it out here, https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/menu/src/ContextualHelpTrigger.tsx and the original PR for all of the initial work #4583

Note, our implementation is a little bit more involved because ours must work in a virtualized list. The general idea, though, is to have the action of a menu item open this contextual help, much like a submenu would work. We're still working out a couple issues on our side before releasing this functionality. I'm not sure when we'll add something more generally to our aria examples and React Aria Components, but given that we built it in React Spectrum, you could theoretically build it using our hooks once we've released.