Skip to content

Latest commit

 

History

History
28 lines (23 loc) · 1.03 KB

no-disabled.md

File metadata and controls

28 lines (23 loc) · 1.03 KB

no-disabled

Rule that disabled prop should be cautioned on elements. Disabling interactive elements removes the element from the accessibility tree. Consider using aria-disabled.

Rule details

The general consensus is that disabled should be used with specific intent. It goes against intuition since disabled is a native HTML attribute, which disables. However, from a usability stand-point it is not a good UX for screen readers: It removes the element from the a11y tree, and may omit critical information. It is best to use aria-disabled and add the additional JS logic to "disable" the element.

Succeed

<div />
<div disabled />
<input />
<select />
<textarea />
<button />

Fail

<input disabled />
<input disabled="true" />
<input disabled="false" />
<input disabled={undefined} />

Resources