aria-disabled should be a pseudo class?

[pierry01]

aria-... attributes are very important to web development scenario currently.

It isn't possible to implement a custom switch for example using aria-disabled and JS...

Working scenario below

<label class="... has-[:disabled]:cursor-not-allowed">
  <input class="hidden" disabled="true" ... />
  <span class="..." /> <!-- CAN NOT CLICK -->
</label>

Not working scenario below

<label class="... has-[:aria-disabled]:cursor-not-allowed">
  <input class="hidden" aria-disabled="true" ... />
  <span class="..." /> <!-- CAN CLICK -->
</label>

The reason is pretty simple:

1. We can use GROUP to customize the style of the children.
2. We can use PEER to customize the style of the siblings.
3. There isn't an easy way to customize the parent from children.

The only way is using the has-[...], but it only works with pseudo-class or tag.

Should some aria-... attributes be a pseudo-class?

[RobinMalfait]

aria-disabled would be an attribute :aria-disabled is looking for the :aria-disabled pseudo selector state which doesn't exist.

There already exists a aria-disabled:… variant, and it can compose with has-*, not-*, group-* and peer-*. For example: has-aria-disabled:….

More info:

• https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states
• https://tailwindcss.com/docs/hover-focus-and-other-states#has

[pierry01]

thanks for your answer! you're absolutely right...

it wasn't working because I was using has-[:aria-disabled]:... instead of has-aria-disabled:... 😮‍💨