Merge pull request #161 from browserstack/AXE-2194-label-content-name-mismatch

fix: AXE-2194 - FR1 fix false positives

Author: mattscepter

build/tasks/validate.js

@@ -331,6 +331,7 @@ const categories = [
   'sensory-and-visual-cues',
   'structure',
   'tables',
+  'labels',
   'text-alternatives',
   'time-and-media',
   'images'

lib/checks/label/label-content-name-mismatch-evaluate.js

@@ -5,6 +5,42 @@ import {
   sanitize,
   removeUnicode
 } from '../../commons/text';
+import stem from 'wink-porter2-stemmer';
+
+const threshold = 0.75;
+
+function cleanText(str) {
+  return str
+    ?.toLowerCase()
+    .normalize('NFKC')
+    .replace(/[\u200B-\u200D\u2060\uFEFF]/g, '')
+    .trim();
+}
+
+function replaceSynonyms(text) {
+  const synonymMap = {
+    '&': 'and'
+  };
+  return text
+    .split(/[^\p{L}\p{N}]+/u)
+    .map(word => synonymMap[word] || word)
+    .join(' ');
+}
+
+function stringStemmer(str) {
+  return replaceSynonyms(str)
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter(Boolean)
+    .map(word => {
+      const w = cleanText(word).replace(/[^\p{L}\p{N}]/gu, '');
+      try {
+        return stem(w);
+      } catch (err) {
+        return w;
+      }
+    })
+    .join(' ');
+}
 
 /**
  * Check if a given text exists in another
@@ -14,12 +50,45 @@ import {
  * @returns {Boolean}
  */
 function isStringContained(compare, compareWith) {
+  compare = stringStemmer(compare);
+  compareWith = stringStemmer(compareWith);
+
   const curatedCompareWith = curateString(compareWith);
   const curatedCompare = curateString(compare);
   if (!curatedCompareWith || !curatedCompare) {
     return false;
   }
-  return curatedCompareWith.includes(curatedCompare);
+  const res = curatedCompareWith.includes(curatedCompare);
+  if (res) {
+    return res;
+  }
+
+  const tokensA = compare.split(/[^\p{L}\p{N}]+/u);
+  const tokensB = compareWith.split(/[^\p{L}\p{N}]+/u);
+  const freqA = {},
+    freqB = {};
+  tokensA.forEach(word => {
+    freqA[word] = (freqA[word] || 0) + 1;
+  });
+  tokensB.forEach(word => {
+    freqB[word] = (freqB[word] || 0) + 1;
+  });
+
+  let dot = 0,
+    magA = 0,
+    magB = 0;
+  const allTerms = new Set([...Object.keys(freqA), ...Object.keys(freqB)]);
+  allTerms.forEach(term => {
+    const a = freqA[term] || 0;
+    const b = freqB[term] || 0;
+    dot += a * b;
+    magA += a * a;
+    magB += b * b;
+  });
+
+  const similarity =
+    magA && magB ? dot / (Math.sqrt(magA) * Math.sqrt(magB)) : 0;
+  return similarity >= threshold; // comparision with threshold as 75%
 }
 
 /**
@@ -32,7 +101,8 @@ function curateString(str) {
   const noUnicodeStr = removeUnicode(str, {
     emoji: true,
     nonBmp: true,
-    punctuations: true
+    punctuations: true,
+    whitespace: true
   });
   return sanitize(noUnicodeStr);
 }
@@ -52,9 +122,11 @@ function labelContentNameMismatchEvaluate(node, options, virtualNode) {
       subtreeDescendant: true,
       ignoreIconLigature: true,
       pixelThreshold,
-      occurrenceThreshold
+      occurrenceThreshold,
+      ignoreNativeTextAlternative: true // To Skip for nativeTextAlternative
     })
   ).toLowerCase();
+
   if (!visibleText) {
     return true;
   }

lib/commons/text/native-text-alternative.js

@@ -10,6 +10,10 @@ import nativeTextMethods from './native-text-methods';
  * @return {String} Accessible text
  */
 export default function nativeTextAlternative(virtualNode, context = {}) {
+  if (context.ignoreNativeTextAlternative) {
+    return '';
+  }
+
   const { actualNode } = virtualNode;
   if (
     virtualNode.props.nodeType !== 1 ||

lib/commons/text/remove-unicode.js

@@ -20,7 +20,7 @@ import emojiRegexText from 'emoji-regex';
  * @returns {String}
  */
 function removeUnicode(str, options) {
-  const { emoji, nonBmp, punctuations } = options;
+  const { emoji, nonBmp, punctuations, whitespace } = options;
 
   if (emoji) {
     str = str.replace(emojiRegexText(), '');
@@ -34,6 +34,9 @@ function removeUnicode(str, options) {
   if (punctuations) {
     str = str.replace(getPunctuationRegExp(), '');
   }
+  if (whitespace) {
+    str = str.replace(/\s+/g, '');
+  }
 
   return str;
 }

lib/commons/text/subtree-text.js

@@ -59,7 +59,19 @@ function subtreeText(virtualNode, context = {}) {
 
 const phrasingElements = getElementsByContentType('phrasing').concat(['#text']);
 
+function skipByInlineOverflow(virtualNode) {
+  const computedStyleOverflow = virtualNode._cache.computedStyle_overflow;
+  if (computedStyleOverflow && computedStyleOverflow === 'hidden') {
+    return true;
+  }
+  return false;
+}
+
 function appendAccessibleText(contentText, virtualNode, context) {
+  if (skipByInlineOverflow(virtualNode)) {
+    return contentText;
+  }
+
   const nodeName = virtualNode.props.nodeName;
   let contentTextAdd = accessibleTextVirtual(virtualNode, context);
   if (!contentTextAdd) {