Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Check if table is just layout a table using some conditions #248

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 44 additions & 7 deletions HTMLCS.Util.js
Original file line number Diff line number Diff line change
Expand Up @@ -467,21 +467,58 @@ _global.HTMLCS.util = function() {
/**
* Returns true if the table passed is a layout table.
*
* If the passed table contains headings - through the use of the th
* element - HTML_CodeSniffer will assume it is a data table. This is in line
* with most other online checkers.
* It uses this conditions:
* https://squizlabs.github.io/HTML_CodeSniffer/Standards/WCAG2/1_3_1#what-is-a-data-table
*
* @param {Node} table The table to check.
*
* @returns {Boolean}
*/
self.isLayoutTable = function(table) {
var th = table.querySelector('th');
if (th === null) {
return true;
var score = 0;

// The use of the role attribute with the value presentation
var role = table.getAttribute('role');
if (role === 'presentation') {
// Probably a layout table
score += 1;
}

return false;
// The use of the border attribute with the non-conforming value 0
var border = table.getAttribute('border');
if (border == 0) {
// Probably a layout table
score += 1;
} else {
// Probably a non-layout table
score -= 1;
}

// The use of the non-conforming cellspacing and cellpadding attributes with the value 0
var spacing = table.getAttribute('cellspacing');
var padding = table.getAttribute('cellpadding');
if (spacing == 0 && padding == 0) {
// Probably a layout table
score += 1;
}

// The use of caption, thead, or th elements
var headers = table.querySelectorAll('caption, thead, th');
var excludeHeaders = table.querySelectorAll('table caption, table thead, table th');
if (headers.length > excludeHeaders.length) {
// Probably a non-layout table
score -= 1;
}

// The use of the headers and scope attributes
var cells = table.querySelectorAll('td[header], th[scope]');
var excludeCells = table.querySelectorAll('table td[header], table th[scope]');
if (cells.length > excludeCells.length) {
// Probably a non-layout table
score -= 1;
}

return score > 0;
};

/**
Expand Down