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?
|
include::../why.adoc[]
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
This rule raises an issue whenever a `<table>` does not contain any `<th>` elements.
|
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"`.
|
include::../how.adoc[]
|
||||||
[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.
|
|
||||||
|
|
||||||
=== Code examples
|
=== Code examples
|
||||||
|
|
||||||
@ -91,27 +49,4 @@ See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tuto
|
|||||||
</table>
|
</table>
|
||||||
----
|
----
|
||||||
|
|
||||||
== Resources
|
include::../resources.adoc[]
|
||||||
|
|
||||||
=== 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[]
|
|
||||||
|
|||||||
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