Web:S6807 false-positive when aria attributes are bound

Rules and Languages Report False-positive / False-negative...
, , ,
1
  • 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.
    image
    image837×241 12.5 KB
3

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