Merge branch 'phillbaker-rgba-warnings'

Author: ironikart

HTMLCS.Util.js

@@ -191,14 +191,15 @@ _global.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;
@@ -240,7 +241,7 @@ _global.HTMLCS.util = function() {
      * Returns true if the element is deliberately hidden from Accessibility APIs using ARIA hidden.
      *
      * Not: This is separate to isAccessibilityHidden() due to a need to check specifically for aria hidden.
-     * 
+     *
      * @param {Node} element The element to check.
      *
      * @return {Boolean}
@@ -397,7 +398,7 @@ _global.HTMLCS.util = function() {
      * Returns all elements that are visible to the accessibility API.
      *
      * @param {Node}   element  The parent element to search.
-     * @param {String} selector Optional selector to pass to 
+     * @param {String} selector Optional selector to pass to
      *
      * @return {Array}
      */
@@ -533,10 +534,9 @@ _global.HTMLCS.util = function() {
     }
 
     /**
-     * Convert a colour string to a structure with red/green/blue elements.
+     * Convert a colour string to a structure with red/green/blue/alpha elements.
      *
-     * Supports rgb() and hex colours (3 or 6 hex digits, optional "#").
-     * rgba() also supported but the alpha channel is currently ignored.
+     * Supports rgb() and hex colours (3, 4, 6 or 8 hex digits, optional "#").
      * Each red/green/blue element is in the range [0.0, 1.0].
      *
      * @param {String} colour The colour to convert.
@@ -552,7 +552,11 @@ _global.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.
@@ -564,10 +568,20 @@ _global.HTMLCS.util = function() {
                 colour = colour.replace(/^(.)(.)(.)$/, '$1$1$2$2$3$3');
             }
 
+            if (colour.length === 4) {
+                colour = colour.replace(/^(.)(.)(.)(.)$/, '$1$1$2$2$3$3$4$4');
+            }
+
+            var alpha = 1; // Default if alpha is not specified
+            if (colour.length === 8) {
+                alpha = parseInt(colour.substr(6, 2), 16) / 255;
+            }
+
             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: alpha,
             };
         }
 
@@ -1290,4 +1304,4 @@ _global.HTMLCS.util = function() {
     };
 
     return self;
-}();
+}();

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

@@ -39,21 +39,22 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
 
             for (var i = 0; i < failures.length; i++) {
                 var element   = failures[i].element;
-                
+
                 var decimals  = 2;
                 var value     = (Math.round(failures[i].value * Math.pow(10, decimals)) / Math.pow(10, decimals));
                 var required  = failures[i].required;
                 var recommend = failures[i].recommendation;
                 var hasBgImg  = failures[i].hasBgImage || false;
                 var bgColour   = failures[i].bgColour || false;
                 var isAbsolute = failures[i].isAbsolute || false;
+                var hasAlpha   = failures[i].hasAlpha || false;
 
                 // If the values would look identical, add decimals to the value.
                 while (required === value) {
                     decimals++;
                     value = (Math.round(failures[i].value * Math.pow(10, decimals)) / Math.pow(10, decimals));
                 }
-                
+
                 if (required === 4.5) {
                     var code = 'G18';
                 } else if (required === 3.0) {
@@ -80,6 +81,9 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
                 } else if (hasBgImg === true) {
                     code += '.BgImage';
                     HTMLCS.addMessage(HTMLCS.WARNING, element,  _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.BgImage").replace(/\{\{required\}\}/g, required), code);
+                } else if (hasAlpha === true) {
+                    code += '.Alpha';
+                    HTMLCS.addMessage(HTMLCS.WARNING, element,  _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.Alpha").replace(/\{\{required\}\}/g, required), code);
                 } else {
                     code += '.Fail';
                     HTMLCS.addMessage(HTMLCS.ERROR, element, _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.Fail").replace(/\{\{required\}\}/g, required).replace(/\{\{value\}\}/g, value) + recommendText, code);

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

@@ -20,7 +20,12 @@ _global.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,11 +57,11 @@ _global.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;
                         }
-                        
+
                         if (style.position == 'absolute') {
                             isAbsolute = true;
                         }
@@ -86,22 +91,67 @@ _global.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 (hasBgImg === true) {
+                        var bgAlpha = HTMLCS.util.colourStrToRGB(bgColour).alpha;
+                        var fgAlpha = HTMLCS.util.colourStrToRGB(foreColour).alpha;
+
+                        if (bgColour && bgAlpha < 1.0 && bgAlpha > 0) {
+                            // If we have a rgba background colour, skip the contrast ratio checks,
+                            // and push a warning instead.
+                            failures.push({
+                                element: node,
+                                colour: foreColour,
+                                bgColour: bgColour,
+                                value: undefined,
+                                required: reqRatio,
+                                hasAlpha: true,
+                            });
+                            continue;
+                        } else if (foreColour && fgAlpha < 1.0 && fgAlpha > 0) {
+                            // If we have a rgba fore colour, skip the contrast ratio checks,
+                            // and push a warning instead.
+                            failures.push({
+                                element: node,
+                                colour: foreColour,
+                                bgColour: foreColour,
+                                value: undefined,
+                                required: reqRatio,
+                                hasAlpha: true
+                            });
+                            continue;
+                        } else 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,
@@ -125,9 +175,10 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
                             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,

Tests/WCAG2/1_4_3_Contrast.html

@@ -7,6 +7,8 @@
 Standard: WCAG2AA
 Assert: Error *.G18.Fail on #basicContrastFail
 Assert: No Error *.G18 on #issue155
+Assert: Warning *.G145.Alpha on #rgba
+Assert: Warning *.G18.Alpha on #rgba2
 -->
 </head>
 <body>
@@ -15,6 +17,15 @@
 
 <p>Sample: <span id="issue155" style="color: #7c7cff; background-color: #ffffff; font-size: 14pt; font-weight: bold;">I am 14pt bold text and should pass</span></p>
 
+<div>Warning: <div id="pr134" style="color: #7c7cff; background-color: #0000000C; font-size: 14pt; font-weight: bold;">I am 14pt bold text on a transparent background and should generate a warning</div></div>
+
+<div>Warning RGBA: <div id="rgba" style="color: #7c7cff; background-color: rgba(0,0,0,0.5); font-size: 14pt; font-weight: bold;">I am 14pt bold text on a transparent background and should generate a warning</div></div>
+
+<div style="background-color: #ccc">
+    <span>Warning RBGA in BG</span>
+    <div id="rgba2" style="background-color: rgba(0,0,0,0.2);">Text</div>
+</div>
+
 </body>
 </html>
 

Translations/en.js

@@ -177,6 +177,7 @@ _global.translation['en'] = {
   //1_4_3.js
   ,"1_4_3_G18_or_G145.Abs" : 'This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least {{required}}:1.'
   ,"1_4_3_G18_or_G145.BgImage" : 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least {{required}}:1.'
+  ,"1_4_3_G18_or_G145.Alpha" : 'This element\'s text or background contains transparency. Ensure the contrast ratio between the text and background are at least {{required}}:1.'
   ,"1_4_3_G18_or_G145.Fail" : 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least {{required}}:1, but text in this element has a contrast ratio of {{value}}:1.'
   ,"1_4_3_G18_or_G145.Fail.Recomendation" : 'Recommendation: change'
   ,"1_4_3_G18_or_G145.Fail.Recomendation.Text" : 'text colour to'

Translations/pl.js

@@ -177,6 +177,7 @@ _global.translation['pl'] = {
   //1_4_3.js
   ,"1_4_3_G18_or_G145.Abs" : 'Ten element jest pozycjonowany absolutnie i nie jest możliwe zweryfikowanie jego kontrastu. Sprawdź samodzielnie czy kontrast jest na wystarczającym poziomie: {{required}}:1.'
   ,"1_4_3_G18_or_G145.BgImage" : 'Tekst elementu wyświetlany jest na obrazku. Należy upewnić się, że stosunek kontrastu tekstu do tła wynosi co najmniej {{required}}:1.'
+  ,"1_4_3_G18_or_G145.Alpha" : 'Tekst lub tło tego elementu jest przezroczyste. Upewnij się, że współczynnik kontrastu między tekstem a tłem wynosi co najmniej {{required}}:1.'
   ,"1_4_3_G18_or_G145.Fail" : 'Ten element ma niewystarczający na tym poziomie zgodności stosunek kontrastu tekstu do tła. Powinien wynosić co najmniej {{required}}:1, a tekst umieszczony w tym elemencie posiada stosunek {{value}}:1.'
   ,"1_4_3_G18_or_G145.Fail.Recomendation" : 'Zalecenie: zmiana'
   ,"1_4_3_G18_or_G145.Fail.Recomendation.Text" : 'koloru tekstu na'