Add HTML to rule S6823 (#3673)
* Add html to rule S6823 * Remove HTML mention in "How to fix it" --------- Co-authored-by: ericmorand-sonarsource <ericmorand-sonarsource@users.noreply.github.com> Co-authored-by: Eric MORAND <eric.morand@sonarsource.com>
This commit is contained in:
parent
e81a653567
commit
c9cbcb2a0c
30
rules/S6823/common/rule.adoc
Normal file
30
rules/S6823/common/rule.adoc
Normal file
@ -0,0 +1,30 @@
|
||||
:doctype: book
|
||||
|
||||
# tag::header[]
|
||||
|
||||
== Why is this an issue?
|
||||
|
||||
include::../../../shared_content/jsts/aria-intro-1.adoc[]
|
||||
|
||||
The `aria-activedescendant` attribute is used to enhance the accessibility of composite widgets by managing focus within them. It allows a parent element to retain active document focus while indicating which of its child elements has secondary focus. This attribute is particularly useful in interactive components like search typeahead select lists, where the user can navigate through a list of options while continuing to type in the input field.
|
||||
|
||||
This rule checks that DOM elements with the `aria-activedescendant` property either have an inherent tabIndex or declare one.
|
||||
|
||||
# end::header[]
|
||||
|
||||
# tag::footer[]
|
||||
|
||||
== 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)]
|
||||
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant[`aria-activedescendant` attribute]
|
||||
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[`tabIndex` attribute]
|
||||
|
||||
=== Standards
|
||||
|
||||
* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]
|
||||
* W3C - https://www.w3.org/TR/wai-aria/#composite[Composite role]
|
||||
|
||||
# end::footer[]
|
2
rules/S6823/html/metadata.json
Normal file
2
rules/S6823/html/metadata.json
Normal file
@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
27
rules/S6823/html/rule.adoc
Normal file
27
rules/S6823/html/rule.adoc
Normal file
@ -0,0 +1,27 @@
|
||||
include::../common/rule.adoc[tag=header]
|
||||
|
||||
== How to fix it
|
||||
|
||||
Make sure that DOM elements with the `aria-activedescendant` property have a `tabindex` property, or use an element with an inherent one.
|
||||
|
||||
=== Code examples
|
||||
|
||||
==== Noncompliant code example
|
||||
|
||||
[source,html,diff-id=1,diff-type=noncompliant]
|
||||
----
|
||||
<div aria-activedescendant="descendantId">
|
||||
<div id="descendantId"></div>
|
||||
</div>
|
||||
----
|
||||
|
||||
==== Compliant solution
|
||||
|
||||
[source,html,diff-id=1,diff-type=compliant]
|
||||
----
|
||||
<div aria-activedescendant="descendantId" tabIndex="0">
|
||||
<div id="descendantId"></div>
|
||||
</div>
|
||||
----
|
||||
|
||||
include::../common/rule.adoc[tag=footer]
|
@ -1,25 +1,6 @@
|
||||
{
|
||||
"title": "DOM elements with the `aria-activedescendant` property should be accessible via the tab key",
|
||||
"type": "CODE_SMELL",
|
||||
"status": "ready",
|
||||
"remediation": {
|
||||
"func": "Constant\/Issue",
|
||||
"constantCost": "5min"
|
||||
},
|
||||
"tags": [
|
||||
"react",
|
||||
"accessibility"
|
||||
],
|
||||
"defaultSeverity": "Minor",
|
||||
"ruleSpecification": "RSPEC-6823",
|
||||
"sqKey": "S6823",
|
||||
"scope": "All",
|
||||
"defaultQualityProfiles": ["Sonar way"],
|
||||
"quickfix": "targeted",
|
||||
"code": {
|
||||
"impacts": {
|
||||
"RELIABILITY": "MEDIUM"
|
||||
},
|
||||
"attribute": "LOGICAL"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -1,10 +1,4 @@
|
||||
== Why is this an issue?
|
||||
|
||||
include::../../../shared_content/jsts/aria-intro-1.adoc[]
|
||||
|
||||
The `aria-activedescendant` attribute is used to enhance the accessibility of composite widgets by managing focus within them. It allows a parent element to retain active document focus while indicating which of its child elements has secondary focus. This attribute is particularly useful in interactive components like search typeahead select lists, where the user can navigate through a list of options while continuing to type in the input field.
|
||||
|
||||
This rule checks that DOM elements with the `aria-activedescendant` property either have an inherent tabIndex or declare one.
|
||||
include::../common/rule.adoc[tag=header]
|
||||
|
||||
== How to fix it in JSX
|
||||
|
||||
@ -30,15 +24,4 @@ Make sure that DOM elements with the `aria-activedescendant` property have a `ta
|
||||
</div>
|
||||
----
|
||||
|
||||
== 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)]
|
||||
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant[`aria-activedescendant` attribute]
|
||||
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[`tabIndex` attribute]
|
||||
|
||||
=== Standards
|
||||
|
||||
* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]
|
||||
* W3C - https://www.w3.org/TR/wai-aria/#composite[Composite role]
|
||||
include::../common/rule.adoc[tag=footer]
|
@ -1,2 +1,24 @@
|
||||
{
|
||||
"title": "DOM elements with the `aria-activedescendant` property should be accessible via the tab key",
|
||||
"type": "CODE_SMELL",
|
||||
"status": "ready",
|
||||
"remediation": {
|
||||
"func": "Constant\/Issue",
|
||||
"constantCost": "5min"
|
||||
},
|
||||
"tags": [
|
||||
"accessibility"
|
||||
],
|
||||
"defaultSeverity": "Minor",
|
||||
"ruleSpecification": "RSPEC-6823",
|
||||
"sqKey": "S6823",
|
||||
"scope": "All",
|
||||
"defaultQualityProfiles": ["Sonar way"],
|
||||
"quickfix": "targeted",
|
||||
"code": {
|
||||
"impacts": {
|
||||
"RELIABILITY": "MEDIUM"
|
||||
},
|
||||
"attribute": "LOGICAL"
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user