Merge branch 'stefanruijsenaars-complex-headers'

squizlabs · Sep 17, 2020 · b56c1a9 · b56c1a9
2 parents fc81adb + 1000287
commit b56c1a9
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 6 deletions.
diff --git a/HTMLCS.Util.js b/HTMLCS.Util.js
@@ -903,6 +903,8 @@ _global.HTMLCS.util = function() {
      * - wrongHeaders (Array): Array of elements where headers attr is incorrect.
      *                         Each is a structure with following keys: element,
      *                         expected [headers attr], actual [headers attr].
+     * - isMultiLevelHeadersTable (Boolean): Whether this table has multi-level headers.
+     *                                    See: https://www.w3.org/WAI/tutorials/tables/multi-level/
      *
      * @param {DOMNode} element Table element to test upon.
      *
@@ -917,7 +919,8 @@ _global.HTMLCS.util = function() {
             allowScope: true,
             missingThId: [],
             missingTd: [],
-            wrongHeaders: []
+            wrongHeaders: [],
+            isMultiLevelHeadersTable: false,
         };
 
         var rows      = self.getChildrenForTable(element, 'tr');
@@ -1022,6 +1025,7 @@ _global.HTMLCS.util = function() {
 
         if ((multiHeaders.rows > 1) || (multiHeaders.cols > 1)) {
             retval.allowScope = false;
+            retval.isMultiLevelHeadersTable = true;
         } else if ((retval.allowScope === true) && ((multiHeaders.rows === 0) || (multiHeaders.cols === 0))) {
             // If only one column OR one row header.
             retval.required = false;

diff --git a/HTMLCS.js b/HTMLCS.js
@@ -84,13 +84,15 @@ _global.HTMLCS = new function()
         var translations = _global.translation[this.lang];
 
         if (!translations) {
-            throw new Error ('Missing translations for language ' + this.lang);
+            console.error('Missing translations for language ' + this.lang);
+            return '';
         }
 
         var translation = translations[text];
 
         if (!translation) {
-            throw new Error('Translation for "' + text + '" does not exist in current language ' + this.lang);
+            console.error('Translation for "' + text + '" does not exist in current language ' + this.lang);
+            return '';
         }
 
         return translation;

diff --git a/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_3/1_3_1.js b/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_3/1_3_1.js
@@ -459,9 +459,13 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_3_1_3_1 = {
             }
         }//end if
 
-        // Incorrect usage of headers - error; emit always.
-        for (var i = 0; i < headersAttr.wrongHeaders.length; i++) {
-            HTMLCS.addMessage(HTMLCS.ERROR, headersAttr.wrongHeaders[i].element, _global.HTMLCS.getTranslation("1_3_1_H43.IncorrectAttr").replace(/\{\{expected\}\}/g, headersAttr.wrongHeaders[i].expected).replace(/\{\{actual\}\}/g, headersAttr.wrongHeaders[i].actual), 'H43.IncorrectAttr');
+        if (headersAttr.isMultiLevelHeadersTable) {
+            HTMLCS.addMessage(HTMLCS.NOTICE, table, _global.HTMLCS.getTranslation("1_3_1_H43.IncorrectAttrNotice"), 'H43.IncorrectAttr');
+        } else {
+            // Incorrect usage of headers - error; emit always.
+            for (var i = 0; i < headersAttr.wrongHeaders.length; i++) {
+                HTMLCS.addMessage(HTMLCS.ERROR, headersAttr.wrongHeaders[i].element, _global.HTMLCS.getTranslation("1_3_1_H43.IncorrectAttr").replace(/\{\{expected\}\}/g, headersAttr.wrongHeaders[i].expected).replace(/\{\{actual\}\}/g, headersAttr.wrongHeaders[i].actual), 'H43.IncorrectAttr');
+            }
         }
 
         // Errors where headers are compulsory.

diff --git a/Tests/WCAG2/1_3_1_Table_Header_Attr.html b/Tests/WCAG2/1_3_1_Table_Header_Attr.html
@@ -13,6 +13,7 @@
 Assert: No Error *.H43.MissingHeadersAttrs on #correctTableHeadersComplexRowspan
 Assert: No Error *.H63.1 on #correctTableHeadersComplexRowspan
 Assert: No Error *.H43,H63 on #correctTableHeadersComplexRowspan
+Assert: No Error *.H43.IncorrectAttr on #multiHeaders
 -->
 </head>
 <body>
@@ -108,5 +109,50 @@
             </tr>
         </tbody>
     </table>
+    <table id="multiHeaders">
+        <caption>
+          Supplier contacts
+        </caption>
+        <tbody><tr>
+          <th id="blank">&nbsp;</th>
+          <th id="co1" headers="blank">Example 1 Ltd</th>
+          <th id="co2" headers="blank">Example 2 Co</th>
+        </tr>
+        <tr>
+          <th id="c1" headers="blank">Contact</th>
+          <td headers="co1 c1">James Phillips</td>
+          <td headers="co2 c1">Marie Beauchamp</td>
+        </tr>
+        <tr>
+          <th id="p1" headers="blank">Position</th>
+          <td headers="co1 p1">Sales Director</td>
+          <td headers="co2 p1">Sales Manager</td>
+        </tr>
+        <tr>
+          <th id="e1" headers="blank">Email</th>
+          <td headers="co1 e1">[email protected]</td>
+          <td headers="co2 e1">[email protected]</td>
+        </tr>
+        <tr>
+          <th>&nbsp;</th>
+          <th id="co3" headers="blank">Example 3 Ltd</th>
+          <th id="co4" headers="blank">Example 4 Inc</th>
+        </tr>
+        <tr>
+          <th id="c2" headers="blank">Contact</th>
+          <td headers="co3 c2">Suzette Jones</td>
+          <td headers="co4 c2">Alex Howe</td>
+        </tr>
+        <tr>
+          <th id="p2" headers="blank">Position</th>
+          <td headers="co3 p2">Sales Officer</td>
+          <td headers="co4 p2">Sales Director</td>
+        </tr>
+        <tr>
+          <th id="e2" headers="blank">Email</th>
+          <td headers="co3 e2">[email protected]</td>
+          <td headers="co4 e2">[email protected]</td>
+        </tr>
+      </tbody></table>
 </body>
 </html>
diff --git a/Translations/cn.js b/Translations/cn.js
@@ -106,6 +106,7 @@ _global.translation['cn'] = {
     ,"1_3_1_H63.2" : 'td元素上作为其他元素标题的作用域属性在HTML5中已经过时了。使用th元素代替。'
     ,"1_3_1_H43.ScopeAmbiguous" : '元素的作用域属性在具有多级标题的表中是不明确的。在td元素上使用headers属性。'
     ,"1_3_1_H43.IncorrectAttr" : '此td元素上不正确的headers属性。期望的“{{expected}}”，但发现“{{actual}}”'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
     ,"1_3_1_H43.HeadersRequired" : 'td元素与其关联的th元素之间的关系没有定义。由于该表有多个层次的th元素，因此必须在td元素上使用headers属性。'
     ,"1_3_1_H43.MissingHeaderIds" : '并非该表中的所有th元素都包含id属性。这些单元格应该包含id，以便td元素的header属性可以引用它们。'
     ,"1_3_1_H43.MissingHeadersAttrs" : '并非此表中的所有td元素都包含header属性。每个headers属性应该列出与该单元格关联的所有th元素的id。'

diff --git a/Translations/en.js b/Translations/en.js
@@ -121,6 +121,7 @@ _global.translation['en'] = {
     ,"1_3_1_H63.2" : 'Scope attributes on td elements that act as headings for other elements are obsolete in HTML5. Use a th element instead.'
     ,"1_3_1_H43.ScopeAmbiguous" : 'Scope attributes on th elements are ambiguous in a table with multiple levels of headings. Use the headers attribute on td elements instead.'
     ,"1_3_1_H43.IncorrectAttr" : 'Incorrect headers attribute on this td element. Expected "{{expected}}" but found "{{actual}}"'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td elements are correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'The relationship between td elements and their associated th elements is not defined. As this table has multiple levels of th elements, you must use the headers attribute on td elements.'
     ,"1_3_1_H43.MissingHeaderIds" : 'Not all th elements in this table contain an id attribute. These cells should contain ids so that they may be referenced by td elements\' headers attributes.'

diff --git a/Translations/fr.js b/Translations/fr.js
@@ -120,6 +120,7 @@ _global.translation['fr'] = {
     ,"1_3_1_H63.2" : 'Les attributs Scope sur les éléments td qui servent de titres pour d\'autres éléments sont obsolètes dans HTML5. Utilisez un th élément à la place.'
     ,"1_3_1_H43.ScopeAmbiguous" : 'Les attributs de portée sur ces éléments sont ambigus dans un tableau à niveaux multiples d\'en-têtes. Utilisez plutôt l\'attribut headers sur les éléments td.'
     ,"1_3_1_H43.IncorrectAttr" : 'L\'attribut d\'en-tête incorrect sur cet élément td. Attendue "{{expected}}" mais trouvée "{{actual}}".'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'La relation entre les éléments td et leurs éléments associés n\'est pas définie. Comme cette table a plusieurs niveaux de ces éléments, vous devez utiliser l\'attribut headers sur les éléments td.'
     ,"1_3_1_H43.MissingHeaderIds" : 'Tous les éléments de cette table ne contiennent pas un attribut id. Ces cellules devraient contenir des ids de sorte qu\'elles puissent être référencées par des éléments td attributs d\'en-têtes.'

diff --git a/Translations/it.js b/Translations/it.js
@@ -120,6 +120,7 @@ _global.translation['it'] = {
     ,"1_3_1_H63.2" : 'Scope attributes on td elements that act as headings for other elements are obsolete in HTML5. Use a th element instead.'
     ,"1_3_1_H43.ScopeAmbiguous" : 'Scope attributes on th elements are ambiguous in a table with multiple levels of headings. Use the headers attribute on td elements instead.'
     ,"1_3_1_H43.IncorrectAttr" : 'Incorrect headers attribute on this td element. Expected "{{expected}}" but found "{{actual}}"'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'The relationship between td elements and their associated th elements is not defined. As this table has multiple levels of th elements, you must use the headers attribute on td elements.'
     ,"1_3_1_H43.MissingHeaderIds" : 'Not all th elements in this table contain an id attribute. These cells should contain ids so that they may be referenced by td elements\' headers attributes.'

diff --git a/Translations/ja.js b/Translations/ja.js
@@ -120,6 +120,7 @@ _global.translation['ja'] = {
     ,"1_3_1_H63.2" : '他の要素の見出しとして機能する td 要素のスコープ属性は、HTML5では廃止されました。代わりに th 要素を使用してください。'
     ,"1_3_1_H43.ScopeAmbiguous" : '複数のレベルの見出しを持つテーブルでは、 th 要素のスコープ属性はあいまいです。代わりに td 要素の headers 属性を使用してください。'
     ,"1_3_1_H43.IncorrectAttr" : 'この td 要素のヘッダー属性が正しくありません。 "{{expected}}" を予期していましたが、 "{{actual}}" を検出しました'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'td 要素とそれに関連する th 要素の関係は定義されていません。このテーブルには複数レベルの th 要素があるため、 td 要素には headers 属性を使用する必要があります。'
     ,"1_3_1_H43.MissingHeaderIds" : 'このテーブルに id 属性を含まない th 要素があります。これらのセルは、それらが td 要素の headers 属性によって参照されるように ID を含むべきです。'

diff --git a/Translations/nl.js b/Translations/nl.js
@@ -120,6 +120,7 @@ _global.translation['nl'] = {
     ,"1_3_1_H63.2" : 'Scope attributen op td elementen die als hoofdingen gebruikt worden voor andere elementen zijn vervallen in HTML. Gebruik in plaats daarvan een th element.'
     ,"1_3_1_H43.ScopeAmbiguous" : 'Scope attributen op th elementen zijn ambigu in een tabel met meerdere niveaus van hoofding. Gebruik in plaats daarvan het headers attribuut op td elementen.'
     ,"1_3_1_H43.IncorrectAttr" : 'Foutief headers attribuut op dit td element. \"{{expected}}\" werd verwacht maar \"{{actual}}\" gevonden'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'De relatie tussen td elementen en de eraan gebonden th elementen werd niet omschreven. Gezien deze tabel meerdere niveaus th elmenten bevat, moet het headers attribuut gebruikt worden op td elementen.'
     ,"1_3_1_H43.MissingHeaderIds" : 'Niet alle th elementen in deze tabel hebben een id attribuut. Deze cellen zouden ids moeten bevatten zodat er kan naar verwezen worden in het headers attribuut van td elementen.'

diff --git a/Translations/pl.js b/Translations/pl.js
@@ -120,6 +120,7 @@ _global.translation['pl'] = {
     ,"1_3_1_H63.2" : 'Atrybuty scope używane na komórkach tabeli (<td>) aby oznaczyć nagłówek są przestarzałe w HTML5. Zaleca się skorzystanie ze znacznika <th>.'
     ,"1_3_1_H43.ScopeAmbiguous" : 'Użycie atrybutów scope na elementach th jest niejasne w tabeli z wieloma nagłówkami. Rekomenduje się użycie atrybutu "headers" w znaczniku <td>.'
     ,"1_3_1_H43.IncorrectAttr" : 'Nieprawidłowy atrybut nagłówka w znaczniku <td>. Zamiast "{{actual}}" powinien być "{{expected}}".'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'Nie zdefiniowano relacji pomiędzy komórką <td> a powiązanym z nią nagłówkiem <th>. Wskazana tabela ma wiele poziomów <th>, zatem należałoby użyć atrybutu "headers" w komórkach <td>.'
     ,"1_3_1_H43.MissingHeaderIds" : 'Nie wszystkie nagłówki th w tej tabeli posiadają atrybut "id" i nie będzie się można do nich odwołać za pomocą atrybutu "headers" w znacznikach <td>.'