added color brightness rules and minor tweaks to the ui (adding xpath, report message)

5 files changed, 22 insertions, 24 deletions

diff --git a/exampleData/ruleSets/accessibility/colorBrightness.js b/exampleData/ruleSets/accessibility/colorBrightness.js
index 96ed1af..79f99e1 100644
--- a/exampleData/ruleSets/accessibility/colorBrightness.js
+++ b/exampleData/ruleSets/accessibility/colorBrightness.js
@@ -3,8 +3,8 @@ exports.name = "colorBrightness";
 exports.description = "Elements should provide sufficient color brightness " +
                       "difference";
 
-exports.rule = function() {
-
+exports.rule = function(report) {
+  var fc = fiveui.color;
   var MIN_DIFF = 125; // http://www.w3.org/TR/2000/WD-AERT-20000426#color
 
   /**
@@ -25,24 +25,23 @@ exports.rule = function() {
     return Math.abs(bright(c1) - bright(c2));
   };
 
-  var that = this;
-
   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'));
+      // TODO take into account alpha values in the foreground
+      var fg = fc.colorToRGB($(this).css('color'));
+      var bg = fc.findBGColor($(this));
       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);
+          report.error('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 de039ea..0b6c8b5 100644
--- a/exampleData/ruleSets/accessibility/colorDifference.js
+++ b/exampleData/ruleSets/accessibility/colorDifference.js
@@ -2,8 +2,8 @@ exports.name = "colorDifference";
 
 exports.description = "Elements should provide sufficient color difference";
 
-exports.rule = function() {
-
+exports.rule = function(report) {
+  var fc = fiveui.color;
   var MIN_COLOR_DIFF = 500; // http://www.w3.org/TR/2000/WD-AERT-20000426#color
 
   /**
@@ -17,19 +17,19 @@ exports.rule = function() {
            Math.abs(c1.b - c2.b);
   };
 
-  var that = this;
   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'));
+      // TODO take into account fg alpha values
+      var fg = fc.colorToRGB($(this).css('color'));
+      var bg = fc.findBGColor($(this));
       if (fg && bg) {
         var diff = colorDiff(fg, bg);
         if (diff < MIN_COLOR_DIFF) {
-          that.report('Element has poor color difference: ' + diff, this);
+          report.error('Element has poor color difference: ' + diff, this);
         }
       }
   });
diff --git a/exampleData/ruleSets/accessibility/headingExists.js b/exampleData/ruleSets/accessibility/headingExists.js
index afd359e..e6dc2d6 100644
--- a/exampleData/ruleSets/accessibility/headingExists.js
+++ b/exampleData/ruleSets/accessibility/headingExists.js
@@ -2,9 +2,9 @@ exports.name = "headingExists";
 
 exports.description = "Page contains at least one heading";
 
-exports.rule = function() {
+exports.rule = function(report) {
   var headings = fiveui.query(':header');
   if (0 == headings.length) {
-    this.report('No headings found on page');
+    report.error('No headings found on page');
   }
 };
diff --git a/exampleData/ruleSets/accessibility/imagesAltText.js b/exampleData/ruleSets/accessibility/imagesAltText.js
index 8941caf..d59dbb4 100644
--- a/exampleData/ruleSets/accessibility/imagesAltText.js
+++ b/exampleData/ruleSets/accessibility/imagesAltText.js
@@ -2,13 +2,12 @@ exports.name = "imagesAltText";
 
 exports.description = "Each image should have an alternative text description";
 
-exports.rule = function() {
-  var that = this;
+exports.rule = function(report) {
   fiveui.query('img')
      .filter(function (i) {
                return $(this).attr('alt') == '';
              })
      .each(function (i, e) {
-             that.report('Image has no alt text', e);
+             report.error('Image has no alt text', e);
            });
 };
diff --git a/exampleData/ruleSets/accessibility/titleNonEmpty.js b/exampleData/ruleSets/accessibility/titleNonEmpty.js
index a6f97c9..27e281f 100644
--- a/exampleData/ruleSets/accessibility/titleNonEmpty.js
+++ b/exampleData/ruleSets/accessibility/titleNonEmpty.js
@@ -2,8 +2,8 @@ exports.name = "titleNonEmpty";
 
 exports.description = "Title of page is non-empty";
 
-exports.rule = function() {
+exports.rule = function(report) {
   if (document.title == '') {
-    this.report('Page title is empty');
+    report.error('Page title is empty');
   }
 };