diff --git a/lib/checks/keyboard/no-focusable-content-evaluate.js b/lib/checks/keyboard/no-focusable-content-evaluate.js index 65d02d044f..043dbfdf9f 100644 --- 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 index a67554e6a8..35c40fc77b 100644 --- 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" } }