Merge pull request #635 from equalizedigital/william/634/convert-text…

…_justified-rule-to-JS-check

Convert text_justified rule to a JS rule

includes/rules.php

@@ -104,13 +104,8 @@
 		'info_url'  => 'https://a11ychecker.com/help1980',
 		'slug'      => 'text_justified',
 		'rule_type' => 'warning',
-		'summary'   => sprintf(
-			// translators: %s is <code>&lt;p&gt;</code>, %s is <code>&lt;div&gt;</code>, %s is <code>&lt;td&gt;</code>.
-			esc_html__( 'A Text Justified warning shows up in Accessibility Checker when the text on your post or page, either a %1$s, %2$s, or %3$s element, with more than 500 characters has been styled with a justified alignment (text-align:justify). To fix this warning, you will need to remove the justified styling from the specified text elements.', 'accessibility-checker' ),
-			'<code>&lt;p&gt;</code>',
-			'<code>&lt;div&gt;</code>',
-			'<code>&lt;td&gt;</code>'
-		),
+		'summary'   => esc_html__( 'A Text Justified warning appears in Accessibility Checker when text with more than 200 characters on your post or page is styled with justified alignment (text-align:justify). To fix this warning, remove the justified styling from the specified text elements.', 'accessibility-checker' ),
+		'ruleset'   => 'js',
 	],
 	[
 		'title'     => esc_html__( 'Link Opens New Window or Tab', 'accessibility-checker' ),

src/pageScanner/checks/text-is-justified.js

@@ -0,0 +1,14 @@
+/**
+ * Axe core check for elements that are aligned to justify.
+ *
+ * @param {Node} node The node to evaluate.
+ * @return {boolean} True if the node is justified, false otherwise.
+ */
+
+export default {
+	id: 'text_is_justified',
+	evaluate: ( node ) => {
+		const style = window.getComputedStyle( node );
+		return style.textAlign.toLowerCase() === 'justify';
+	},
+};

src/pageScanner/index.js

@@ -6,6 +6,8 @@ import colorContrastFailure from './rules/color-contrast-failure';
 import underlinedText from './rules/underlined-text';
 import elementWithUnderline from './checks/element-with-underline';
 import elementIsAUTag from './checks/element-is-u-tag';
+import textJustified from './rules/text-justified';
+import textIsJustified from './checks/text-is-justified';
 
 //TODO: examples:
 //import customRule1 from './rules/custom-rule-1';
@@ -40,11 +42,13 @@ const scan = async (
 				//customRule1,
 				colorContrastFailure,
 				underlinedText,
+				textJustified,
 			],
 			checks: [
 				//alwaysFail,
 				elementIsAUTag,
 				elementWithUnderline,
+				textIsJustified,
 			],
 			iframes: false,
 
@@ -57,6 +61,7 @@ const scan = async (
 					'color_contrast_failure',
 					'underlined_text',
 					'meta-viewport',
+					textJustified.id,
 				],
 			},
 

src/pageScanner/rules/text-justified.js

@@ -0,0 +1,21 @@
+/**
+ * Rule: Text Justified
+ *
+ * Text elements should not be justified because it interferes with readability.
+ */
+
+const TEXT_JUSTIFIED_CHECK_THRESHOLD = 200;
+export default {
+	id: 'text_justified',
+	selector: 'p, span, small, strong, b, i, em, h1, h2, h3, h4, h5, h6, a, label, button, th, td, li, div, blockquote, address, cite, q, s, sub, sup, u, del, caption, dt, dd, figcaption, summary, data, time',
+	matches: ( element ) => {
+		return element.textContent.trim().length >= TEXT_JUSTIFIED_CHECK_THRESHOLD;
+	},
+	tags: [ 'wcag2aaa', 'wcag148', 'cat.text', 'custom' ],
+	metadata: {
+		description: 'Text elements inside containers should not be justified.',
+	},
+	all: [],
+	any: [],
+	none: [ 'text_is_justified' ],
+};