a11y: Add compiler warning for native-disabled inputs

[jmuzina]

I would like to propose a new accessibility rule that warns developers when they use the native disabled attribute on interactive elements like <button>, encouraging the use of aria-disabled="true" instead, while allowing for an escape-hatch to ignore the warning in cases where the native disabled attribute is necessary.

Rationale

disabled completely removes an element from the browser's focus order and hides it from screen readers. This creates a poor experience for keyboard and screen reader users. In many cases, aria-disabled should be used (along with using JS to ignore button clicks / form submissions), to keep the button perceptible to screen reader users.

Valid Use Cases for native disabled

There are valid cases for the native disabled attribute, such as disabling an entire collection of form fields (e.g., a <fieldset> for a spouse-specific form section when you have indicated you have no spouse in a previous input).

Because of this nuance, I suggest that this be a compiler warning, rather than an error. The idea here is that this rule would introduce "development friction" so devs are prompted to verify if they are mistakenly hiding an interactive element that users should be aware of when disabled. If they genuinely need it, they could use a <!-- svelte-ignore --> comment to accept the risk.

Fail Cases

<button disabled>Save Changes</button>
<button disabled={isLoading}>Submit</button>

Pass Cases

<button aria-disabled="true">Save Changes</button>
<button aria-disabled={isLoading}>Submit</button>

<!-- User consciously opts out of spouse options -->
<label>
  <input type="checkbox" bind:checked={hasNoSpouse} />
  I do not have a spouse
</label>

<!-- svelte-ignore a11y-disabled-control -->
<!-- Disabling this entire section reduces keyboard navigation friction since the user explicitly indicated they have no spouse -->
<fieldset disabled={hasNoSpouse}>
  <legend>Spouse Details</legend>
  <label>Spouse Name <input type="text" /></label>
  <label>Spouse Occupation <input type="text" /></label>
</fieldset>

[paul-geoghegan]

Screen reader user here. This is a fantastic idea and definitely something I would personally find helpfull in terms of making websites a bit easier to use.