S6842 false positive for radiogroup

SonarQube Enterprise Edition v10.6 (92116)

In my vue component I have a fieldset marked with the radiogroup role:

    <fieldset
        role="radiogroup"
        :aria-required="props.required"
        :aria-invalid="validation?.type === 'error'"
        :aria-errormessage="`${id}-errormessage`"
    >

This triggers a warning of type: Non-interactive elements should not be assigned interactive roles. (Web:S6842)

I believe this to be a false positive.

First, https://w3c.github.io/html-aria/#docconformance explicitly mentions radiogroup to be one of the few allowed roles of a fieldset.

https://www.w3.org/TR/WCAG20-TECHS/ARIA17 also has several examples of using “radiogroup” on a non-interactive element.

Another example can be found in ARIA: radiogroup role - Accessibility | MDN .

The idea of a radiogroup is to group several radio items from which only one can be selected. Making the radiogroup interactive is not necessary for that.

Hello @tkenbw,

Digging a bit deeper, it seems that you are correct in the sense that radiogroup is an allowed role of a <fieldset>.

That being said, this rule is imported from the eslint-plugin-jsx-a11y plugin and the rule is no-noninteractive-element-interactions. Investigating a bit further I’ve found this issue on their repo. With this, it seems to be a conscious decision to warn it in this exact case.

Please let me know if that answers a bit of the confusion this rule is introducing. Perhaps the resolution could be similar to the plugin, update the docs to better explain it.

Kind regards,
Michal

Do you also have a legend as the fieldset element’s first child element? If you don’t, your fieldset element is just a div with a fancier name.