Merge pull request #87 from ucfcdl/UDOIT_issue14

Udoit Issue #7, #14, & #86

config/localConfig.template.php

@@ -26,4 +26,4 @@
 $db_reports_table = 'reports';
 $dsn              = "{$db_type}:host={$db_host};port={$db_port};dbname={$db_name}";
 
-$debug = false;
+$debug = false;

config/tests.php

@@ -225,5 +225,17 @@
                 <pre><code>'. htmlspecialchars('<h1>Header 1</h1>') .'</code></pre>
             ',
         ],
+        [
+            'name'      => 'cssTextStyleEmphasize',
+            'title'     => 'Avoid using color alone for emphasis',
+            'desc'      => '<p>When emphasizing text, you may use color with sufficient contrast as long as you also apply some other form of emphasis, such as bold or italics. This ensures that screen reader users are aware of the text\'s importance.</p>',
+            'resources' => [
+                '<a href="https://www.w3.org/TR/WCAG20-TECHS/H49.html">Resource Link</a>'
+            ],
+            'example'   => '
+                <p>This example shows how to use the em and strong elements to emphasize text. The em and strong elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).</p>
+                <pre><code>...What she <em>really</em> meant to say was, &quot;This is not ok, it is <strong>excellent</strong>&quot;!...</code></pre>
+            ',
+        ],
     ],
 ];

lib/Ufixit.php

@@ -128,10 +128,12 @@ public function fixAltText($error_html, $new_content, $submitting_again = false)
      * @param array $error_colors       - The color(s) that need to be replaced
      * @param string $error_html        - The bad html that needs to be fixed
      * @param string|array $new_content - The new CSS color(s) from the user
+     * @param bool $bold                - Boolean whether resulting text should be stylized bold
+     * @param bool $italic              - Boolean whether resulting text should be stylized italicised
      * @param bool $submitting_again    - If the user is resubmitting their error fix
      * @return string $fixed_css        - The html with corrected CSS
      */
