|
1 | 1 | import autocompleteMatches from './autocomplete-matches'; |
2 | 2 |
|
3 | | -function autocompleteA11yMatches(node, virtualNode) { |
| 3 | +function nodeIsASearchFunctionality(node, currLevel=0, maxLevels=4) { |
| 4 | + if(!node) { |
| 5 | + return false; |
| 6 | + } |
| 7 | + |
| 8 | + function currentLevelSearch(node, currentLevel) { |
| 9 | + if(!node || currentLevel > maxLevels) { |
| 10 | + return false; |
| 11 | + } |
| 12 | + |
| 13 | + let details = `\nLevel ${currentLevel}:\n`; |
| 14 | + |
| 15 | + //collecting all the HTML attributes |
| 16 | + details += "Attributes:\n"; |
| 17 | + if(node.hasAttributes()) { |
| 18 | + const attributes = axe.utils.getNodeAttributes(node); |
| 19 | + for (let i = 0; i < attributes.length; i++) { |
| 20 | + let attr = attributes[i]; |
| 21 | + details += ` ${attr.name}: ${attr.value}\n`; |
| 22 | + } |
| 23 | + } |
| 24 | + |
| 25 | + // Collect any associated labels (if node is an input, select, textarea, etc.) |
| 26 | + if (node.labels) { |
| 27 | + details += "Labels:\n"; |
| 28 | + for (let j = 0; j < node.labels.length; j++) { |
| 29 | + details += ` ${node.labels[j].innerText}\n`; |
| 30 | + } |
| 31 | + } else if (node.nodeName.toLowerCase() === 'input' && node.type !== 'hidden') { |
| 32 | + let labels = document.querySelectorAll('label[for="' + node.id + '"]'); |
| 33 | + details += "Labels:\n"; |
| 34 | + labels.forEach(label => { |
| 35 | + details += ` ${label.innerText}\n`; |
| 36 | + }); |
| 37 | + } |
| 38 | + |
| 39 | + // Collect the given id |
| 40 | + details += `ID: ${node.id}\n`; |
| 41 | + // Collect all class names |
| 42 | + details += `Class Names: ${node.className.split(' ').filter(name => name).join(', ')}\n`; |
| 43 | + |
| 44 | + const regex = new RegExp('search', 'i'); |
| 45 | + if(regex.test(details)) { |
| 46 | + return true; |
| 47 | + } else { |
| 48 | + currentLevelSearch(node.parentElement, currentLevel + 1); |
| 49 | + } |
| 50 | + } |
| 51 | + return currentLevelSearch(node, currLevel); |
| 52 | +} |
| 53 | + |
| 54 | +function autocompleteA11yMatches(node, virtualNode) { |
4 | 55 | const a11yEngineFlag = true; |
5 | | - // the flag is used to tell autocomplete matcher that it is being called |
6 | | - // by a11y-engine and thus bypass an if block |
7 | | - return autocompleteMatches(node, virtualNode, a11yEngineFlag); |
| 56 | + /* the flag is used to tell autocomplete matcher that it is being called |
| 57 | + by a11y-engine and thus bypass an if block |
| 58 | + The second condition is to check we are not matching with search functionality */ |
| 59 | + return (autocompleteMatches(node, virtualNode, a11yEngineFlag) && !nodeIsASearchFunctionality(node)); |
8 | 60 | } |
9 | 61 |
|
10 | 62 | export default autocompleteA11yMatches; |
0 commit comments