Button - disabled button appears as enabled when focused

[lszomoru]

I have noticed that a disabled button widget appears as enabled when it receives focus. Is that expected?

Disabled button:

Disabled button with focus:

I have tracked this down to this style. I think that the disabled button should display the outline but do not change the opacity.

[miguelsolorio]

I don't think disabled buttons should get focus because that indicates that you can perform an action, similar to why we don't show the pointer on hover for disabled items. One way to get around this issue is to add a :not(.disabled) rule to ignore disabled buttons.

[bpasero]

Looks like Isi changed widgets to not remove tabIndex when disabled in https://github.com/microsoft/vscode/commit/3479bb35904eb046c0974090794cac9c76173796#diff-66a07df088d0eb0a5f86befb962cf52e893a8cc3ae2fc716968effb45c485185, so I refer to him why that is so.

[isidorn]

Yeah, I am the culprit :) I changed it because the accessibility guidance says that even disabled buttons should be focusable, so users can discover them. Example toolbar that demonstrates this https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html

However I am not 100% convinced this is the right way. And we can change this. Let me know what you think. Thanks

[daviddossett]

Feels strange to have background colors changing despite allowing disabled elements to have focus. Can we just use the focus border without changing the backgroud for our case(s)?

[lszomoru]

I think that it does make sense for the button to be focusable and have an outline even when disabled. But the disabled button should "look" disabled in all states (normal, hover, focused).

[lszomoru]

Not sure who owns the widget to make this change, though. I am happy to make the change in about two weeks after I am back from vacation.

[isidorn]

I think the button widget has no direct owner. Since this is not urgent, let's assign to you based on your kind offer :)