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:
github-actions[bot] 2024-02-23 09:56:47 +01:00 committed by GitHub
parent e81a653567
commit c9cbcb2a0c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 84 additions and 39 deletions

View 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[]

View File

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

View 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]

View File

@ -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"
}
]
}

View File

@ -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]

View File

@ -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"
}
}