input with type="radio" incorrectly flagged with react-a11y-role-has-required-aria-props

[BrendanMcK]

I have react .tsx code similar to:

    <input
      type="radio"
      checked
    />

This gets flagged with the error react-a11y-role-has-required-aria-props:

Tag 'input' has implicit role 'radio'. It requires aria-* attributes: aria-checked that are missing in the element [...]

This seems to be a false-positive in this case - we're not using role= here, just using a plain native input element, so no additional aria properties should be needed here.

[BrendanMcK]

Looks like the issue is that we're looking for explicit aria-properties, even for elements that have implicit roles. Maybe we should only be looking for aria- properties on elements that have explicit roles? For elements with implicit roles, it's the browser's responsibility to provide the correct behavior. For something like <input type="radio">, the browser provides an implicit role=radio, but is also providing an implicit aria-checked equivalent (via the accessibility API), so there's no need for the markup to provide an explicit property here.

I note that the code for this test has a special case for H1-H6 headings (which essentially have an implicit aria-level provided), but not for input.

[astorije]

I'm having a similar issue right now, with option and aria-selected:

<select id={id}>
  <option>{option}</option>
</select>

ERROR: xx:yy react-a11y-role-has-required-aria-props Tag 'option' has implicit role 'option'. It requires aria-* attributes: aria-selected that are missing in the element. A reference to role definitions can be found at https://www.w3.org/TR/wai-aria/roles#role_definitions.

[astorije]

And I can confirm that it also happens with checkboxes:

<input
  type="checkbox"
  checked={enabled}
  ... />

ERROR: xx:yy react-a11y-role-has-required-aria-props Tag 'input' has implicit role 'checkbox'. It requires aria-* attributes: aria-checked that are missing in the element. A reference to role definitions can be found at https://www.w3.org/TR/wai-aria/roles#role_definitions.

I'm wondering if I'm missing something obvious. Any thoughts? :)

[astorije]

@JoshuaKGoldberg, do you have any insight on this?

[JoshuaKGoldberg]

Oh I'm no aria expert... but I'm sure @Harley-Adams would know what to do here! 😅

Edit: or @tommywilkinson, since Harley is battling spam bots and service fires this week...

[astorije]

(@JoshuaKGoldberg, I don't think mentions send notifications on edits, could be wrong, but I believe @tommywilkinson was not notified... until now :D)

[tommywilkinson]

Yeah, looking at the UIA tree for Edge confirms that the tags naturally get the toggle patterns we would expect.

What would probably work best here is a mapping of tag type -> list of implicit properties. It looks like there's already one for tag -> implicit aria roles based off discussion above, so I would imagine adding ones for implicit properties should be pretty straightforward.

[robinjtuttle]

https://www.w3.org/TR/wai-aria/roles#role_definitions.

this link is now a 404

[JoshuaKGoldberg]

💀 It's time! 💀

TSLint is deprecated and no longer accepting pull requests other than security fixes. See #876. ☠️
We recommend you instead use typescript-eslint to lint your TypeScript code with ESLint. ✅

👋 It was a pleasure open sourcing with you!