`prefer-tag-over-role` causing warnings on valid a11y patterns

[geotrev]

I've been updating a few pieces of code after updating to include this rule, and I'm finding that certain usages are flagged possibly incorrectly?

For e.g., I have code like so that is used as a global page alert element:

<div role='status'>...</div>
<div role='alert'>...</div>

And gives the following output:

Use <output> instead of the ["status"/"alert"] role to ensure accessibility across all devices.

Another example for SVGs:

<svg role='img'>...</svg>

With similar warning:

Use <img> instead of the "img" role to ensure accessibility across all devices.

Which is strange because <output> is primarily used in forms, unlike alert and status containers which are often treated as live regions or focus trapped containers. (this isn't accurate)

I did some digging and both live regions and SVG images appear to be valid in these contexts.

[ljharb]

I'd suggest never referring to w3schools - it's not a good resource.

MDN doesn't indicate in any way that it's primarily for forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output Certainly there's a form property but the "if any" means it's intended for use outside of forms as well.

[geotrev]

@ljharb Regardless, I still think the div/role usage being flagged is valid in this case given existing pattern documentation?

[ljharb]

I've tagged in @jessebeach on that one :-)