You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are many times when a tooltip would be nice to have on a disabled button. We cannot actually handle tooltips on a Button with disabled={true}; however, it is possible to use aria-disabled, early return on events, and still use data-disabled for styling to achieve the desired result. This should still pass accessibility requirements AFAIK based on my research and testing, and GitHub uses this approach and their app passes accessibility tests (at least with Lighthouse).
It is nearly weekly that I get a request to show a tooltip on a disabled button explaining why it is disabled (some X feature isn't purchased or w/e). I think React Aria should seriously reconsider its approach here or at least not make it difficult to override that behavior.
I see this has been discussed briefly here, but if major companies have found aria-disabled to be an acceptable solution and it passes the lighthouse accessibility, could it please be considered as an alternative? I've personally tested this on Windows, Mac, Android, and the built-in Mac screen reader and it works fine for me. Screen readers are pretty advanced now and can read tooltips just fine as far as I can tell, and the next phrase it says after the screenshot I posted is describing how we are in a button group that is disabled.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
There are many times when a tooltip would be nice to have on a disabled button. We cannot actually handle tooltips on a Button with
disabled={true}; however, it is possible to usearia-disabled, early return on events, and still usedata-disabledfor styling to achieve the desired result. This should still pass accessibility requirements AFAIK based on my research and testing, and GitHub uses this approach and their app passes accessibility tests (at least with Lighthouse).It is nearly weekly that I get a request to show a tooltip on a disabled button explaining why it is disabled (some X feature isn't purchased or w/e). I think React Aria should seriously reconsider its approach here or at least not make it difficult to override that behavior.
I see this has been discussed briefly here, but if major companies have found
aria-disabledto be an acceptable solution and it passes the lighthouse accessibility, could it please be considered as an alternative? I've personally tested this on Windows, Mac, Android, and the built-in Mac screen reader and it works fine for me. Screen readers are pretty advanced now and can read tooltips just fine as far as I can tell, and the next phrase it says after the screenshot I posted is describing how we are in a button group that is disabled.Beta Was this translation helpful? Give feedback.
All reactions