3

I am creating a button component using aria-disabled for managing disabled state instead of disabled attribute to accommodate accessibility requirements.

Earlier I used CSS pseudo-class :disabled to style the disabled component. Is there a way to use it with aria-disabled="true" to style the button and aria-* attributes in general?

Harshal Patil
  • 17,838
  • 14
  • 60
  • 126
  • The real question here is why you have switched to `aria-disabled` rather than `disabled`? Is there something in particular that made you do that? – GrahamTheDev Apr 26 '21 at 10:27
  • 2
    @GrahamRitchie I am building a date-picker where navigation is handled using keyboard arrow keys. Now if one of the day is disabled (weekends, for example), then it still needs it to be focus-able with keyboard but disabled attribute make it completely non-focus-able. Also, some screen readers are not so gentle with `disabled` attribute. The screen reader should announce that this day exists on picker but not you cannot do anything with it. – Harshal Patil Apr 26 '21 at 10:39
  • That is fair enough, perfect use case, just normally it is a "code smell" of something being more complicated than it needs to be so thought I would check – GrahamTheDev Apr 26 '21 at 13:32

1 Answers1

10

Just apply an attribute selector instead of :disabled:

[aria-disabled="true"] { /* your declarations */ }
connexo
  • 53,704
  • 14
  • 91
  • 128
  • I was more looking for some sort of pseudo selector instead of attribute selector. But, it looks like that's the only way. – Harshal Patil Apr 26 '21 at 04:07