Web:S6807 false-positive when aria attributes are bound

  • What language is this for?
    Javascript (Vue 3, Composition API, Single File Template)
  • Which rule?
    Web:S6807
  • Why do you believe it’s a false-positive/false-negative?
    This rule states that “aria-checked” is required by the role switch. In the example below, aria-checked is set using a vue binding. I’ve also tried without the shorthand, using v-bind, but that did not satisfy the rule.
<template>
    <div>
        <a role="switch" href="#" :aria-checked="vm.isChecked">
            Example
        </a>

         <a role="switch" href="#" v-bind:aria-checked="vm.isChecked">
            Example
        </a>
    </div>
</template>

<script setup lang="ts">

const vm = reactive({
    isChecked: false,
});

</script>
  • Are you using
    • SonarQube Cloud?
      Yes
    • SonarQube for IDE - which IDE/version?
      • VS Code v1.102.3 - Connected Mode with SonarQube Cloud
  • How can we reproduce the problem?
    See code above, screenshot provided for clarity.

Hi @brandon,

This is coming from our HTML analyzer. Unfortunately, we only support standard html and not templating like with vue bindings you are using here.

I’ll flag this to our PM to be aware and perhaps prioritize work on html/templating languages.

Kind regards,
Michal

1 Like

We already have a ticket about this rule with the same issue with Angular. I updated the ticket to also support vue: Jira

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