Support angular dynamic attribute binding

We’re using SonarCloud.

A bug is reported based on the rule Image, area and button with image tags should have an "alt" attribute. The code that causes this bug, is using Angular’s optional attribute binding, using:


<img [attr.alt]="content.altMessage">

This angular syntax allows to create an alt attribute only if there’s a value available. If the content doesn’t have a value for the alt message, angular will not create the alt attribute at all. If we would use the standard attribute binding syntax (<img [alt]="content.altMessage">), the resulting html would be <img alt="null">.

This is a false-positive to us, as the resulting html does include an alt tag. We use other business tool driven validations to ensure the business user is adding the alt tag message before going live with the content.

This looks very similar to #4433, but that case is related to the standard attribute binding (without attr.).

Hi,

What is #4433?
Could you reference some docs explaining this syntax?
Could you describe how you see the rule to be changed? Consider [attr.alt] as valid alt attribute?

Ok, found the doc (https://angular.io/guide/template-syntax#attribute-binding) and created the ticket https://jira.sonarsource.com/browse/SONARHTML-118