Create rule S6847: Non-interactive elements shouldn't have event handlers (#3658)
* Add html to rule S6847 * Share description with HTML * Use a common folder --------- Co-authored-by: yassin-kammoun-sonarsource <yassin-kammoun-sonarsource@users.noreply.github.com> Co-authored-by: yassin-kammoun-sonarsource <yassin.kammoun@sonarsource.com> Co-authored-by: Yassin Kammoun <52890329+yassin-kammoun-sonarsource@users.noreply.github.com>
This commit is contained in:
github-actions[bot]
GitHub
parent
c9cbcb2a0c
commit
1a0597fc41
3
rules/S6847/common/how.adoc
Normal file
3
rules/S6847/common/how.adoc
Normal file
@ -0,0 +1,3 @@
|
||||
== How to fix it
|
||||
|
||||
To fix this issue, remove the event handler from the non-interactive element and attach it to an interactive element instead. If the element is not interactive, it should not have an event handler.
|
||||
5
rules/S6847/common/resources.adoc
Normal file
5
rules/S6847/common/resources.adoc
Normal file
@ -0,0 +1,5 @@
|
||||
== Resources
|
||||
=== Documentation
|
||||
|
||||
* WCAG - https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex[WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets]
|
||||
* MDN - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus[ARIA Techniques]
|
||||
5
rules/S6847/common/why.adoc
Normal file
5
rules/S6847/common/why.adoc
Normal file
@ -0,0 +1,5 @@
|
||||
Non-interactive HTML elements, such as ``++<div>++`` and ``++<span>++``, are not designed to have event handlers. When these elements are given event handlers, it can lead to accessibility issues.
|
||||
|
||||
== Why is this an issue?
|
||||
|
||||
Attaching event handlers to non-interactive HTML elements can lead to significant accessibility issues. These elements, such as ``++<div>++`` and ``++<span>++``, are not designed to interact with assistive technologies like screen readers, making it difficult for users with disabilities to navigate and interact with the website. Additionally, these elements may not be focusable or provide visual feedback when interacted with, resulting in a confusing and potentially frustrating user experience. Therefore, to maintain an accessible and user-friendly website, event handlers should be used exclusively with interactive elements.
|
||||
2
rules/S6847/html/metadata.json
Normal file
2
rules/S6847/html/metadata.json
Normal file
@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
26
rules/S6847/html/rule.adoc
Normal file
26
rules/S6847/html/rule.adoc
Normal file
@ -0,0 +1,26 @@
|
||||
include::../common/why.adoc[]
|
||||
|
||||
include::../common/how.adoc[]
|
||||
|
||||
=== Code examples
|
||||
|
||||
==== Noncompliant code example
|
||||
|
||||
[source,html,diff-id=1,diff-type=noncompliant]
|
||||
----
|
||||
<li onClick="changeText()" />
|
||||
<div onClick="changeText()" role="listitem" />
|
||||
----
|
||||
|
||||
==== Compliant solution
|
||||
|
||||
[source,html,diff-id=1,diff-type=compliant]
|
||||
----
|
||||
<div onClick="changeText()" role="button" />
|
||||
<div onClick="changeText()" role="presentation" />
|
||||
<input type="text" onClick=changeText() /> <!-- Interactive element does not require role. -->
|
||||
<button onClick=changeText() className="foo" /> <!-- button is interactive. -->
|
||||
<div onClick=changeText() role="button" aria-hidden /> <!-- This is hidden from the screenreader. -->
|
||||
----
|
||||
|
||||
include::../common/resources.adoc[]
|
||||
@ -1,26 +1,6 @@
|
||||
{
|
||||
"title": "Non-interactive elements shouldn't have event handlers",
|
||||
"type": "CODE_SMELL",
|
||||
"status": "ready",
|
||||
"remediation": {
|
||||
"func": "Constant\/Issue",
|
||||
"constantCost": "5min"
|
||||
},
|
||||
"tags": [
|
||||
"accessibility",
|
||||
"react"
|
||||
],
|
||||
"defaultSeverity": "Minor",
|
||||
"ruleSpecification": "RSPEC-6847",
|
||||
"sqKey": "S6847",
|
||||
"scope": "All",
|
||||
"defaultQualityProfiles": ["Sonar way"],
|
||||
"quickfix": "infeasible",
|
||||
"code": {
|
||||
"impacts": {
|
||||
"MAINTAINABILITY": "MEDIUM",
|
||||
"RELIABILITY": "LOW"
|
||||
},
|
||||
"attribute": "CONVENTIONAL"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
Non-interactive HTML elements, such as ``++<div>++`` and ``++<span>++``, are not designed to have event handlers. When these elements are given event handlers, it can lead to accessibility issues.
|
||||
include::../common/why.adoc[]
|
||||
|
||||
== Why is this an issue?
|
||||
|
||||
Attaching event handlers to non-interactive HTML elements can lead to significant accessibility issues. These elements, such as ``++<div>++`` and ``++<span>++``, are not designed to interact with assistive technologies like screen readers, making it difficult for users with disabilities to navigate and interact with the website. Additionally, these elements may not be focusable or provide visual feedback when interacted with, resulting in a confusing and potentially frustrating user experience. Therefore, to maintain an accessible and user-friendly website, event handlers should be used exclusively with interactive elements.
|
||||
|
||||
== How to fix it
|
||||
|
||||
To fix this issue, remove the event handler from the non-interactive element and attach it to an interactive element instead. If the element is not interactive, it should not have an event handler.
|
||||
include::../common/how.adoc[]
|
||||
|
||||
=== Code examples
|
||||
|
||||
==== Noncompliant code example
|
||||
|
||||
[source,text,diff-id=1,diff-type=noncompliant]
|
||||
[source,js,diff-id=1,diff-type=noncompliant]
|
||||
----
|
||||
<li onClick={() => void 0} />
|
||||
<div onClick={() => void 0} role="listitem" />
|
||||
@ -20,7 +14,7 @@ To fix this issue, remove the event handler from the non-interactive element and
|
||||
|
||||
==== Compliant solution
|
||||
|
||||
[source,text,diff-id=1,diff-type=compliant]
|
||||
[source,js,diff-id=1,diff-type=compliant]
|
||||
----
|
||||
<div onClick={() => void 0} role="button" />
|
||||
<div onClick={() => void 0} role="presentation" />
|
||||
@ -30,8 +24,4 @@ To fix this issue, remove the event handler from the non-interactive element and
|
||||
----
|
||||
|
||||
|
||||
== Resources
|
||||
=== Documentation
|
||||
|
||||
* WCAG - https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex[WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets]
|
||||
* MDN - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus[ARIA Techniques]
|
||||
include::../common/resources.adoc[]
|
||||
|
||||
@ -1,2 +1,25 @@
|
||||
{
|
||||
"title": "Non-interactive elements shouldn't have event handlers",
|
||||
"type": "CODE_SMELL",
|
||||
"status": "ready",
|
||||
"remediation": {
|
||||
"func": "Constant\/Issue",
|
||||
"constantCost": "5min"
|
||||
},
|
||||
"tags": [
|
||||
"accessibility"
|
||||
],
|
||||
"defaultSeverity": "Minor",
|
||||
"ruleSpecification": "RSPEC-6847",
|
||||
"sqKey": "S6847",
|
||||
"scope": "All",
|
||||
"defaultQualityProfiles": ["Sonar way"],
|
||||
"quickfix": "infeasible",
|
||||
"code": {
|
||||
"impacts": {
|
||||
"MAINTAINABILITY": "MEDIUM",
|
||||
"RELIABILITY": "LOW"
|
||||
},
|
||||
"attribute": "CONVENTIONAL"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user