Check possible_heading rule with computedStyles

includes/rules.php

@@ -322,6 +322,7 @@
 		'slug'      => 'possible_heading',
 		'rule_type' => 'warning',
 		'summary'   => esc_html__( 'A Possible Heading warning occurs when there is text on a page that appears to be a heading, but has not been coded with proper heading tags. This warning is appears if there are short phrases or strings of text less than 50 characters in length that are formatted in a way which suggests they might be being used as headers (they are 20 pixels or bigger, or are 16 pixels or bigger and bold and/or italicized). To fix a Possible Heading warning, you will need to determine if the flagged text is indeed intended to be a heading. If so, you need to change it from a paragraph to a heading at the proper level. If it is not supposed to be a heading then you can safely “Ignore” the warning.', 'accessibility-checker' ),
+		'ruleset'   => 'js',
 	],
 	[
 		'title'     => esc_html__( 'Blinking or Scrolling Content', 'accessibility-checker' ),

src/pageScanner/checks/paragraph-styled-as-header.js

@@ -0,0 +1,52 @@
+/**
+ * Check for elements with text content that is styled like a header.
+ *
+ * Axe-core has a built-in `p-as-heading` rule that checks for paragraphs
+ * that are styled like headings. That rule is less robust than this check,
+ * as it only checks for paragraphs with bold or italic text and gives back
+ * 'incomplete' or uncertain results for some of the test data that we want
+ * to flag for further checks.
+ *
+ * This check in this file takes into account the font size, length of the
+ * text, and considers paragraphs with large font size as headers as well.
+ *
+ * @param {Node} node The node to evaluate.
+ * @return {boolean} True if the node is styled like a header, false otherwise. Paragraphs with only bold or italic,
+ *                   are shorter than 50 characters, or are short with large font size are considered headers.
+ */
+
+import { fontSizeInPx } from '../helpers/helpers.js';
+
+export default {
+	id: 'paragraph_styled_as_header',
+	evaluate: ( node ) => {
+		const pixelSize = fontSizeInPx( node );
+
+		// long paragraphs or with size under 16px are unlikely to be headers.
+		if ( node.textContent.trim().length > 50 || pixelSize < 16 ) {
+			return false;
+		}
+
+		// paragraphs that are 20px or more are probably headers.
+		if ( pixelSize >= 20 ) {
+			return true;
+		}
+
+		const style = window.getComputedStyle( node );
+
+		const fontWeight = style.getPropertyValue( 'font-weight' );
+		const isBold = [ 'bold', 'bolder', '700', '800', '900' ].includes( fontWeight );
+
+		const fontStyle = style.getPropertyValue( 'font-style' );
+		const isItalic = [ 'italic', 'oblique' ].includes( fontStyle );
+
+		const hasBoldOrItalicTag = node.querySelector( 'b, strong, i, em' ) !== null;
+
+		if ( isBold || isItalic || hasBoldOrItalicTag ) {
+			return true;
+		}
+
+		// didn't find anything indicating this is a possible header.
+		return false;
+	},
+};

src/pageScanner/helpers/helpers.js

@@ -0,0 +1,7 @@
+export const fontSizeInPx = ( node ) => {
+	if ( node === null || node === 'undefined' || node.nodeType !== Node.ELEMENT_NODE ) {
+		return 0;
+	}
+
+	return parseFloat( window.getComputedStyle( node ).fontSize );
+};

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 possibleHeading from './rules/possible-heading';
+import paragraphStyledAsHeader from './checks/paragraph-styled-as-header';
 
 //TODO: examples:
 //import customRule1 from './rules/custom-rule-1';
@@ -40,11 +42,13 @@ const scan = async (
 				// customRule1,
 				colorContrastFailure,
 				underlinedText,
+				possibleHeading,
 			],
 			checks: [
 				//alwaysFail,
 				elementIsAUTag,
 				elementWithUnderline,
+				paragraphStyledAsHeader,
 			],
 			iframes: false,
 
@@ -56,6 +60,7 @@ const scan = async (
 				values: [
 					'color_contrast_failure',
 					'underlined_text',
+					possibleHeading.id,
 				],
 			},
 

src/pageScanner/rules/possible-heading.js

@@ -0,0 +1,15 @@
+export default {
+	id: 'possible_heading',
+	selector: 'p',
+	excludeHidden: false,
+	tags: [
+		'cat.text',
+	],
+	metadata: {
+		description: 'Headings should be used to convey the structure of the page, not styled paragraphs',
+		help: 'Paragraphs should not be styled to look like headings. Use the appropriate heading tag instead.',
+	},
+	all: [],
+	any: [],
+	none: [ 'paragraph_styled_as_header' ],
+};