FP: S6819 - The ARIA "img" role should be allowed on SVG images

  • What language is this for?

HTML & JS/TS

  • Which rule?

S6819

  • Why do you believe it’s a false-positive/false-negative?

Quoting from ARIA: img role - Accessibility | MDN:

If you are using embedded SVG images in your page, it is a good idea to set role="img" on the outer <svg> element and give it a label.

If I do that, though, SonarLint reports it as an error.

  • Are you using…

I’m using JetBrains Rider 2024.1.2 in connected mode with SonarCloud. The issue is raised in both places.

  • How can we reproduce the problem? Give us a self-contained snippet of code (formatted text, no screenshots)

Any SVG image with role="img" will trigger the FP. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>S6819 FP Example</title>
</head>
<body>
<svg role='img' aria-label='Blue rectangle' width='200' height='100' xmlns='http://www.w3.org/2000/svg'>
    <rect width='170' height='70' x='15' y='15' rx='17' ry='17' fill='blue'/>
</svg>
</body>
</html>

It’s not the value of the attribute role='img' that triggers Sonar, it’s the single quotes around the value in your example. When you replace the single quotes with double quotes (role="img"), the issue goes away.

That’s what the error message means:

Attribute charset must use " instead of ' .

So the real false positive is that Sonar flags single quotes that are used as attribute value delimiters, something that the HTML specification perfectly allows.

That’s not my experience. For me, the S6819 error is reported regardless of quote style.

I also don’t see the charset error message you mention (which wouldn’t make sense anyway since my code sample used double quotes for the charset property). I wonder if there was a copy-paste error when you tested my code?

The following code uses double quotes and reproduces the false positive:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>S6819 FP Example</title>
</head>
<body>
<svg role="img" aria-label="Blue rectangle" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="170" height="70" x="15" y="15" rx="17" ry="17" fill="blue"/>
</svg>
</body>
</html>

Screenshot showing S6819 FP for SVG with double quotes

I suppose I should have mentioned that I tested this with SonarLint in VSCodium, where, weirdly, it does make a difference.

I still get the S6819 false positive in VS Code (version 1.89.1):

With VS Code 1.89.1 and SonarLint v4.5.1, I don’t get a false positive, regardless of attribute syntax (role="img", role='img' or role=img).

In VSCodium, I get a warning for role='img' and role=img, but I now notice that this error is not generated by SonarLint but by the extension HTML-validate.

But whatever the cause of these results, role=img is a correct attribute.