add rgba contrast checking

HTMLCS.Util.js

@@ -158,14 +158,15 @@ HTMLCS.util = function() {
 	 *
 	 * @returns {Object}
 	 */
-	self.style = function(element) {
+	self.style = function(element, pseudo) {
 		var computedStyle = null;
 		var window        = self.getElementWindow(element);
+		var pseudo        = pseudo || null;
 
 		if (element.currentStyle) {
 			computedStyle = element.currentStyle;
 		} else if (window.getComputedStyle) {
-			computedStyle = window.getComputedStyle(element, null);
+			computedStyle = window.getComputedStyle(element, pseudo);
 		}
 
 		return computedStyle;
@@ -357,6 +358,82 @@ HTMLCS.util = function() {
 
 		var lum = ((transformed.red * 0.2126) + (transformed.green * 0.7152) + (transformed.blue * 0.0722));
 		return lum;
+	};
+
+	/**
+	 * Convert an rgba colour to rgb, by traversing the dom and mixing colors as needed.
+	 *
+	 * @param element - the element to compare the rgba color against.
+	 * @param colour - the starting rgba color to check.
+	 * @returns {Colour Object}
+	 */
+	self.rgbaBackgroundToRgb = function(colour, element) {
+		var parent        = element.parentNode;
+		var original      = self.colourStrToRGB(colour);
+		var backgrounds   = [];
+		var solidFound    = false;
+
+		if (original.alpha == 1) {
+			//Return early if it is already solid.
+			return original;
+		}
+
+		//Find all the background with transparancy until we get to a solid colour
+		while (solidFound == false) {
+			if ((!parent) || (!parent.ownerDocument)) {
+				//No parent was found, assume a solid white background.
+				backgrounds.push({
+					red: 1,
+					green: 1,
+					blue: 1,
+					alpha: 1
+				});
+				break;
+			}
+
+			var parentStyle     = self.style(parent);
+			var parentColourStr = parentStyle.backgroundColor;
+			var parentColour    = self.colourStrToRGB(parentColourStr);
+
+			if ((parentColourStr === 'transparent') || (parentColourStr === 'rgba(0, 0, 0, 0)')) {
+				//Skip totally transparent parents until we find a solid color.
+				parent = parent.parentNode;
+				continue;
+			}
+
+			backgrounds.push(parentColour);
+
+			if (parentColour.alpha == 1) {
+				solidFound = true;
+			}
+
+			parent = parent.parentNode;
+		}
+
+		//Now we need to start with the solid color that we found, and work our way up to the original color.
+		var solidColour = backgrounds.pop();
+		while (backgrounds.length) {
+			solidColour = self.mixColours(solidColour, backgrounds.pop());
+		}
+
+		return self.mixColours(solidColour, original);
+	};
+
+	self.mixColours = function(bg, fg) {
+		//Convert colors to int values for mixing.
+		bg.red   = Math.round(bg.red*255);
+		bg.green = Math.round(bg.green*255);
+		bg.blue  = Math.round(bg.blue*255);
+		fg.red   = Math.round(fg.red*255);
+		fg.green = Math.round(fg.green*255);
+		fg.blue  = Math.round(fg.blue*255);
+
+		return {
+			red: Math.round(fg.alpha * fg.red + (1 - fg.alpha) * bg.red) / 255,
+			green: Math.round(fg.alpha * fg.green + (1 - fg.alpha) * bg.green) / 255,
+			blue: Math.round(fg.alpha * fg.blue + (1 - fg.alpha) * bg.blue) / 255,
+			alpha: bg.alpha
+		}
 	}
 
 	/**
@@ -379,7 +456,11 @@ HTMLCS.util = function() {
 			colour = {
 				red: (matches[1] / 255),
 				green: (matches[2] / 255),
-				blue: (matches[3] / 255)
+				blue: (matches[3] / 255),
+				alpha: 1.0
+			};
+			if (matches[4]) {
+				colour.alpha = parseFloat(/^,\s*(.*)$/.exec(matches[4])[1]);
 			}
 		} else {
 			// Hex digit format.
@@ -394,7 +475,8 @@ HTMLCS.util = function() {
 			colour = {
 				red: (parseInt(colour.substr(0, 2), 16) / 255),
 				green: (parseInt(colour.substr(2, 2), 16) / 255),
-				blue: (parseInt(colour.substr(4, 2), 16) / 255)
+				blue: (parseInt(colour.substr(4, 2), 16) / 255),
+				alpha: 1
 			};
 		}
 

Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_3/1_3_1.js

@@ -175,6 +175,7 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_3_1_3_1 = {
 	testLabelsOnInputs: function(element, top, muteErrors)
 	{
 		var nodeName  = element.nodeName.toLowerCase();
+		var style = HTMLCS.util.style(element);
 		var inputType = nodeName;
 		if (inputType === 'input') {
 			if (element.hasAttribute('type') === true) {
@@ -203,6 +204,10 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_3_1_3_1 = {
 		if (element.getAttribute('hidden') !== null) {
 			needsLabel = false;
 		}
+
+		if ('none' === style.display) {
+			needsLabel = false;
+		}
 
 		// Find an explicit label.
 		var explicitLabel = element.ownerDocument.querySelector('label[for="' + element.id + '"]');

Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3_Contrast.js

@@ -20,7 +20,12 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
         var failures  = [];
 
         if (!top.ownerDocument) {
-            var toProcess = [top.getElementsByTagName('body')[0]];
+            var toProcess = [];
+            var body = top.getElementsByTagName('body');
+            if (body.length) {
+                //SVG objects will not have a body element. Don't check them.
+                var toProcess = [body[0]];
+            }
         } else {
             var toProcess = [top];
         }
@@ -52,8 +57,8 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
                         var bgElement = node;
                         var hasBgImg  = false;
                         var isAbsolute = false;
-                        
-			            if (style.backgroundImage !== 'none') {
+
+                        if (style.backgroundImage !== 'none') {
                             hasBgImg = true;
                         }
 
@@ -86,22 +91,48 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
 
                             var parentStyle = HTMLCS.util.style(parent);
                             var bgColour    = parentStyle.backgroundColor;
+                            var bgElement   = parent;
                             if (parentStyle.backgroundImage !== 'none') {
                                 hasBgImg = true;
                             }
                             if (parentStyle.position == 'absolute') {
                                 isAbsolute = true;
                             }
+
+                            //Search for the smooth scrolling willChange: 'transform' background hack
+                            //See http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
+                            var beforeStyle = HTMLCS.util.style(parent, ':before');
+                            if (
+                                beforeStyle
+                                && beforeStyle.position == 'fixed'
+                                && beforeStyle.willChange == 'transform'
+                                //Make sure it is trying to cover the entire content area
+                                && beforeStyle.width == parentStyle.width
+                                && parseInt(beforeStyle.height, 10) <= parseInt(parentStyle.height, 10)
+                                //And finally it needs a background image
+                                && beforeStyle.backgroundImage !== 'none'
+                            ) {
+                                hasBgImg = true;
+                                break;
+                            }
 
                             parent = parent.parentNode;
                         }//end while
 
+                        if (bgColour && bgColour.indexOf('rgba') === 0) {
+                            bgColour = HTMLCS.util.RGBtoColourStr(HTMLCS.util.rgbaBackgroundToRgb(bgColour, bgElement));
+                        }
+
+                        if (foreColour && foreColour.indexOf('rgba') === 0) {
+                            foreColour = HTMLCS.util.RGBtoColourStr(HTMLCS.util.rgbaBackgroundToRgb(foreColour, node));
+                        }
+
                         if (hasBgImg === true) {
                             // If we have a background image, skip the contrast ratio checks,
                             // and push a warning instead.
                             failures.push({
                                 element: node,
-                                colour: style.color,
+                                colour: foreColour,
                                 bgColour: undefined,
                                 value: undefined,
                                 required: reqRatio,
@@ -117,19 +148,20 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
                                 required: reqRatio,
                                 isAbsolute: true
                             });
+                            continue;
                         } else if ((bgColour === 'transparent') || (bgColour === 'rgba(0, 0, 0, 0)')) {
                             // If the background colour is still transparent, this is probably
                             // a fragment with which we cannot reliably make a statement about
                             // contrast ratio. Skip the element.
                             continue;
                         }
 
-                        var contrastRatio = HTMLCS.util.contrastRatio(bgColour, style.color);
+                        var contrastRatio = HTMLCS.util.contrastRatio(bgColour, foreColour);
 
 
 
                         if (contrastRatio < reqRatio) {
-                            var recommendation = this.recommendColour(bgColour, style.color, reqRatio);
+                            var recommendation = this.recommendColour(bgColour, foreColour, reqRatio);
 
                             failures.push({
                                 element: node,

Standards/WCAG2AAA/Sniffs/Principle4/Guideline4_1/4_1_2.js

@@ -178,6 +178,13 @@ var HTMLCS_WCAG2AAA_Sniffs_Principle4_Guideline4_1_4_1_2 = {
             var element    = elements[el];
             var nodeName   = element.nodeName.toLowerCase();
             var msgSubCode = element.nodeName.substr(0, 1).toUpperCase() + element.nodeName.substr(1).toLowerCase();
+
+            var style = HTMLCS.util.style(element);
+            if ('none' === style.display) {
+                //Element is hidden, so no name is required
+                continue;
+            }
+
             if (nodeName === 'input') {
                 if (element.hasAttribute('type') === false) {
                     // If no type attribute, default to text.