How to use disabled CSS pseudo-class to style element with aria-disabled attributes?

Question

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?

Answer 1

Just apply an attribute selector instead of :disabled:

[aria-disabled="true"] { /* your declarations */ }