diff --git a/rules/S6811/common/how.adoc b/rules/S6811/common/how.adoc new file mode 100644 index 00000000000..9cf2d696d4c --- /dev/null +++ b/rules/S6811/common/how.adoc @@ -0,0 +1,3 @@ +== How to fix it + +Check the spelling of the aria-* attributes and verify that they are actually supported by the element role. Remove non-compatible attributes or replace them with the correct ones. diff --git a/rules/S6811/common/resources.adoc b/rules/S6811/common/resources.adoc new file mode 100644 index 00000000000..6d299506cbd --- /dev/null +++ b/rules/S6811/common/resources.adoc @@ -0,0 +1,10 @@ +== 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/Attributes[ARIA states and properties (Reference)] +* 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/S6811/common/why.adoc b/rules/S6811/common/why.adoc new file mode 100644 index 00000000000..b8cceea187c --- /dev/null +++ b/rules/S6811/common/why.adoc @@ -0,0 +1,7 @@ +== Why is this an issue? + +ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide additional semantics to help assistive technologies, like screen readers, interpret the element. + +Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based on the type of the element. For example, an anchor tag has an implicit role of "link". + +This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA property `aria-required` is not supported by the role `link`. Therefore, using `aria-required` on an anchor tag would violate this rule. \ No newline at end of file diff --git a/rules/S6811/html/metadata.json b/rules/S6811/html/metadata.json new file mode 100644 index 00000000000..7a73a41bfdf --- /dev/null +++ b/rules/S6811/html/metadata.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/rules/S6811/html/rule.adoc b/rules/S6811/html/rule.adoc new file mode 100644 index 00000000000..892c620926a --- /dev/null +++ b/rules/S6811/html/rule.adoc @@ -0,0 +1,15 @@ +include::../common/why.adoc[] + +[source,html,diff-id=1,diff-type=noncompliant] +---- +
Unchecked
{/* Noncompliant: aria-chekd is not supported */} +---- + +include::../common/how.adoc[] + +[source,html,diff-id=1,diff-type=compliant] +---- +
Unchecked
+---- + +include::../common/resources.adoc[] \ No newline at end of file diff --git a/rules/S6811/javascript/metadata.json b/rules/S6811/javascript/metadata.json index 3575b94f1d1..f4c37c6761b 100644 --- a/rules/S6811/javascript/metadata.json +++ b/rules/S6811/javascript/metadata.json @@ -1,26 +1,6 @@ { - "title": "DOM elements with ARIA role should only have supported properties", - "type": "CODE_SMELL", - "status": "ready", - "remediation": { - "func": "Constant\/Issue", - "constantCost": "5min" - }, - "tags": [ - "accessibility", - "react" - ], - "defaultSeverity": "Major", - "ruleSpecification": "RSPEC-6811", - "sqKey": "S6811", - "scope": "All", - "defaultQualityProfiles": ["Sonar way"], - "quickfix": "infeasible", - "code": { - "impacts": { - "MAINTAINABILITY": "LOW", - "RELIABILITY": "LOW" - }, - "attribute": "CONVENTIONAL" - } + "tags": [ + "accessibility", + "react" + ] } diff --git a/rules/S6811/javascript/rule.adoc b/rules/S6811/javascript/rule.adoc index 3ca1bae7deb..6cf1762a8da 100644 --- a/rules/S6811/javascript/rule.adoc +++ b/rules/S6811/javascript/rule.adoc @@ -1,34 +1,15 @@ -== Why is this an issue? - -ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide additional semantics to help assistive technologies, like screen readers, interpret the element. - -Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based on the type of the element. For example, an anchor tag
has an implicit role of "link". - -This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA property `aria-required` is not supported by the role `link`. Therefore, using `aria-required` on an anchor tag would violate this rule. - -== How to fix it in JSX - -Check the spelling of the aria-* attributes and verify that they are actually supported by the element role. +include::../common/why.adoc[] [source,javascript,diff-id=1,diff-type=noncompliant] ----
Unchecked
{/* Noncompliant: aria-chekd is not supported */} ---- -To fix the code remove non-compatible attributes or replace them with the correct ones. +include::../common/how.adoc[] [source,javascript,diff-id=1,diff-type=compliant] ----
Unchecked
---- -== 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/Attributes[ARIA states and properties (Reference)] -* 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/S6811/metadata.json b/rules/S6811/metadata.json index 2c63c085104..9a66edf369e 100644 --- a/rules/S6811/metadata.json +++ b/rules/S6811/metadata.json @@ -1,2 +1,25 @@ { + "title": "DOM elements with ARIA role should only have supported properties", + "type": "CODE_SMELL", + "status": "ready", + "remediation": { + "func": "Constant\/Issue", + "constantCost": "5min" + }, + "tags": [ + "accessibility" + ], + "defaultSeverity": "Major", + "ruleSpecification": "RSPEC-6811", + "sqKey": "S6811", + "scope": "All", + "defaultQualityProfiles": ["Sonar way"], + "quickfix": "infeasible", + "code": { + "impacts": { + "MAINTAINABILITY": "LOW", + "RELIABILITY": "LOW" + }, + "attribute": "CONVENTIONAL" + } }