Disabled radio buttons do not indicate selection

[kleinph]

A disabled radio button group does not indicate the (pre)selcted value as other form fields do. I am not sure if this is intended behavior, but native radio buttons do show their state when disabled.

• Operating system: Arch Linux
• Browser and version: Firefox 63.0.3, Chromium 71
• Reduced test case: https://codepen.io/anon/pen/OrVLOV

[ysds]

x-ref: #23544 ?

[kleinph]

@ysds as far as I understand, the referenced PR was to fix a problem where the active state could be triggered on an inactive button. In my issue the button should indicate its preset state also when disabled analogous to native radio buttons.

[ysds]

OK, I understand. Probably, that is a styling issue of buttons.

Demo: https://codepen.io/anon/pen/BvKaqz
Latest: https://codepen.io/anon/pen/LMNYKK

@kleinph I recommend you to change the issue title for clarification.

[tmorehouse]

I'm wondering if disabled elements should just have a reduced opacity for simplicity in styling?

[kleinph]

@ysds sure, how should I name it?
BTW your demo makes it pretty clear what my issue is. Thanks!

[tmorehouse]

Maybe active+disabled should just be mentioned as incompatible/not-supported for button mode?

[mdo]

Well, .active:disabled seems logical and useful—a button is selected and it's processing/loading, for example. :active:disabled isn't useful though because disabled shouldn't be interactive. Perhaps the problem is coming from us conflating those two vs separating the .active from :active?

[tmorehouse]

In the above examples it would really be :checked:disabled, rather than active:disabled (button style checkboxes)

[ysds]

I agree separating those two state:

• Pressed (:active)
• Selected (:checked, aria-pressed, aria-selected, aria-current) - .active class

[mdo]

Closing as stale for v4. We'll be moving onto focus entirely on v5 and v4 will only see critical updates.