JS-18 S6819 False Positive when using SAP UI5 React components

[gabriel-vivas-sonarsource]

Label	Description
Rule	S6819 "Prefer tag over ARIA role"
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 something similar could happen for many React UI libraries and even regular components. I think we should double-check this. See for example here: https://community.sonarsource.com/t/accessibility-rules-enforcement/106138

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

[Wohops]

Migrated to Jira. New ticket number: JS-18