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

Clean Code Report False-positive / False-negative...
, , , ,
1
  • 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>
2

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.

3

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

4

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

6

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

Screenshot of S6819 FP in VS Code
Screenshot of S6819 FP in VS Code829×123 19.4 KB

7

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.

9

Hi Doug and Christophe,

I agree it is a False Positive.

Sonar should not warn about ARIA role img on inline SVGs, here’s the ticket I created including the helpful info you provided:
https://sonarsource.atlassian.net/browse/SONARHTML-252

1 Like
11

Great, thanks for looking into it, @gab !

1 Like
14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.