The alternative text attached to any content is a critical component of accessibility for screen reader users as it helps them understand the content's purpose on the page. By default, this rule checks for alternative text on the following elements: <img>, <area>, <input type="image">, and <object>.

<img>: An <img> element must have the alt property set with meaningful text or as an empty string to indicate that it is an image for decoration. For images that are being used as icons for a button or control, the alt property should be set to an empty string (alt="").
```
<button>
  <img src="icon.png" alt="" />
  Save
</button>
```
The content of an alt attribute is used to determine accessibility of an element. Whereas the content of the label is use to show a text content of an element. For this reason, adding a label to an icon can create confusion with the already present appropriate text content.
<object>: Add alternative text to all embedded <object> elements using either inner text, setting the title prop, or using the aria-label or aria-labelledby props.
<input type="image">: All <input type="image"> elements must have a non-empty alt prop set with a meaningful description of the image or have the aria-label or aria-labelledby props set.
<area>: All clickable <area> elements within an image map have an alt, aria-label or aria-labelledby prop that describes the purpose of the link.

Bad Practice

function Foo(props) {
  return <img {...props} />
}

Recommended

function Foo({ alt, ...props}) {
    return <img alt={alt} {...props} />
}

// OR

function Foo(props) {
    const {
        alt,
        ...otherProps
    } = props;

   return <img alt={alt} {...otherProps} />
}

1nwf / Produx-v2

No ignore rules found