a422950ed5
You can preview this rule [here](https://sonarsource.github.io/rspec/#/rspec/S6793/javascript) (updated a few minutes after each push).
37 lines
1.5 KiB
Plaintext
37 lines
1.5 KiB
Plaintext
== Why is this an issue?
|
|
|
|
include::../../../shared_content/jsts/aria-intro-1.adoc[]
|
|
|
|
Each role in ARIA has a set of required attributes that must be included for the role to be properly understood by assistive technologies. These attributes are known as "required aria-* properties".
|
|
|
|
For example, if an element has a role of "checkbox", it must also include the aria-checked property. This property indicates whether the checkbox is checked (true), unchecked (false), or in a mixed state (mixed).
|
|
|
|
This rule checks that each element with a defined ARIA role also has all required attributes.
|
|
|
|
== How to fix it in JSX
|
|
|
|
Check that each element with a defined ARIA role also has all required attributes.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<div role="checkbox">Unchecked</div> {/* Noncompliant: aria-checked is missing */}
|
|
----
|
|
|
|
To fix the code add missing aria-* attributes.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
<div role="checkbox" aria-checked={isChecked}>Unchecked</div>
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[MDN - Using ARIA: Roles, states, and properties]
|
|
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[MDN - ARIA roles (Reference)]
|
|
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[MDN - ARIA states and properties (Reference)]
|
|
|
|
=== Standards
|
|
|
|
* https://www.w3.org/TR/wai-aria-1.2/[W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.2]
|