Avatar component has a redundant role "img" on <img>

[rvetrsek]

I found that for the Avatar component, either used in a button or by itself, HTML validation returns an error: Redundant role "img" on

The role should probably be omitted for img tags:

ui/src/runtime/components/Avatar.vue

Line 97 in fc3cc51

role="img"

[benjamincanac]

How did you manage to create this issue without using a template? 🤔

[rvetrsek]

Thanks for the question. Here’s a minimal example that reproduces the issue:

<UAvatar
  :src="form.avatar_url || undefined"
  :alt="form.name || ''"
  size="3xl"
  class="mb-4"
/>

When rendered, the element inside UAvatar includes role="img".
Because already has an implicit img role, adding role="img" is redundant and flagged as an error by validators (e.g. W3C Validator, Nuxt’s own HTML validator).

[rvetrsek]

Oh, sorry. You meant without an issue template 🤦‍♂️

I went looking in the code and found the line that I thought was the problem, and used an option to create a ticket from there.