Merge pull request #30 from browserstack/feature/1.4.1

feature/1.4.1 - Extended rule link-in-text-block

Author: ansh21

lib/checks/color/link-in-text-block-evaluate.js

@@ -6,6 +6,8 @@ import {
   incompleteData
 } from '../../commons/color';
 
+import a11y_engine_commons  from '../../commons/a11y-engine-index';
+
 function getContrast(color1, color2) {
   var c1lum = color1.getRelativeLuminance();
   var c2lum = color2.getRelativeLuminance();
@@ -26,6 +28,7 @@ function isBlock(elm) {
 }
 
 function linkInTextBlockEvaluate(node) {
+  var options = arguments.length > 1 && arguments[1] ? arguments[1] : {};
   if (isBlock(node)) {
     return false;
   }
@@ -37,29 +40,47 @@ function linkInTextBlockEvaluate(node) {
 
   this.relatedNodes([parentBlock]);
 
+  if(options.a11yRule) {
+    return a11y_engine_commons.distinguishableLinkEvaluate(node, parentBlock);
+  }
+
   // TODO: Check the :visited state of the link
   if (elementIsDistinct(node, parentBlock)) {
     return true;
   } else {
-    // Check if contrast of foreground is sufficient
-    var nodeColor, parentColor;
-    nodeColor = getForegroundColor(node);
-    parentColor = getForegroundColor(parentBlock);
+    // TODO: We should check the focus / hover style too
+    return checkContrast(node, parentBlock);
+  }
+}
 
-    if (!nodeColor || !parentColor) {
-      return undefined;
-    }
+function getColorContrast(node, parentBlock) {
+  // Check if contrast of foreground is sufficient
+  var nodeColor, parentColor;
+  nodeColor = getForegroundColor(node);
+  parentColor = getForegroundColor(parentBlock);
 
-    var contrast = getContrast(nodeColor, parentColor);
-    if (contrast === 1) {
-      return true;
-    } else if (contrast >= 3.0) {
-      incompleteData.set('fgColor', 'bgContrast');
-      this.data({
-        messageKey: incompleteData.get('fgColor')
-      });
-      incompleteData.clear();
-      // User needs to check whether there is a hover and a focus style
+  if (!nodeColor || !parentColor) {
+    return undefined;
+  }
+
+  return getContrast(nodeColor, parentColor);
+}
+
+function checkContrast(node, parentBlock) {
+    var contrast = getColorContrast(node, parentBlock);
+    if (contrast !== undefined) {
+      if (contrast === 1) {
+        return true;
+      } else if (contrast >= 3.0) {
+        incompleteData.set('fgColor', 'bgContrast');
+        this.data({
+          messageKey: incompleteData.get('fgColor')
+        });
+        incompleteData.clear();
+        // User needs to check whether there is a hover and a focus style
+        return undefined;
+      }
+    } else {
       return undefined;
     }
 
@@ -85,10 +106,7 @@ function linkInTextBlockEvaluate(node) {
       incompleteData.clear();
       return undefined;
     }
-  }
-
-  // TODO: We should check the focus / hover style too
-  return false;
 }
 
 export default linkInTextBlockEvaluate;
+export { getColorContrast, getContrast }

lib/checks/color/link-in-text-block.json

@@ -1,6 +1,9 @@
 {
   "id": "link-in-text-block",
   "evaluate": "link-in-text-block-evaluate",
+  "options": {
+    "a11yRule": false
+  },
   "metadata": {
     "impact": "serious",
     "messages": {

lib/commons/a11y-engine-index.js

@@ -0,0 +1,6 @@
+import { distinguishableLinkEvaluate } from '../../../a11y-engine-core/lib/commons/distinguishable-link';
+
+let a11y_engine_commons = {};
+a11y_engine_commons.distinguishableLinkEvaluate = distinguishableLinkEvaluate;
+
+export default a11y_engine_commons;

lib/rules/link-in-text-block.json

@@ -8,7 +8,11 @@
     "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
     "help": "Links must be distinguishable without relying on color"
   },
-  "all": ["link-in-text-block"],
+  "all": [{ 
+    "options": {
+      "a11yRule": false
+    }, "id": "link-in-text-block"
+  }],
   "any": [],
   "none": []
 }