Create rule S6852: Elements with an interactive role should support f…

…ocus (#3444)

rules/S6852/javascript/metadata.json

@@ -0,0 +1,26 @@
+{
+  "title": "Elements with an interactive role should support focus",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "ruleSpecification": "RSPEC-6852",
+  "sqKey": "S6852",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}

rules/S6852/javascript/rule.adoc

@@ -0,0 +1,40 @@
+Interactive elements being focusable is vital for website accessibility. It enables users, including those using assistive technologies, to interact effectively with the website. Without this, some users may be unable to access certain features, leading to a poor user experience and potential non-compliance with accessibility standards.
+
+== Why is this an issue?
+
+Lack of focusability can hinder navigation and interaction with the website, resulting in an exclusionary user experience and possible violation of accessibility guidelines.
+
+== How to fix it
+
+Ensure that all interactive elements on your website can receive focus. This can be achieved by using standard HTML interactive elements, or by assigning a `tabindex` attribute of "0" to custom interactive components.
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<!-- Element with mouse/keyboard handler has no tabindex -->
+<span onclick="submitForm();" role="button">Submit</span>
+
+<!-- Anchor element without href is not focusable -->
+<a onclick="showNextPage();" role="button">Next page</a>
+----
+
+==== Compliant solution
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<!-- Element with mouse handler has tabIndex -->
+<span onClick="doSomething();" tabIndex="0" role="button">Submit</span>
+
+<!-- Focusable anchor with mouse handler -->
+<a href="javascript:void(0);" onClick="doSomething();"> Next page </a>
+----
+
+== Resources
+=== Documentation
+
+ * W3C - https://www.w3.org/TR/WCAG20-TECHS/H4.html[Creating a logical tab order through links, form controls, and objects]
+ * W3C -  https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav[Fundamental Keyboard Navigation Conventions]
+ * MDN - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#accessibility_concerns[ARIA: button role - Accessibility concerns]

rules/S6852/metadata.json

@@ -0,0 +1,2 @@
+{
+}