From 473c6826ad5a5f84f698b295bae5034f4ed93e22 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 12 Apr 2024 11:18:00 +0200 Subject: [PATCH] Create rule S6819 (#3866) * Add html to rule S6819 * Add rule S6819 for html * add noncompliant comments --------- Co-authored-by: vdiez Co-authored-by: Victor --- rules/S6819/common/fix.adoc | 1 + rules/S6819/common/resources.adoc | 9 +++++++++ rules/S6819/common/why.adoc | 7 +++++++ rules/S6819/html/metadata.json | 2 ++ rules/S6819/html/rule.adoc | 15 ++++++++++++++ rules/S6819/javascript/metadata.json | 21 +------------------ rules/S6819/javascript/rule.adoc | 30 ++++------------------------ rules/S6819/metadata.json | 22 ++++++++++++++++++++ 8 files changed, 61 insertions(+), 46 deletions(-) create mode 100644 rules/S6819/common/fix.adoc create mode 100644 rules/S6819/common/resources.adoc create mode 100644 rules/S6819/common/why.adoc create mode 100644 rules/S6819/html/metadata.json create mode 100644 rules/S6819/html/rule.adoc diff --git a/rules/S6819/common/fix.adoc b/rules/S6819/common/fix.adoc new file mode 100644 index 0000000000..29c45d7dde --- /dev/null +++ b/rules/S6819/common/fix.adoc @@ -0,0 +1 @@ +Replace the ARIA role with an appropriate HTML tag. \ No newline at end of file diff --git a/rules/S6819/common/resources.adoc b/rules/S6819/common/resources.adoc new file mode 100644 index 0000000000..43d33c2673 --- /dev/null +++ b/rules/S6819/common/resources.adoc @@ -0,0 +1,9 @@ +== Resources +=== Documentation + +* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[Using ARIA: Roles, states, and properties] +* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[ARIA roles (Reference)] + +=== Standards + +* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2] diff --git a/rules/S6819/common/why.adoc b/rules/S6819/common/why.adoc new file mode 100644 index 0000000000..b7c4f453c1 --- /dev/null +++ b/rules/S6819/common/why.adoc @@ -0,0 +1,7 @@ +== Why is this an issue? + +ARIA (Accessible Rich Internet Applications) roles are used to make web content and web applications more accessible to people with disabilities. However, you should not use an ARIA role on a generic element (like `span` or `div`) if there is a semantic HTML tag with similar functionality, just use that tag instead. + +For example, instead of using a div element with a button role (`
Click me
`), you should just use a button element (``). + +Semantic HTML tags are generally preferred over ARIA roles for accessibility due to their built-in functionality, universal support by browsers and assistive technologies, simplicity, and maintainability. They come with inherent behaviors and keyboard interactions, reducing the need for additional JavaScript. Semantic HTML also enhances SEO by helping search engines better understand the content and structure of web pages. While ARIA roles are useful, they should be considered a last resort when no suitable HTML element can provide the required behavior or semantics. \ No newline at end of file diff --git a/rules/S6819/html/metadata.json b/rules/S6819/html/metadata.json new file mode 100644 index 0000000000..7a73a41bfd --- /dev/null +++ b/rules/S6819/html/metadata.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/rules/S6819/html/rule.adoc b/rules/S6819/html/rule.adoc new file mode 100644 index 0000000000..f81bed7fe1 --- /dev/null +++ b/rules/S6819/html/rule.adoc @@ -0,0 +1,15 @@ +include::../common/why.adoc[] + +[source,html,diff-id=1,diff-type=noncompliant] +---- +
Click me
+---- + +include::../common/fix.adoc[] + +[source,html,diff-id=1,diff-type=compliant] +---- + +---- + +include::../common/resources.adoc[] \ No newline at end of file diff --git a/rules/S6819/javascript/metadata.json b/rules/S6819/javascript/metadata.json index 4750fc3f62..d79173ef44 100644 --- a/rules/S6819/javascript/metadata.json +++ b/rules/S6819/javascript/metadata.json @@ -1,25 +1,6 @@ { - "title": "Prefer tag over ARIA role", - "type": "CODE_SMELL", - "status": "ready", - "remediation": { - "func": "Constant\/Issue", - "constantCost": "5min" - }, "tags": [ "accessibility", "react" - ], - "defaultSeverity": "Major", - "ruleSpecification": "RSPEC-6819", - "sqKey": "S6819", - "scope": "All", - "defaultQualityProfiles": ["Sonar way"], - "quickfix": "infeasible", - "code": { - "impacts": { - "MAINTAINABILITY": "LOW" - }, - "attribute": "CONVENTIONAL" - } + ] } diff --git a/rules/S6819/javascript/rule.adoc b/rules/S6819/javascript/rule.adoc index 297232a89d..7c9fc43250 100644 --- a/rules/S6819/javascript/rule.adoc +++ b/rules/S6819/javascript/rule.adoc @@ -1,37 +1,15 @@ -== Why is this an issue? - -ARIA (Accessible Rich Internet Applications) roles are used to make web content and web applications more accessible to people with disabilities. However, you should not use an ARIA role on a generic element (like `span` or `div`) if there is a semantic HTML tag with similar functionality, just use that tag instead. - -For example, instead of using a div element with a button role (`
Click me
`), you should just use a button element (``). - -Semantic HTML tags are generally preferred over ARIA roles for accessibility due to their built-in functionality, universal support by browsers and assistive technologies, simplicity, and maintainability. They come with inherent behaviors and keyboard interactions, reducing the need for additional JavaScript. Semantic HTML also enhances SEO by helping search engines better understand the content and structure of web pages. While ARIA roles are useful, they should be considered a last resort when no suitable HTML element can provide the required behavior or semantics. - -== How to fix it in JSX - -Replace the ARIA role with an appropriate HTML tag. - -=== Code examples - -==== Noncompliant code example +include::../common/why.adoc[] [source,javascript,diff-id=1,diff-type=noncompliant] ---- -
Click me
+
Click me
---- -==== Compliant solution +include::../common/fix.adoc[] [source,javascript,diff-id=1,diff-type=compliant] ---- ---- -== Resources -=== Documentation - -* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[Using ARIA: Roles, states, and properties] -* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[ARIA roles (Reference)] - -=== Standards - -* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2] +include::../common/resources.adoc[] \ No newline at end of file diff --git a/rules/S6819/metadata.json b/rules/S6819/metadata.json index 2c63c08510..e4520e1237 100644 --- a/rules/S6819/metadata.json +++ b/rules/S6819/metadata.json @@ -1,2 +1,24 @@ { + "title": "Prefer tag over ARIA role", + "type": "CODE_SMELL", + "status": "ready", + "remediation": { + "func": "Constant\/Issue", + "constantCost": "5min" + }, + "tags": [ + "accessibility" + ], + "defaultSeverity": "Major", + "ruleSpecification": "RSPEC-6819", + "sqKey": "S6819", + "scope": "All", + "defaultQualityProfiles": ["Sonar way"], + "quickfix": "infeasible", + "code": { + "impacts": { + "MAINTAINABILITY": "LOW" + }, + "attribute": "CONVENTIONAL" + } }