S6819 Prefer tag over role is misleading

gitgdako · January 15, 2024, 2:30pm

What language is this for? JS/TS/React
Which rule? S6819 Prefer tag over ARIA role
Why do you believe it’s a false-positive/false-negative?
Quoting from ARIA: table role - Accessibility | MDN
The table value of the ARIA role identifies … similar to the native HTML element. Therefore using some other component does not conflict with the role attributes specification
Using a component framework that has a table implementation, which does not have the aria role set can be enriched with that specific attribute. Since there is no sensible way to disable a rule for a single line, let alone for a specific rule, in JS/TS/React, the only way around is disabling the rule

ganncamp · January 16, 2024, 6:10pm

Hi,

Thanks for this report. Unfortunately, I’m not quite following it. Can you provide a code sample to demonstrate where an issue is raised and should not be?

Thx,
Ann

gitgdako · January 18, 2024, 8:43am

We are using UI5 React, the React reference implementation of SAP Fiori, which is a UI components library. They provide a table implementation with a lot of features, but do not set the ARIA role on any (most anyways) of their components, in that case it isnt set on that table. To enrich this component with accessability we want to set the attribute, which raises the error. This table complies to the aria role table as per specification.

We can not change the component library and not using a HTML table element does not necessarily invalidate the aria role definition, therefore making it necessary to manually set the role=‘table’ attribute

<AnalyticalTable role={‘table’} from @ui5/webcomponents-react - npm

ganncamp · January 18, 2024, 12:38pm

Hi,

Thanks for the detail. I’ve flagged this for the language experts.

And a code sample would still be helpful.

Ann

gab · March 30, 2024, 10:36am

Hi @gitgdako,

Thanks for bringing this up! Sorry for the huge delay.

Currently, we don’t have extensive support for SAP UI5 React, although we’ve heard a few users ask for it. I added your voice for future consideration

Anyway, I think this could be a false positive for other UI component libraries too so I created a ticket:

github.com/SonarSource/SonarJS

S6819 False Positive when using SAP UI5 React components

opened 10:33AM - 30 Mar 24 UTC

gabriel-vivas-sonarsource

type: false positive

| Label | Description | | --- | --- | | Rule | S6819 "Prefer tag over ARIA rol…e" | | Subject | S6819 False Positive in components that represent tables when using SAP UI5 React components | | Community | https://community.sonarsource.com/t/s6819-prefer-tag-over-role-is-misleading/107348 | ## Explanation It appears that when you have a SAP UI5 react component which represents a table and you add an ARIA `role`, we complain: ``` <AnalyticalTable role={‘table’} ...> ``` It appears we raise an issue here, saying that table elements are preferable to aria roles in other components. I'm worried this is the case for many React UI libraries... ## Expectation As far as I can tell: * We shouldn't raise at all if the component doesn't pass the aria role (I think it might) * Or we shouldn't complain when a user adds the `role` to a component that is not a table element We should not raise on SAP UI5 components. This could also be true for other UI libraries, since the person coding cannot change the library. We could consider whenever we add better support for SAP UI5 for React. See community thread: > The table value of the ARIA role identifies … similar to the native HTML element. Therefore using some other component does not conflict with the role attributes specification Using a component framework that has a table implementation, which does not have the aria role set can be enriched with that specific attribute. Since there is no sensible way to disable a rule for a single line, let alone for a specific rule, in JS/TS/React, the only way around is disabling the rule > We are using UI5 React, the React reference implementation of SAP Fiori, which is a UI components library. They provide a table implementation with a lot of features, but do not set the ARIA role on any (most anyways) of their components, in that case it isnt set on that table. To enrich this component with accessability we want to set the attribute, which raises the error. This table complies to the aria role table as per specification. > We can not change the component library and not using a HTML table element does not necessarily invalidate the aria role definition, therefore making it necessary to manually set the role=‘table’ attribute > <AnalyticalTable role={‘table’} from [@ui5/webcomponents-react - npm](https://www.npmjs.com/package/@ui5/webcomponents-react)

Kinds regards,