rules to warn on redundant roles

[sarbbottam]

role is probably the most misused aria attribute, for example #88, #91.

Adding role=button to a div does not make it a button.
One has to script the behavior, i.e. if enter/space was pressed invoke the click handler.
Also add tabindex=0 to make it focusable.

However if one had used <button> attaching a click handler would be sufficient.

<button> is focusable/tabable by default (no need of tabindex=0), and it triggers a click event when enter/space is pressed (no need for extra keypress event listeners).

Same for link, checkbox, radio, radiogroup, textbox and the proposed password roles. There are already corresponding HTML alternatives available, and one should use them instead of just adding roles.

I guess It is better to call out (error, warn) in such situation.

[beefancohen]

hey @sarbbottam, thanks for bringing this up! are you suggesting that this plugin suggest the equivalent semantic element when user assigns a role to a non-interactive element?

i.e. warn something like You should use a button instead to ensure accessibility across all devices if the code is <div role="button" {...props} />?

[sarbbottam]

@evcohen yea something like that.