fix(label-content-name-mismatch): ignore non widget aria role(s) & …

…do not use deprecated `lookupTable.rolesOfType` (#2022) * fix: ignore non-widget roles for rule label-content-name-mismatch * update helper fn for getting role type * update aria-query * rollback using aria-query * updates * update
dequelabs · Feb 20, 2020 · 3b519a6 · 3b519a6
1 parent ff85972
commit 3b519a6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/lib/commons/aria/index.js b/lib/commons/aria/index.js
@@ -1995,7 +1995,7 @@ lookupTable.role = {
 		allowedElements: ['ol', 'ul']
 	},
 	tooltip: {
-		type: 'widget',
+		type: 'structure',
 		attributes: {
 			allowed: ['aria-expanded', 'aria-errormessage']
 		},
@@ -2387,15 +2387,9 @@ lookupTable.evaluateRoleForElement = {
 };
 
 /**
- * Reference -> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Widget_roles
- * The current lookupTable.role['widget'] widget, yeilds
- * ->
- * [
- * 	"alert", "alertdialog", "button", "checkbox", "dialog", "gridcell", "link", "log", "marquee", "menuitem", "menuitemcheckbox",
- * 	"menuitemradio", "option", "progressbar", "radio", "scrollbar", "searchbox", "slider", "spinbutton", "status", "switch", "tab", "tabpanel",
- * 	"textbox", "timer", "tooltip", "treeitem"
- * ]
- * There are some differences against specs, hence the below listing was made
+ * Note:
+ * 	Usage of `rolesOfType` is deprecated within the source code.
+ * 	Leaving this here for now, to keep support for custom rules.
  */
 lookupTable.rolesOfType = {
 	widget: [

diff --git a/lib/rules/label-content-name-mismatch-matches.js b/lib/rules/label-content-name-mismatch-matches.js
@@ -12,7 +12,10 @@ if (!role) {
 	return false;
 }
 
-const isWidgetType = aria.lookupTable.rolesOfType.widget.includes(role);
+const widgetRoles = Object.keys(aria.lookupTable.role).filter(
+	key => aria.lookupTable.role[key].type === `widget`
+);
+const isWidgetType = widgetRoles.includes(role);
 if (!isWidgetType) {
 	return false;
 }

diff --git a/test/integration/rules/label-content-name-mismatch/label-content-name-mismatch.html b/test/integration/rules/label-content-name-mismatch/label-content-name-mismatch.html
@@ -14,6 +14,7 @@
 <button id="pass7" name="link" aria-label="Next Page in the list">
 	Next Page
 </button>
+
 <!-- Fail -->
 <div id="fail1" role="link" aria-label="OK">Next</div>
 <button id="fail2" name="link" aria-label="the full">The full label</button>
@@ -38,4 +39,6 @@
 <!-- inapplicable -->
 <a id="inapplicable1" aria-label="OK">Next</a>
 <input id="inapplicable2" type="email" aria-label="E-mail" value="Contact" />
-<div id="inapplicable3" role="tooltip" aria-label="OK"></div>
+<div id="inapplicable3" role="tooltip" aria-label="OK">Ok</div>
+<div id="inapplicable4" role="feed" aria-label="RSS Feed">RSS Feed</div>
+<div id="inapplicable5" role="marquee" aria-label="Foo">Foo Restaurant</div>
diff --git a/test/rule-matches/label-content-name-mismatch-matches.js b/test/rule-matches/label-content-name-mismatch-matches.js
@@ -107,12 +107,12 @@ describe('label-content-name-mismatch-matches tests', function() {
 		assert.isFalse(actual);
 	});
 
-	it('returns true for widget role that does support name from content', function() {
+	it('returns false for non-widget role that does support name from content', function() {
 		var vNode = queryFixture(
 			'<div id="target" role="tooltip" aria-label="OK">Next</div>'
 		);
 		var actual = rule.matches(vNode.actualNode, vNode);
-		assert.isTrue(actual);
+		assert.isFalse(actual);
 	});
 
 	it('returns false for empty text content', function() {