"Upgrade guide > Buttons use the default cursor" uses incorrect CSS selector

[julesnuggy]

In your upgrade guide, in the section for overriding Tailwind V4's new cursor: default default setting, you suggest adding the following:

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

However, [role="button"]:not(:disabled) is incorrect/inaccurate because non-form elements do not have the concept of disabled (and thus the :disabled pseudo-class will not apply to them). You would only use role=button on an element such as a <div>, so whilst this selector will technically work, it's not accurate because a <div> should never have disabled/:disabled, and you should instead be using aria-disabled

So, technically, the recommended CSS should be:

@layer base {
  button:not(:disabled),
  [role="button"]:not([aria-disabled=true]) {
    cursor: pointer;
  }
}

[hiromieguchi802-lab]

Hi! I’d like to work on this issue and open a PR for it. I’ll keep the change small and focused on updating the selector in the upgrade guide. If there’s any preference for the exact selector (e.g. quoting the aria-disabled value), please let me know. Thanks!