Add a rule and check for empty paragraphs

includes/classes/class-rest-api.php

@@ -32,6 +32,7 @@ public function __construct() {
 	 */
 	public function init_hooks() {
 		add_action( 'init', [ $this, 'init_rest_routes' ] );
+		add_filter( 'edac_filter_js_violation_html', [ $this, 'filter_js_validation_html' ], 10, 3 );
 	}
 
 
@@ -161,6 +162,29 @@ function () use ( $ns, $version ) {
 		);
 	}
 
+	/**
+	 * Filter the html of the js validation violation.
+	 *
+	 * This can be used to store additional data in the html of the violation.
+	 *
+	 * @since 1.13.0
+	 * @param string $html      The html of the violation.
+	 * @param string $rule_id   The id of the rule.
+	 * @param array  $violation The violation data.
+	 *
+	 * @return string
+	 */
+	public function filter_js_validation_html( string $html, string $rule_id, array $violation ): string {
+		// Add the selector to the violation message as empty paragraphs are almost always
+		// duplicate html fragments. Adding the selector makes it unique, so it can be saved.
+		if ( 'empty_paragraph_tag' === $rule_id ) {
+			$html .= $violation['selector'][0]
+				? '// {{ ' . $violation['selector'][0] . ' }}'
+				: '';
+		}
+		return $html;
+	}
+
 	/**
 	 * REST handler that saves to the DB a list of js rule violations for a post.
 	 *
@@ -239,7 +263,7 @@ public function set_post_scan_results( $request ) {
 
 						// This rule is one that we've included in our js ruleset.
 
-						$html   = $violation['html'];
+						$html   = apply_filters( 'edac_filter_js_violation_html', $violation['html'], $rule_id, $violation );
 						$impact = $violation['impact']; // by default, use the impact setting from the js rule.
 
 						//phpcs:ignore Generic.Commenting.Todo.TaskFound

includes/rules.php

@@ -74,6 +74,14 @@
 			'<code>&lt;h2&gt;</code>'
 		),
 	],
+	[
+		'title'     => esc_html__( 'Empty Paragraph Tag', 'accessibility-checker' ),
+		'info_url'  => 'https://a11ychecker.com/help7870',
+		'slug'      => 'empty_paragraph_tag',
+		'rule_type' => 'warning',
+		'summary'   => esc_html__( 'An Empty Paragraph Tag warning means there is a paragraph tag present that does not contain content. These may be announced by screen readers or create confusion for users. To fix this warning, remove the empty paragraphs from the page. If you need to add spacing between sections, this should be done with padding, margins, or a spacer block.', 'accessibility-checker' ),
+		'ruleset'   => 'js',
+	],
 	[
 		'title'     => esc_html__( 'iFrame Missing Title', 'accessibility-checker' ),
 		'info_url'  => 'https://a11ychecker.com/help1953',

src/pageScanner/checks/paragraph-not-empty.js

@@ -0,0 +1,23 @@
+/**
+ * Check that a paragraph is NOT empty.
+ *
+ * @param {Node} node The paragraph element to evaluate.
+ * @return {boolean} Returns true if the paragraph has content, false if empty.
+ */
+
+export default {
+	id: 'paragraph_not_empty',
+	evaluate: ( node ) => {
+		if ( 'p' !== node.tagName.toLowerCase() ) {
+			return true;
+		}
+
+		// Pass if there are child nodes and the first child is not a text node (notType of 3).
+		if ( node.childNodes.length && node.childNodes[ 0 ].nodeType !== 3 ) {
+			return true;
+		}
+
+		// If there is text content then it passes.
+		return node.textContent.trim() !== '';
+	},
+};

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 emptyParagraph from './rules/empty-paragraph';
+import paragraphNotEmpty from './checks/paragraph-not-empty';
 import textSmall from './rules/text-small';
 import textSizeTooSmall from './checks/text-size-too-small';
 import textJustified from './rules/text-justified';
@@ -44,13 +46,15 @@ const scan = async (
 				//customRule1,
 				colorContrastFailure,
 				underlinedText,
+				emptyParagraph,
 				textSmall,
 				textJustified,
 			],
 			checks: [
 				//alwaysFail,
 				elementIsAUTag,
 				elementWithUnderline,
+				paragraphNotEmpty,
 				textSizeTooSmall,
 				textIsJustified,
 			],
@@ -69,6 +73,9 @@ const scan = async (
 					'meta-viewport',
 					textJustified.id,
           textSmall.id,
+          colorContrastFailure.id,
+					underlinedText.id,
+					emptyParagraph.id,
 				],
 			},
 

src/pageScanner/rules/empty-paragraph.js

@@ -0,0 +1,17 @@
+export default {
+	id: 'empty_paragraph_tag',
+	selector: 'p',
+	excludeHidden: false,
+	tags: [
+		'cat.text',
+		'best-practices',
+	],
+	impact: 'moderate',
+	metadata: {
+		description: 'Detects empty paragraph tags',
+		help: 'Paragraphs should not be used for layout purposes and should never be empty',
+	},
+	all: [],
+	any: [ 'paragraph_not_empty' ],
+	none: [],
+};