-    public function fixCss($error_colors, $error_html, $new_content, $bold, $italic, $submitting_again = false)
+    public function fixCssColor($error_colors, $error_html, $new_content, $bold, $italic, $submitting_again = false)
     {
         preg_match_all('/<(\w+)\s+\w+.*?>/s', $error_html, $matches);
 
@@ -145,12 +147,43 @@ public function fixCss($error_colors, $error_html, $new_content, $bold, $italic,
 
         $tag = $this->dom->getElementsByTagName( $matches[1][0] )->item(0);
 
-        if ($bold == 'bold') {
+        if ($bold) {
             $tag->setAttribute('style', $tag->getAttribute('style').' font-weight: bold;');
 
         }
 
-        if ($italic == 'italic') {
+        if ($italic) {
+            $tag->setAttribute('style', $tag->getAttribute('style').' font-style: italic;');
+        }
+
+        $fixed_css = $this->dom->saveHTML($tag);
+
+        return $fixed_css;
+    }
+
+        /**
+     * Adds font styles to colored text for emphasis
+     * @param string $error_html        - The bad html that needs to be fixed
+     * @param string|array $new_content - The new CSS color(s) from the user
+     * @param bool $bold                - Boolean whether resulting text should be stylized bold
+     * @param bool $italic              - Boolean whether resulting text should be stylized italicised
+     * @param bool $submitting_again    - If the user is resubmitting their error fix
+     * @return string $fixed_css        - The html with corrected CSS
+     */
+    public function fixCssEmphasize($error_html, $new_content, $bold, $italic, $submitting_again = false)
+    {
+        preg_match_all('/<(\w+)\s+\w+.*?>/s', $error_html, $matches);
+
+        $this->dom->loadHTML('<?xml encoding="utf-8" ?>' . $error_html );
+
+        $tag = $this->dom->getElementsByTagName( $matches[1][0] )->item(0);
+
+        if ($bold) {
+            $tag->setAttribute('style', $tag->getAttribute('style').' font-weight: bold;');
+
+        }
+
+        if ($italic) {
             $tag->setAttribute('style', $tag->getAttribute('style').' font-style: italic;');
         }
 

lib/quail/quail/common/accessibility_tests.php

@@ -1186,14 +1186,124 @@ function check()
 				}
 
 				$luminosity = $this->getLuminosity($style['color'], $background);
+				$font_size = 0;
+				$bold = false;
 
-				if ($element->tagName === 'h1' || $element->tagName === 'h2' || $element->tagName === 'h3' || $element->tagName === 'h4' || $element->tagName === 'h5' || $element->tagName === 'h6') {
+				if (isset($style['font-size'])) {
+					preg_match_all('!\d+!', $style['font-size'], $matches);
+					$font_size = $matches[0][0];
+				}
+
+				if (isset($style['font-weight'])) {
+					preg_match_all('!\d+!', $style['font-weight'], $matches);
+
+					if (count($matches) > 0) {
+						if ($matches >= 700) {
+							$bold = true;
+						} else {
+							if ($style['font-weight'] === 'bold' || $style['font-weight'] === 'bolder') {
+								$bold = true;
+							}
+						}
+					}
+				}
+
+				if ($element->tagName === 'h1' || $element->tagName === 'h2' || $element->tagName === 'h3' || $element->tagName === 'h4' || $element->tagName === 'h5' || $element->tagName === 'h6' || $font_size >= 18 || $font_size >= 14 && $bold) {
 					if ($luminosity < 3) {
-						$this->addReport($element, 'background: '. $background .' fore: '. $style['color'] . ' lum: '. $luminosity . 'type: heading');
+						$this->addReport($element, 'heading');
 					}
 				} else {
 					if ($luminosity < 4.5) {
-						$this->addReport($element, 'background: '. $background .' fore: '. $style['color'] . ' lum: '. $luminosity . 'type: text');
+						$this->addReport($element, 'text');
+					}
+				}
+			}
+		}
+	}
+}
+
+/**
+*	Checks that all color and background elements has stufficient contrast.
+*
+*	@link http://quail-lib.org/test-info/cssTextHasContrast
+*/
+class cssTextStyleEmphasize extends quailColorTest
+{
+	/**
+	*	@var int $default_severity The default severity code for this test.
+	*/
+	var $default_severity = QUAIL_TEST_SUGGESTION;
+
+	/**
+	*	@var string $default_background The default background color
+	*/
+	var $default_background = '#ffffff';
+
+	/**
+	*	@var string $default_background The default background color
+	*/
+	var $default_color = '#000000';
+
+	/**
+	*	The main check function. This is called by the parent class to actually check content
+	*/
+	function check()
+	{
+		if (isset($this->options['css_background'])) {
+			$this->default_background = $this->options['css_background'];
+		}
+
+		if (isset($this->options['css_foreground'])) {
+			$this->default_color = $this->options['css_foreground'];
+		}
+
+		$xpath   = new DOMXPath($this->dom);
+		$entries = $xpath->query('//*');
+
+		foreach ($entries as $element) {
+			$style = $this->css->getStyle($element);
+
+			if (!isset($style['background-color'])) {
+				$style['background-color'] = $this->default_background;
+			}
+
+			if ((isset($style['background']) || isset($style['background-color'])) && isset($style['color']) && $element->nodeValue) {
+				$background = (isset($style['background-color'])) ? $style['background-color'] : $style['background'];
+
+				if (!$background || $this->options['css_only_use_default']) {
+					$background = $this->default_background;
+				}
+
+				$luminosity = $this->getLuminosity($style['color'], $background);
+				$font_size = 0;
+				$bold = false;
+
+				if (isset($style['font-size'])) {
+					preg_match_all('!\d+!', $style['font-size'], $matches);
+					$font_size = $matches[0][0];
+				}
+
+				if (isset($style['font-weight'])) {
+					preg_match_all('!\d+!', $style['font-weight'], $matches);
+
+					if (count($matches) > 0) {
+						if ($matches >= 700) {
+							$bold = true;
+						} else {
+							if ($style['font-weight'] === 'bold' || $style['font-weight'] === 'bolder') {
+								$bold = true;
+							}
+						}
+					}
+				}
+
+				if ($element->tagName === 'h1' || $element->tagName === 'h2' || $element->tagName === 'h3' || $element->tagName === 'h4' || $element->tagName === 'h5' || $element->tagName === 'h6' || $font_size >= 18 || $font_size >= 14 && $bold) {
+					if ($luminosity >= 3 && !$bold) {
+						$this->addReport($element, 'heading');
+					}
+				} else {
+					if ($luminosity >= 4.5 && !$bold) {
+						$this->addReport($element, 'text');
 					}
 				}
 			}

lib/quail/quail/guidelines/section508.php

@@ -82,6 +82,7 @@ class Section508Guideline extends quailGuideline{
 		// 'passwordHasLabel',
 		// 'checkboxHasLabel',
 		'cssTextHasContrast',
+		'cssTextStyleEmphasize',
 		// 'fileHasLabel',
 		// 'radioHasLabel',
 		// 'frameIsNotUsed',

lib/quail/quail/guidelines/translations/en.txt

@@ -4,11 +4,7 @@
 "imgNonDecorativeHasAlt","Images should have a non-empty ""alt"" attribute","<p>Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief (under 100 characters) description of the image for a <a href='http://en.wikipedia.org/wiki/Screen_reader'>screen reader</a> user. Note: It should not be the image file name.</p>","2"
 "imgImportantNoSpacerAlt","Images that are important should not have a purely white-space ""alt"" attribute","<p>Any image that is not used decoratively or which is purely for layout purposes cannot have an ""alt"" attribute that consists solely of white space (i.e. a space, or a new line). Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief (under 100 characters) description of the image for a <a href='http://en.wikipedia.org/wiki/Screen_reader'>screen reader</a> user. Note: It should not be the image file name.</p><h4>Example</h4><h5>Wrong</h5><p><code>&lt;img src=""dog.jpg"" alt="" ""&gt;</code></p><h5>Right</h5><p><code>&lt;img src=""dog.jpg"" alt=""A photograph of a dog""&gt;</code></p>","1"
 "imgAltNotPlaceHolder","Images should not have a simple placeholder text as an ""alt"" attribute","<p>Any image that is not used decorativey or which is purely for layout purposes cannot have an ""alt"" attribute that consists solely of placeholders. Placeholders include:</p><ul><li>nbsp</li><li>&amp;nbsp;</li><li>spacer</li><li>image</li><li>img</li><li>photo</li></ul><h4>Example</h4><h5>Wrong</h5><p><code>&lt;img src=""dog.jpg"" alt=""image""&gt;</code></p><h5>Right</h5><p><code>&lt;img src=""dog.jpg"" alt=""A photograph of a dog""&gt;</code></p>","1"
-<<<<<<< HEAD
 "imgAltNotEmptyInAnchor","Alt text for all img elements used as source anchors should not be empty","<p>Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief (under 100 characters) description of the image for a <a href='http://en.wikipedia.org/wiki/Screen_reader'>screen reader</a> user. Note: It should not be the image file name.</p>","1"
-=======
-"imgAltNotEmptyInAnchor","Alt text for all img elements used as source anchors should not be empty","<p>Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief (under 100 characters) description of the image for a <a href='http://en.wikipedia.org/wiki/Screen_reader'>screen reader</a> user. Note: It should not be the image file name.</p>","1"
->>>>>>> c17ab2c797754d01bcc81741fd02db24f8bc8a11
 "imgHasLongDesc","A ""longdesc"" attribute is required for any image where additional information not in the ""alt"" attribute is required","<p>Any image that has an ""alt"" attribute that does not fully convey the meaning of the image should have a ""longdesc"" attribute.</p><h4>Example</h4><h5>Wrong</h5><p><code>&lt;img src=""complexImage.png"" alt=""A complex image that cannot be described succinctly.""&gt;</code></p><h5>Right</h5><p><code>&lt;img src=""complexImage.png"" alt=""A complex image that cannot be described succinctly."" longdesc=""longer_description.html""&gt;</code></p>","1"
 "imgNeedsLongDescWDlink","An image with a ""longdesc"" attribute should have a corresponding description link","<p>Any image that has a ""longdesc"" attribute should also have a corresponding ""d-link,"" or Description link. This should point to the same resource as the ""longdesc"" attribute and should only contain the text ""d"".</p><h4>Example</h4><h5>Wrong</h5><p><code>&lt;img src=""complexImage.png"" alt=""A complex image that cannot be described succinctly."" longdesc=""longer_description.html""&gt;</code></p><h5>Right</h5><p><code>&lt;img src=""complexImage.png"" alt=""A complex image that cannot be described succinctly."" longdesc=""longer_description.html""&gt;&lt;a href=""longer_description.html""&gt;d&lt;/a&gt;</code></p>","1"
 "imgGifNoFlicker","Avoid the use of animated GIF’s","<p>Animated GIFs may cause seizures if they flash more than 3 times per second. A recommendation is to use an alternative format to deliver the content.</p>","1"
@@ -236,7 +232,8 @@
 "documentReadingDirection","Changes in text decoration should be marked up","<p>Changes in text direction in inline content should be indicated using any HTML element (for example, <code>span</code>) with a ""dir"" attribute indicating left-to-right or right-to-left. For example, a Hebrew phrase within an english paragraph should have it's own text direction indicated.</p>","2"
 "formDeleteIsReversable","Deleting items using a form should be reversable","<p>Check that, if a form has the option to delete an item, that the user has a chance to either reverse the delete process, or is asked for confirmation before the item is deleted. This is not something that can be checked through automated testing and requires manual confirmation.</p>","3"
 "svgContainsTitle", "Inline SVG should use Title elements","<p>Any inline SVG image should have an embedded <code>title</code> element","1"
-"cssTextHasContrast","Insufficient text color contrast with the background","<p>Text color should be easily viewable and should not be the only indicator of meaning or function. Color balance should have at least a 4.5:1 ratio.</p>","1"
+"cssTextHasContrast","Insufficient text color contrast with the background","<p>Text color should be easily viewable and should not be the only indicator of meaning or function. Color balance should have at least a 4.5:1 ratio for small text and 3:1 ratio for large text.</p>","1"
+"cssTextStyleEmphasize","Avoid using color alone for emphasis","<p>When emphasizing text, you may use color with sufficient contrast as long as you also apply some other form of emphasis, such as bold or italics. This ensures that screen reader users are aware of the text's importance.</p>","1"
 "videoProvidesCaptions","All video tags should provide captions","<p>Videos used on online courses are required to have closed captioning. Unfortunately, automatic captioning (such as on YouTube videos) is not accurate enough for educational use. You have three options:</p><ul><li>Contact the creator of the video and request captions be added.</li><li>Create captions yourself using a service like Amara (http://amara.org/).</li><li>Find a different video that has closed captioning.</li></ul>","2"
 "videosEmbeddedOrLinkedNeedCaptions","Synchronized <a href='http://webaim.org/techniques/captions/'>captions</a> should be provided for prerecorded web-based video","<p>Captions should be included in the video to provide dialogue to users who are hearing impaired.</p>","1"
 "documentIsWrittenClearly","The document should be written to the target audience and read clearly","<p>If a document is beyond a 10th grade level, then a summary or other guide should also be provided to guide the user through the content.</p>","2"

lib/quail/quail/guidelines/wcag1aa.php

@@ -123,6 +123,7 @@ class Wcag1aaGuideline extends quailGuideline{
 		'documentTitleDescribesDocument',
 		'svgContainsTitle',
 		'cssTextHasContrast',
+		'cssTextStyleEmphasize',
 		'headersHaveText',
 	);
 }

lib/quail/quail/guidelines/wcag1aaa.php

@@ -147,6 +147,7 @@ class Wcag1aaaGuideline extends quailGuideline{
 		'skipToContentLinkProvided',
 		'svgContainsTitle',
 		'cssTextHasContrast',
+		'cssTextStyleEmphasize',
 		'headersHaveText',
 	);
 

lib/quail/quail/guidelines/wcag2aa.php

@@ -165,6 +165,7 @@ class Wcag2aaGuideline extends quailGuideline{
 		'formDeleteIsReversable',
 		'svgContainsTitle',
 		'cssTextHasContrast',
+		'cssTextStyleEmphasize',
 		'headersHaveText',
 	);
 }

lib/quail/quail/guidelines/wcag2aaa.php

@@ -172,6 +172,7 @@ class Wcag2aaaGuideline extends quailGuideline
 		// 'svgContainsTitle',
 		// 'documentIsWrittenClearly',
 		'cssTextHasContrast',
+		'cssTextStyleEmphasize',
 		'headersHaveText',
 		'videoEmbedChecked',
 		'videosEmbeddedOrLinkedNeedCaptions',

lib/quail/quail/reporters/reporter.static.php

@@ -70,7 +70,7 @@ function getReport()
 					$testResult           = [];
 
 					if (is_object($problem)) {
-						if ($testname === "cssTextHasContrast") {
+						if ($testname === "cssTextHasContrast" || $testname === "cssTextStyleEmphasize") {
 							foreach ($problem->element->attributes as $name) {
 								if ($name->name === "style") {
 									$styleValue = $name->value;
@@ -83,10 +83,18 @@ function getReport()
 							}
 
 							$testResult['colors'] = $hexColors;
+
+							if ( sizeof($hexColors) === 1 ) {
+								$testResult['fore_color'] = $hexColors[0];
+							} else {
+								$testResult['back_color'] = $hexColors[0];
+								$testResult['fore_color'] = $hexColors[1];
+							}
 						}
 
-						$testResult['type']   = $testname;
-						$testResult['lineNo'] = $problem->line;
+						$testResult['text_type']	= $problem->message;
+						$testResult['type']   	= $testname;
+						$testResult['lineNo'] 	= $problem->line;
 
 						if(isset($testResult['element'])) {
 							$testResult['element'] = $problem->element->tagName;