Bug 1578494 - ignore valid labels with "label for" relations as they are clickable. r=nchevobbe

Depends on D45215

Differential Revision: https://phabricator.services.mozilla.com/D45216

--HG--
extra : moz-landing-system : lando

devtools/server/actors/accessibility/audit/keyboard.js

@@ -371,7 +371,12 @@ function semanticsRule(accessible) {
     // Ignore text leafs.
     accessible.role === Ci.nsIAccessibleRole.ROLE_TEXT_LEAF ||
     // Ignore accessibles with no accessible actions.
-    accessible.actionCount === 0
+    accessible.actionCount === 0 ||
+    // Ignore labels that have a label for relation with their target because
+    // they are clickable.
+    (accessible.role === Ci.nsIAccessibleRole.ROLE_LABEL &&
+      accessible.getRelationByType(Ci.nsIAccessibleRelation.RELATION_LABEL_FOR)
+        .targetsCount > 0)
   ) {
     return null;
   }

devtools/server/tests/browser/browser_accessibility_keyboard_audit.js

@@ -164,6 +164,18 @@ add_task(async function() {
       "#owned_listbox",
       null,
     ],
+    [
+      "Mouse interactive, label that contains form element (linked)",
+      "#label-1",
+      null,
+    ],
+    ["Mouse interactive label for external element (linked)", "#label-2", null],
+    ["Not interactive unlinked label", "#label-3", null],
+    [
+      "Not interactive unlinked label with folloing form element",
+      "#label-4",
+      null,
+    ],
   ];
 
   for (const [description, selector, expected] of tests) {

devtools/server/tests/browser/doc_accessibility_keyboard_audit.html

@@ -65,5 +65,9 @@
       <li role="option">Zebra</li>
       <li role="option" id="selected_option">Zoom</li>
   </ul>
+  <label id="label-1">hello<input type="checkbox" name="world" /></label>
+  <label id="label-2" for="checkbox-1">hello</label>
+  <label id="label-3">hello</label>
+  <label id="label-4">hello</label><input type="checkbox" name="world" />
 </body>
 </html>