fix(implicit-role): return gridcell for td child of grid or treegrid (#…

…2501)
dequelabs · Sep 8, 2020 · 9066900 · 9066900
1 parent cef54a0
commit 9066900
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/lib/commons/standards/implicit-html-roles.js b/lib/commons/standards/implicit-html-roles.js
@@ -10,6 +10,7 @@ import isRowHeader from '../table/is-row-header';
 import sanitize from '../text/sanitize';
 import isFocusable from '../dom/is-focusable';
 import { closest } from '../../core/utils';
+import getExplicitRole from '../aria/get-explicit-role';
 
 const sectioningElementSelector =
 	getElementsByContentType('sectioning')
@@ -156,7 +157,12 @@ const implicitHtmlRoles = {
 	summary: 'button',
 	table: 'table',
 	tbody: 'rowgroup',
-	td: 'cell',
+	td: vNode => {
+		const table = closest(vNode, 'table');
+		const role = getExplicitRole(table);
+
+		return ['grid', 'treegrid'].includes(role) ? 'gridcell' : 'cell';
+	},
 	textarea: 'textbox',
 	tfoot: 'rowgroup',
 	th: vNode => {

diff --git a/test/commons/aria/implicit-role.js b/test/commons/aria/implicit-role.js
@@ -387,6 +387,20 @@ describe('aria.implicitRole', function() {
 		assert.equal(implicitRole(node), 'cell');
 	});
 
+	it('should return gridcell for "td" with grid parent', function() {
+		fixture.innerHTML = '<table role="grid"><td id="target"></td></table>';
+		var node = fixture.querySelector('#target');
+		flatTreeSetup(fixture);
+		assert.equal(implicitRole(node), 'gridcell');
+	});
+
+	it('should return gridcell for "td" with treegrid parent', function() {
+		fixture.innerHTML = '<table role="treegrid"><td id="target"></td></table>';
+		var node = fixture.querySelector('#target');
+		flatTreeSetup(fixture);
+		assert.equal(implicitRole(node), 'gridcell');
+	});
+
 	it('should return rowheader for "th[scope=row]"', function() {
 		fixture.innerHTML = '<table><th id="target" scope="row"></th></table>';
 		var node = fixture.querySelector('#target');

diff --git a/test/integration/rules/aria-allowed-attr/passes.html b/test/integration/rules/aria-allowed-attr/passes.html
@@ -1893,3 +1893,15 @@
 
 <span role="radio" id="pass75" aria-checked="false">I am RED!</span>
 <span role="radio" id="pass76" aria-checked="true">I am GREEN!</span>
+
+<table role="grid">
+	<td aria-selected="false" tabindex="0" id="pass77">
+		target 1
+	</td>
+</table>
+
+<table role="treegrid">
+	<td aria-selected="false" tabindex="0" id="pass78">
+		target 1
+	</td>
+</table>
diff --git a/test/integration/rules/aria-allowed-attr/passes.json b/test/integration/rules/aria-allowed-attr/passes.json
@@ -78,6 +78,8 @@
 		["#pass73"],
 		["#pass74"],
 		["#pass75"],
-		["#pass76"]
+		["#pass76"],
+		["#pass77"],
+		["#pass78"]
 	]
 }