fix(checks/keyboard): make no-focusable-content use messageKey the ri…

…ght way
dequelabs · Oct 14, 2021 · 872351d · 872351d
1 parent 4d7ed70
commit 872351d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/lib/checks/keyboard/no-focusable-content-evaluate.js b/lib/checks/keyboard/no-focusable-content-evaluate.js
@@ -32,12 +32,10 @@ function noFocusableContentEvaluate(node, options, virtualNode) {
   try {
     const focusableDescendants = getFocusableDescendants(virtualNode);
     if(focusableDescendants.length > 0) {
-      const unreliableElems = focusableDescendants.filter(descendant => usesUnreliableHidingStrategy(descendant));
-      if(unreliableElems.length > 0) {
-        const ids = unreliableElems.map(node => node.attr('id'));
-        const msg = `Using negative tabindex is not a reliable way of hiding interactive elements.  `
-          +`Element id(s): [${ids.map(id => '"'+id+'"')}].`;
-        this.data({messageKey: 'info', values: msg});
+      const notHiddenElements = focusableDescendants.filter(descendant => usesUnreliableHidingStrategy(descendant));
+      if(notHiddenElements.length > 0) {
+        this.data({ messageKey: 'notHidden' });
+        this.relatedNodes(notHiddenElements);
       }
     }
     return focusableDescendants.length === 0;

diff --git a/lib/checks/keyboard/no-focusable-content.json b/lib/checks/keyboard/no-focusable-content.json
@@ -5,7 +5,10 @@
     "impact": "serious",
     "messages": {
       "pass": "Element does not have focusable descendants",
-      "fail": "Element has focusable descendants",
+      "fail": {
+        "default": "Element has focusable descendants",
+        "notHidden": "Using negative tabindex is not a reliable way of hiding interactive elements"
+      },
       "incomplete": "Could not determine if element has descendants"
     }
   }