From b64b26b71ae95ca0d24184c50b6ebc674f52b2b5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 18 Apr 2024 11:38:03 +0200 Subject: [PATCH] Create rule S5256 (#3886) * Add javascript to rule S5256 * [JS-3] Add Rspec --------- Co-authored-by: zglicz Co-authored-by: Michal Zgliczynski --- rules/S5256/exceptions.adoc | 32 ++++++++++++ rules/S5256/how.adoc | 8 +++ rules/S5256/html/metadata.json | 33 ------------- rules/S5256/html/rule.adoc | 73 ++-------------------------- rules/S5256/javascript/metadata.json | 2 + rules/S5256/javascript/rule.adoc | 51 +++++++++++++++++++ rules/S5256/metadata.json | 33 +++++++++++++ rules/S5256/resources.adoc | 24 +++++++++ rules/S5256/why.adoc | 5 ++ 9 files changed, 159 insertions(+), 102 deletions(-) create mode 100644 rules/S5256/exceptions.adoc create mode 100644 rules/S5256/how.adoc create mode 100644 rules/S5256/javascript/metadata.json create mode 100644 rules/S5256/javascript/rule.adoc create mode 100644 rules/S5256/resources.adoc create mode 100644 rules/S5256/why.adoc diff --git a/rules/S5256/exceptions.adoc b/rules/S5256/exceptions.adoc new file mode 100644 index 0000000000..edebe029f1 --- /dev/null +++ b/rules/S5256/exceptions.adoc @@ -0,0 +1,32 @@ +=== Exceptions + +No issue will be raised on `` used for layout purpose, i.e. when it contains a `role` attribute set to `"presentation"` or `"none"`. +[source,html] +---- +
+ + + + + + + + +
NameAge
John Doe42
+---- +Note that https://www.w3schools.com/html/html_layout.asp[using for layout purpose is a bad practice]. + +No issue will be raised on `
` containing an `aria-hidden` attribute set to `"true"`. +[source,html] +---- +
+ + + + + + + + + +---- diff --git a/rules/S5256/how.adoc b/rules/S5256/how.adoc new file mode 100644 index 0000000000..0770db64cd --- /dev/null +++ b/rules/S5256/how.adoc @@ -0,0 +1,8 @@ +== How to fix it + +The first `` of the table should contain `` 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 `` 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. diff --git a/rules/S5256/html/metadata.json b/rules/S5256/html/metadata.json index dd4c641bd2..2c63c08510 100644 --- a/rules/S5256/html/metadata.json +++ b/rules/S5256/html/metadata.json @@ -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" } diff --git a/rules/S5256/html/rule.adoc b/rules/S5256/html/rule.adoc index ed61ad60cf..2bbdf63295 100644 --- a/rules/S5256/html/rule.adoc +++ b/rules/S5256/html/rule.adoc @@ -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 `` does not contain any `` of the table should contain `
` elements. -=== Exceptions +include::../exceptions.adoc[] -No issue will be raised on `` used for layout purpose, i.e. when it contains a `role` attribute set to `"presentation"` or `"none"`. -[source,html] ----- -
- - - - - - - - -
NameAge
John Doe42
----- -Note that https://www.w3schools.com/html/html_layout.asp[using for layout purpose is a bad practice]. - -No issue will be raised on `
` containing an `aria-hidden` attribute set to `"true"`. -[source,html] ----- -
- - - - - - - - - ----- - -== How to fix it - -The first `
` 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 `` 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
---- -== 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 "" headers to this "" - - -=== Highlighting - -The opening
tag, without its content. - - -endif::env-github,rspecator-view[] +include::../resources.adoc[] diff --git a/rules/S5256/javascript/metadata.json b/rules/S5256/javascript/metadata.json new file mode 100644 index 0000000000..7a73a41bfd --- /dev/null +++ b/rules/S5256/javascript/metadata.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/rules/S5256/javascript/rule.adoc b/rules/S5256/javascript/rule.adoc new file mode 100644 index 0000000000..a26d7f48a0 --- /dev/null +++ b/rules/S5256/javascript/rule.adoc @@ -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 `
` elements. + +include::../exceptions.adoc[] + +include::../how.adoc[] + +=== Code examples + +==== Noncompliant code example + +[source,javascript,diff-id=1,diff-type=noncompliant] +---- + + + + + + + + + + + + + +
NameAge
John Doe24
Alice Doe54
+---- + +==== Compliant solution + +[source,javascript,diff-id=1,diff-type=compliant] +---- + + + + + + + + + + + + + +
NameAge
John Doe24
Alice Doe54
+---- + +include::../resources.adoc[] diff --git a/rules/S5256/metadata.json b/rules/S5256/metadata.json index 2c63c08510..dd4c641bd2 100644 --- a/rules/S5256/metadata.json +++ b/rules/S5256/metadata.json @@ -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" } diff --git a/rules/S5256/resources.adoc b/rules/S5256/resources.adoc new file mode 100644 index 0000000000..321357dae3 --- /dev/null +++ b/rules/S5256/resources.adoc @@ -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 "		" headers to this "" + + +=== Highlighting + +The opening
tag, without its content. + + +endif::env-github,rspecator-view[] diff --git a/rules/S5256/why.adoc b/rules/S5256/why.adoc new file mode 100644 index 0000000000..1938b7e62f --- /dev/null +++ b/rules/S5256/why.adoc @@ -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.