fix: do not allow fallback content for objects

dequelabs · Sep 21, 2020 · 08b1f67 · 08b1f67
1 parent 52b89f1
commit 08b1f67
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 30 deletions.
diff --git a/lib/rules/object-alt.json b/lib/rules/object-alt.json
@@ -14,7 +14,6 @@
 	},
 	"all": [],
 	"any": [
-		"has-visible-text",
 		"aria-label",
 		"aria-labelledby",
 		"non-empty-title",

diff --git a/test/integration/rules/object-alt/object-alt.html b/test/integration/rules/object-alt/object-alt.html
@@ -1,18 +1,13 @@
-<object id="pass1">This object has text.</object>
-<object id="pass2" title="This object has text"></object>
-<object id="pass3" aria-label="this object has text"></object>
+<object id="pass1" title="This object has text"></object>
+<object id="pass2" aria-label="this object has text"></object>
 <span id="label1">this object has text</span>
-<object id="pass4" aria-labelledby="label1"></object>
-<object id="pass5" role="presentation"></object>
-<object id="pass6" role="none"></object>
+<object id="pass3" aria-labelledby="label1"></object>
+<object id="pass4" role="presentation"></object>
+<object id="pass5" role="none"></object>
+
 <object id="violation1"></object>
 <object id="violation2"><div></div></object>
-<object id="violation3"
-	><p style="display: none;">This object has no text.</p></object
->
-<object id="pass7" role="none"></object>
-<object id="pass8" role="presentation"></object>
-
+<object id="violation3">This object has text.</object>
 <object id="violation4" role="none" tabindex="0"></object>
 <object id="violation5" role="presentation" tabindex="0"></object>
 <object id="violation6" role="none" aria-live="assertive"></object>

diff --git a/test/integration/rules/object-alt/object-alt.json b/test/integration/rules/object-alt/object-alt.json
@@ -10,14 +10,5 @@
 		["#violation6"],
 		["#violation7"]
 	],
-	"passes": [
-		["#pass1"],
-		["#pass2"],
-		["#pass3"],
-		["#pass4"],
-		["#pass5"],
-		["#pass6"],
-		["#pass7"],
-		["#pass8"]
-	]
+	"passes": [["#pass1"], ["#pass2"], ["#pass3"], ["#pass4"], ["#pass5"]]
 }
diff --git a/test/integration/virtual-rules/object-alt.js b/test/integration/virtual-rules/object-alt.js
@@ -64,7 +64,7 @@ describe('object-alt', function() {
 		assert.lengthOf(results.incomplete, 0);
 	});
 
-	it('should pass for visible text content', function() {
+	it('should fail for visible text content', function() {
 		var node = new axe.SerialVirtualNode({
 			nodeName: 'object'
 		});
@@ -77,20 +77,20 @@ describe('object-alt', function() {
 
 		var results = axe.runVirtualRule('object-alt', node);
 
-		assert.lengthOf(results.passes, 1);
-		assert.lengthOf(results.violations, 0);
+		assert.lengthOf(results.passes, 0);
+		assert.lengthOf(results.violations, 1);
 		assert.lengthOf(results.incomplete, 0);
 	});
 
-	it('should incomplete when alt and children are missing', function() {
+	it('should fail when alt and children are missing', function() {
 		var results = axe.runVirtualRule('object-alt', {
 			nodeName: 'object',
 			attributes: {}
 		});
 
 		assert.lengthOf(results.passes, 0);
-		assert.lengthOf(results.violations, 0);
-		assert.lengthOf(results.incomplete, 1);
+		assert.lengthOf(results.violations, 1);
+		assert.lengthOf(results.incomplete, 0);
 	});
 
 	it('should fail children contain no visible text', function() {

diff --git a/test/playground.html b/test/playground.html
@@ -2,7 +2,68 @@
 <html lang="en">
 	<title>O hai</title>
 
-	<div class="foo" id="foo">foo</div>
+	<div class="listbox-area">
+		<div>
+			<span id="ss_elem" class="listbox-label">
+				Choose your animal sidekick
+			</span>
+			<div
+				id="ss_elem_list"
+				tabindex="0"
+				role="listbox"
+				aria-labelledby="ss_elem"
+			>
+				<ul role="group" aria-labelledby="cat1">
+					<li role="presentation" id="cat1">
+						Land
+					</li>
+					<li id="ss_elem_1" role="option">
+						Cat
+					</li>
+					<li id="ss_elem_2" role="option">
+						Dog
+					</li>
+					<li id="ss_elem_3" role="option">
+						Tiger
+					</li>
+					<li id="ss_elem_4" role="option">
+						Reindeer
+					</li>
+					<li id="ss_elem_5" role="option">
+						Raccoon
+					</li>
+				</ul>
+				<ul role="group" aria-labelledby="cat2">
+					<li role="presentation" id="cat2">
+						Water
+					</li>
+					<li id="ss_elem_6" role="option">
+						Dolphin
+					</li>
+					<li id="ss_elem_7" role="option">
+						Flounder
+					</li>
+					<li id="ss_elem_8" role="option">
+						Eel
+					</li>
+				</ul>
+				<ul role="group" aria-labelledby="cat3">
+					<li role="presentation" id="cat3">
+						Air
+					</li>
+					<li id="ss_elem_9" role="option">
+						Falcon
+					</li>
+					<li id="ss_elem_10" role="option">
+						Winged Horse
+					</li>
+					<li id="ss_elem_11" role="option">
+						Owl
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 
 	<script src="/axe.js"></script>
 	<script>