updated color difference rules and test html

3 files changed, 35 insertions, 17 deletions

diff --git a/exampleData/ruleSets/accessibility/colorBrightness.js b/exampleData/ruleSets/accessibility/colorBrightness.js
index 737e0d6..96ed1af 100644
--- a/exampleData/ruleSets/accessibility/colorBrightness.js
+++ b/exampleData/ruleSets/accessibility/colorBrightness.js
@@ -26,14 +26,24 @@ exports.rule = function() {
   };
 
   var that = this;
-  fiveui.query('*').each(function (i) {
-    var fg = fiveui.color.colorToRGB($(this).attr('color'));
-    var bg = fiveui.color.colorToRGB($(this).attr('background'));
-    if (fg && bg) {
-      var diff = brightDiff(fg, bg);
-      if (diff < MIN_DIFF) {
-        that.report('Element has poor brightness difference: ' + diff, e);
+
+  fiveui.query('*')
+    .filter(function () {  // filter for lowest level elts having non-empty text
+      var $this = $(this);
+      return $this.children().length == 0 && $.trim($this.text()).length > 0;
+    })
+    .each(function (i) {
+      var fg = fiveui.color.colorToRGB($(this).css('color'));
+      var bg = fiveui.color.colorToRGB($(this).css('background-color'));
+      if (fg && bg) {
+        var diff = brightDiff(fg, bg);
+        if (diff < MIN_DIFF) {
+          that.report('Element has poor brightness difference: ' +
+                      'fg = ' + JSON.stringify(fg) +
+                      ', fgb = ' + bright(fg) +
+                      ', bg = ' + JSON.stringify(bg) +
+                      ', bgb = ' + bright(bg), this);
+        }
       }
-    }
-  });
+    });
 };
diff --git a/exampleData/ruleSets/accessibility/colorDifference.js b/exampleData/ruleSets/accessibility/colorDifference.js
index c7a581d..de039ea 100644
--- a/exampleData/ruleSets/accessibility/colorDifference.js
+++ b/exampleData/ruleSets/accessibility/colorDifference.js
@@ -18,14 +18,19 @@ exports.rule = function() {
   };
 
   var that = this;
-  fiveui.query('*').each(function (i) {
-    var fg = fiveui.color.colorToRGB($(this).attr('color'));
-    var bg = fiveui.color.colorToRGB($(this).attr('background'));
-    if (fg && bg) {
-      var diff = colorDiff(fg, bg);
-      if (diff < MIN_DIFF) {
-        that.report('Element has poor color difference: ' + diff, e);
+  fiveui.query('*')
+    .filter(function () {  // filter for lowest level elts having non-empty text
+      var $this = $(this);
+      return $this.children().length == 0 && $.trim($this.text()).length > 0;
+    })
+    .each(function (i) {
+      var fg = fiveui.color.colorToRGB($(this).css('color'));
+      var bg = fiveui.color.colorToRGB($(this).css('background-color'));
+      if (fg && bg) {
+        var diff = colorDiff(fg, bg);
+        if (diff < MIN_COLOR_DIFF) {
+          that.report('Element has poor color difference: ' + diff, this);
+        }
       }
-    }
   });
 };
diff --git a/exampleData/ruleSets/accessibility/test.html b/exampleData/ruleSets/accessibility/test.html
index 66a417d..80ee84a 100644
--- a/exampleData/ruleSets/accessibility/test.html
+++ b/exampleData/ruleSets/accessibility/test.html
@@ -6,6 +6,9 @@
   <p>blah blah</p>
   <h1>A star</h1>
   <img src="star.jpeg" alt="foo">
+  <div style="background-color: #222222;">
+        <p>Can you read this?</p>
+  </div>
   </body>
 </html>