Create rule S5256 (#3886)
* Add javascript to rule S5256 * [JS-3] Add Rspec --------- Co-authored-by: zglicz <zglicz@users.noreply.github.com> Co-authored-by: Michal Zgliczynski <michal.zgliczynski@sonarsource.com>
This commit is contained in:
github-actions[bot]
GitHub
parent
5324878eed
commit
b64b26b71a
32
rules/S5256/exceptions.adoc
Normal file
32
rules/S5256/exceptions.adoc
Normal file
@ -0,0 +1,32 @@
|
||||
=== Exceptions
|
||||
|
||||
No issue will be raised on `<table>` used for layout purpose, i.e. when it contains a `role` attribute set to `"presentation"` or `"none"`.
|
||||
[source,html]
|
||||
----
|
||||
<table role="presentation">
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Age</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</table>
|
||||
----
|
||||
Note that https://www.w3schools.com/html/html_layout.asp[using <table> for layout purpose is a bad practice].
|
||||
|
||||
No issue will be raised on `<table>` containing an `aria-hidden` attribute set to `"true"`.
|
||||
[source,html]
|
||||
----
|
||||
<table aria-hidden="true">
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Age</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</table>
|
||||
----
|
||||
8
rules/S5256/how.adoc
Normal file
8
rules/S5256/how.adoc
Normal file
@ -0,0 +1,8 @@
|
||||
== How to fix it
|
||||
|
||||
The first `<tr>` of the table should contain `<th>` elements, with the appropriate description of what the data in those columns represents.
|
||||
|
||||
=== Going the extra mile
|
||||
|
||||
Headers should be properly associated with the corresponding `<td>` cells by using either a `scope` attribute or `headers` and `id` attributes.
|
||||
See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tutorials] for more information.
|
||||
@ -1,35 +1,2 @@
|
||||
{
|
||||
"title": "Tables should have headers",
|
||||
"type": "BUG",
|
||||
"code": {
|
||||
"impacts": {
|
||||
"RELIABILITY": "MEDIUM"
|
||||
},
|
||||
"attribute": "COMPLETE"
|
||||
},
|
||||
"status": "ready",
|
||||
"remediation": {
|
||||
"func": "Constant\/Issue",
|
||||
"constantCost": "2min"
|
||||
},
|
||||
"tags": [
|
||||
"accessibility",
|
||||
"wcag2-a"
|
||||
],
|
||||
"extra": {
|
||||
"replacementRules": [
|
||||
|
||||
],
|
||||
"legacyKeys": [
|
||||
|
||||
]
|
||||
},
|
||||
"defaultSeverity": "Major",
|
||||
"ruleSpecification": "RSPEC-5256",
|
||||
"sqKey": "S5256",
|
||||
"scope": "Main",
|
||||
"defaultQualityProfiles": [
|
||||
"Sonar way"
|
||||
],
|
||||
"quickfix": "unknown"
|
||||
}
|
||||
|
||||
@ -1,52 +1,10 @@
|
||||
== Why is this an issue?
|
||||
|
||||
Table headers are essential to enhance the accessibility of a table's data, particularly for assistive technologies like screen readers.
|
||||
These headers provide the necessary context to transform data into information.
|
||||
Without headers, users get rapidly lost in the flow of data.
|
||||
include::../why.adoc[]
|
||||
|
||||
This rule raises an issue whenever a `<table>` does not contain any `<th>` elements.
|
||||
|
||||
=== Exceptions
|
||||
include::../exceptions.adoc[]
|
||||
|
||||
No issue will be raised on `<table>` used for layout purpose, i.e. when it contains a `role` attribute set to `"presentation"` or `"none"`.
|
||||
[source,html]
|
||||
----
|
||||
<table role="presentation">
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Age</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</table>
|
||||
----
|
||||
Note that https://www.w3schools.com/html/html_layout.asp[using <table> for layout purpose is a bad practice].
|
||||
|
||||
No issue will be raised on `<table>` containing an `aria-hidden` attribute set to `"true"`.
|
||||
[source,html]
|
||||
----
|
||||
<table aria-hidden="true">
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Age</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</table>
|
||||
----
|
||||
|
||||
== How to fix it
|
||||
|
||||
The first `<tr>` of the table should contain `<th>` elements, with the appropriate description of what the data in those columns represents.
|
||||
|
||||
=== Going the extra mile
|
||||
|
||||
Headers should be properly associated with the corresponding `<td>` cells by using either a `scope` attribute or `headers` and `id` attributes.
|
||||
See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tutorials] for more information.
|
||||
include::../how.adoc[]
|
||||
|
||||
=== Code examples
|
||||
|
||||
@ -91,27 +49,4 @@ See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tuto
|
||||
</table>
|
||||
----
|
||||
|
||||
== Resources
|
||||
|
||||
=== Documentation
|
||||
|
||||
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-content-structure-separation-programmatic[WCAG2, 1.3.1] - Info and Relationships
|
||||
* https://www.w3.org/TR/WCAG20-TECHS/H51[WCAG2, H51] - Using table markup to present tabular information
|
||||
|
||||
ifdef::env-github,rspecator-view[]
|
||||
|
||||
'''
|
||||
== Implementation Specification
|
||||
(visible only on this page)
|
||||
|
||||
=== Message
|
||||
|
||||
Add "<th>" headers to this "<table>"
|
||||
|
||||
|
||||
=== Highlighting
|
||||
|
||||
The opening <table> tag, without its content.
|
||||
|
||||
|
||||
endif::env-github,rspecator-view[]
|
||||
include::../resources.adoc[]
|
||||
|
||||
2
rules/S5256/javascript/metadata.json
Normal file
2
rules/S5256/javascript/metadata.json
Normal file
@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
51
rules/S5256/javascript/rule.adoc
Normal file
51
rules/S5256/javascript/rule.adoc
Normal file
@ -0,0 +1,51 @@
|
||||
include::../why.adoc[]
|
||||
|
||||
This rule raises an issue whenever it detects a table that does not have a full row or column with `<th>` elements.
|
||||
|
||||
include::../exceptions.adoc[]
|
||||
|
||||
include::../how.adoc[]
|
||||
|
||||
=== Code examples
|
||||
|
||||
==== Noncompliant code example
|
||||
|
||||
[source,javascript,diff-id=1,diff-type=noncompliant]
|
||||
----
|
||||
<table> <!-- Noncompliant -->
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Age</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alice Doe</td>
|
||||
<td>54</td>
|
||||
</tr>
|
||||
</table>
|
||||
----
|
||||
|
||||
==== Compliant solution
|
||||
|
||||
[source,javascript,diff-id=1,diff-type=compliant]
|
||||
----
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Age</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alice Doe</td>
|
||||
<td>54</td>
|
||||
</tr>
|
||||
</table>
|
||||
----
|
||||
|
||||
include::../resources.adoc[]
|
||||
@ -1,2 +1,35 @@
|
||||
{
|
||||
"title": "Tables should have headers",
|
||||
"type": "BUG",
|
||||
"code": {
|
||||
"impacts": {
|
||||
"RELIABILITY": "MEDIUM"
|
||||
},
|
||||
"attribute": "COMPLETE"
|
||||
},
|
||||
"status": "ready",
|
||||
"remediation": {
|
||||
"func": "Constant\/Issue",
|
||||
"constantCost": "2min"
|
||||
},
|
||||
"tags": [
|
||||
"accessibility",
|
||||
"wcag2-a"
|
||||
],
|
||||
"extra": {
|
||||
"replacementRules": [
|
||||
|
||||
],
|
||||
"legacyKeys": [
|
||||
|
||||
]
|
||||
},
|
||||
"defaultSeverity": "Major",
|
||||
"ruleSpecification": "RSPEC-5256",
|
||||
"sqKey": "S5256",
|
||||
"scope": "Main",
|
||||
"defaultQualityProfiles": [
|
||||
"Sonar way"
|
||||
],
|
||||
"quickfix": "unknown"
|
||||
}
|
||||
|
||||
24
rules/S5256/resources.adoc
Normal file
24
rules/S5256/resources.adoc
Normal file
@ -0,0 +1,24 @@
|
||||
== Resources
|
||||
|
||||
=== Documentation
|
||||
|
||||
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-content-structure-separation-programmatic[WCAG2, 1.3.1] - Info and Relationships
|
||||
* https://www.w3.org/TR/WCAG20-TECHS/H51[WCAG2, H51] - Using table markup to present tabular information
|
||||
|
||||
ifdef::env-github,rspecator-view[]
|
||||
|
||||
'''
|
||||
== Implementation Specification
|
||||
(visible only on this page)
|
||||
|
||||
=== Message
|
||||
|
||||
Add "<th>" headers to this "<table>"
|
||||
|
||||
|
||||
=== Highlighting
|
||||
|
||||
The opening <table> tag, without its content.
|
||||
|
||||
|
||||
endif::env-github,rspecator-view[]
|
||||
5
rules/S5256/why.adoc
Normal file
5
rules/S5256/why.adoc
Normal file
@ -0,0 +1,5 @@
|
||||
== Why is this an issue?
|
||||
|
||||
Table headers are essential to enhance the accessibility of a table's data, particularly for assistive technologies like screen readers.
|
||||
These headers provide the necessary context to transform data into information.
|
||||
Without headers, users get rapidly lost in the flow of data.
|
||||
Loading…
x
Reference in New Issue
Block a user