A false-positive warning in Sonar rule S6819 for valid use of role="region"

Rules and Languages Report False-positive / False-negative...
, ,
1

What language is this for?
TypeScript / Angular HTML templates

Which rule?
Rule: S6819 – Prefer tag over ARIA role

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

This warning is a false positive because the rule incorrectly flags the valid, WCAG-compliant usage of:

role="region" aria-labelledby="..."

This pattern is fully correct, recommended by WAI-ARIA, and necessary when using Angular Material components such as <mat-card> ( Angular Material UI component library )

Sonar’s rule S6819 is a heuristic, not a WCAG requirement.
The rule only checks whether role="region" exists and flags it blindly, even when:

  • The region has a visible heading

  • The region is correctly labelled using aria-labelledby

  • The component is a UI library element (e.g., Angular Material) that cannot change its host element

In this scenario, the ARIA implementation follows best practices and meets WCAG 1.3.1, 2.4.1, and 4.1.2.

Therefore, the warning triggered by S6819 is a false-positive.

Are you using:

  • SonarQube Server

    • Enterprise Edition v2025.1.4

SonarQube for IDE?
VSCode

How can we reproduce the problem?

Sonar incorrectly reports an issue on this valid Angular template code:

<mat-card role="region" aria-labelledby="reportsHeading" appearance="outlined">
  <mat-card-header>
    <mat-card-title id="reportsHeading">Reports</mat-card-title>
  </mat-card-header>

  <mat-card-content>
    <p>Some content here</p>
  </mat-card-content>
</mat-card>

Why this is valid:

  • <mat-card> cannot be replaced with <section> because Angular Material controls its host element.

  • role="region" + aria-labelledby="reportsHeading" is the proper WAI-ARIA pattern for creating a labelled landmark.

  • This satisfies WAI-ARIA Authoring Practices 1.2 and WCAG 1.3.1 / 2.4.6.

  • Many Angular libraries rely on ARIA roles to create accessible landmarks.

Despite this, Sonar triggers:

“Use <section> instead of role=‘region’ to ensure accessibility across devices.” (S6819)

This is inaccurate and conflicts with official accessibility guidance.

Sonar Community Roundup, November 22 - November 28
3

Hi,

You’ve listed your SonarQube server version. Are you running in connected mode? And can you share your version of SonarQube for VS Code?

 
Thx,
Ann

4

Hi,

sonar-error-image
sonar-error-image1881×830 144 KB

Please find the attached image from where I added the version.

Thanks

Ajay

5

Hi Ajay,

We’ve got an open ticket that I think is relevant here:

SONARHTML-291 Allow users to configure a whitelist of ARIA roles for S6819

You might want to keep an eye on this.

 
HTH,
Ann

6

I can reproduce this with SonarQube for IDE running in VSCodium.

Whether it is a good idea to use <div role=”region” aria-labelledby=…> or <div role=”region” aria-label=”…”> instead of <section> is debatable. To be sure, the section element can’t be given an accessible name like an element with role=”region”, but since screen reader users rely more on heading navigation than on landmark navigation, the benefits of the ARIA-based approach may not be that impressive anyway.

But Angular creates a different situation. Perhaps the rule should take into account whether role=”region” is encountered in plain HTML as opposed to Angular?

1 Like
10

Hi @ajaymalhotra and @ChristopheS,

Absolutely agreed. We will soon get this patched up - JS-960 Fix S6819 false positives for custom components by zglicz · Pull Request #5979 · SonarSource/SonarJS · GitHub

Cheers,

Michal