feat(rule): Label and Name from Content mismatch WCAG21 (Issue #1149)

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

@@ -34,15 +34,17 @@ function isStringContained(compare, compareWith) {
 }
 
 /**
- * Curate given text, by removing emoji's, punctuations, unicode and trimming.
+ * Curate given text, by removing emoji's, punctuations, unicode and trim whitespace.
  *
  * @param {String} str given text to curate
  * @returns {String}
  */
 function curateString(str) {
-	return text.sanitize(
-		text.replacePunctuation(
-			text.replaceNonBmpUnicode(text.replaceEmojiUnicode(str))
-		)
+	const noEmojiUnicodeStr = text.replaceUnicode(str, (type = 'emoji'));
+	const noNonBmpUnicodeStr = text.replaceUnicode(
+		noEmojiUnicodeStr,
+		(type = 'nonBmp')
 	);
+	const noPunctuationsStr = text.replacePunctuation(noNonBmpUnicodeStr);
+	return text.sanitize(noPunctuationsStr);
 }

lib/commons/text/is-human-interpretable.js

@@ -28,15 +28,13 @@ text.isHumanInterpretable = function(str) {
 	}
 
 	// Step 1
-	if (str.length === 1) {
-		const alphaNumericIconMap = [
-			'x', // close
-			'i' // info
-		];
-		// Step 1a
-		if (alphaNumericIconMap.includes(str)) {
-			return 0;
-		}
+	const alphaNumericIconMap = [
+		'x', // close
+		'i' // info
+	];
+	// Step 1a
+	if (alphaNumericIconMap.includes(str)) {
+		return 0;
 	}
 
 	// Step 2 - handle punctuation
@@ -47,9 +45,12 @@ text.isHumanInterpretable = function(str) {
 
 	// Step 3
 	// a - check for astral (non bilingual multi plane unicode)
-	if (
-		!text.sanitize(text.replaceNonBmpUnicode(text.replaceEmojiUnicode(str)))
-	) {
+	const noEmojiUnicodeStr = text.replaceUnicode(str, (type = 'emoji'));
+	const noNonBmpUnicodeStr = text.replaceUnicode(
+		noEmojiUnicodeStr,
+		(type = 'nonBmp')
+	);
+	if (!text.sanitize(noNonBmpUnicodeStr)) {
 		return 0;
 	}
 

lib/commons/text/unicode.js

@@ -1,72 +1,62 @@
 /* global text */
 
 /**
- * Regex for matching unicode values out of Basic Multilingual Plane (BMP)
- *
- * Reference:
- * - https://github.com/mathiasbynens/regenerate
- * - https://unicode-table.com/
- * - https://mathiasbynens.be/notes/javascript-unicode
- * -
- */
-
-/**
- * Determine if a given string contains code points that are not from basic multilingual plane
+ * Determine if a given string contains unicode character points of specified type
+ * Allowed type(s):
+ * - 'nonBmp' -> Non Bilingual Multi Plane
+ * - 'emoji' -> Emoji
  *
- * @method isNonBmpUnicode
+ * @method hasUnicode
  * @memberof axe.commons.text
  * @instance
  * @param {String} str string to verify
+ * @param {String} type type of unicode character set
  * @returns {Boolean}
  */
-text.isNonBmpUnicode = function isNonBmpUnicode(str) {
-	return getUnicodeNonBmpRegExp().test(str);
+text.hasUnicode = function hasUnicode(str, type = 'nonBmp') {
+	switch (type.toLowerCase()) {
+		case 'emoji':
+			return axe.imports.emojiRegexText().test(str);
+		case 'nonbmp':
+		default:
+			return getUnicodeNonBmpRegExp().test(str);
+	}
 };
 
 /**
- * Replace non basic multilingual plane characters with supplied alternative
+ * Replace specified type unicode characters with supplied alternative
+ * Allowed type(s):
+ * - 'nonBmp' -> Non Bilingual Multi Plane
+ * - 'emoji' -> Emoji
  *
- * @method replaceNonBmpUnicode
+ * @method replaceUnicode
  * @memberof axe.commons.text
  * @instance
  * @param {String} str string to operate on
+ * @param {String} type type of unicode character set
+ * @param {String} replaceWith alternative character for replacement
  * @returns {String}
  */
-text.replaceNonBmpUnicode = function replaceNonBmpUnicode(
+text.replaceUnicode = function replaceUnicode(
 	str,
+	type = 'nonBmp',
 	replaceWith = ''
 ) {
-	return str.replace(getUnicodeNonBmpRegExp(), replaceWith);
-};
-
-/**
- * Determine if a given string contains emoji
- *
- * @method isEmojiUnicode
- * @memberof axe.commons.text
- * @instance
- * @param {String} str string to verify
- * @returns {Boolean}
- */
-text.isEmojiUnicode = function isEmojiUnicode(str) {
-	return axe.imports.emojiRegexText().test(str);
-};
-
-/**
- * Replace astral plane unicode with a given replacement value
- *
- * @method replaceEmojiUnicode
- * @memberof axe.commons.text
- * @instance
- * @param {String} str string to operate on
- * @returns {String}
- */
-text.replaceEmojiUnicode = function replaceEmojiUnicode(str, replaceWith = '') {
-	return str.replace(axe.imports.emojiRegexText(), replaceWith);
+	switch (type.toLowerCase()) {
+		case 'emoji':
+			return str.replace(axe.imports.emojiRegexText(), replaceWith);
+		case 'nonbmp':
+		default:
+			return str.replace(getUnicodeNonBmpRegExp(), replaceWith);
+	}
 };
 
 /**
- * Get regular expression for matching unicode
+ * Regex for matching unicode values out of Basic Multilingual Plane (BMP)
+ * Reference:
+ * - https://github.com/mathiasbynens/regenerate
+ * - https://unicode-table.com/
+ * - https://mathiasbynens.be/notes/javascript-unicode
  *
  * @returns {RegExp}
  */

package.json

@@ -86,7 +86,7 @@
 		"clone": "~2.1.1",
 		"css-selector-parser": "^1.3.0",
 		"dot": "~1.1.2",
-		"emoji-regex": "^7.0.3",
+		"emoji-regex": "7.0.3",
 		"es6-promise": "^4.2.5",
 		"eslint": "^5.9.0",
 		"eslint-config-prettier": "^3.4.0",

test/commons/text/accessible-text.js

@@ -113,7 +113,7 @@ describe('text.accessibleTextVirtual', function() {
 
 		var target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
 		assert.equal(
-			axe.commons.text.accessibleTextVirtual(target, { debug: true }),
+			axe.commons.text.accessibleTextVirtual(target),
 			'This is a hidden secret'
 		);
 	});
@@ -260,7 +260,7 @@ describe('text.accessibleTextVirtual', function() {
 		// Chrome returns: This is This is a label of
 		// Firefox returns: This is ARIA Label
 		assert.equal(
-			axe.commons.text.accessibleTextVirtual(target, { debug: true }),
+			axe.commons.text.accessibleTextVirtual(target),
 			'This is This is a label of'
 		);
 	});
@@ -520,10 +520,7 @@ describe('text.accessibleTextVirtual', function() {
 		axe._tree = axe.utils.getFlattenedTree(fixture);
 
 		var target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
-		assert.equal(
-			axe.commons.text.accessibleTextVirtual(target, { debug: true }),
-			'Hello'
-		);
+		assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Hello');
 	});
 
 	it('should give text even for role=none on buttons', function() {
@@ -2895,7 +2892,7 @@ describe('text.accessibleTextVirtual', function() {
 			// Chrome 70: "My name is Garaventa the weird. (QED) Where are my marbles?"
 			// Firefox 62: "Hello, My name is Eli the weird. (QED)"
 			assert.equal(
-				accessibleText(target, { debug: true }),
+				accessibleText(target),
 				'My name is Eli the weird. (QED) Where are my marbles?'
 			);
 		});