Merge pull request #1148 from equalizedigital/william/pro-218-missing-transcript-not-detected-when-using-lazyload-iframes

Missing transcript not detecting correctly when using lazyload iframes

Author: pattonwebz

src/pageScanner/checks/has-transcript.js

@@ -8,6 +8,9 @@
 const videoEmbedKeywords = [ 'youtube.com', 'youtu.be', 'vimeo.com' ];
 const mediaExtensions = /\.(3gp|asf|asx|avi|flv|m4a|m4p|mov|mp3|mp4|mpeg|mpeg2|mpg|mpv|ogg|oga|ogv|qtl|smi|smil|wav|wax|webm|wmv|wmp|wmx)(\?.*)?$/i;
 
+const MAX_SIBLINGS_TO_CHECK = 5;
+const PARENT_SIBLING_LIMIT = 3;
+
 export default {
 	id: 'has_transcript',
 	evaluate: ( node ) => {
@@ -49,14 +52,37 @@ export default {
 	},
 };
 
+/**
+ * Helper function to collect text content from a series of sibling elements
+ * @param {Element} startSibling - The first sibling element to start from
+ * @param {number}  maxCount     - Maximum number of siblings to check
+ * @return {string} - Concatenated text content from siblings
+ */
+function collectSiblingText( startSibling, maxCount ) {
+	let text = '';
+	let currentSibling = startSibling;
+	let siblingCount = 0;
+
+	while ( currentSibling && siblingCount < maxCount ) {
+		const siblingText = currentSibling.textContent?.trim();
+		if ( siblingText ) {
+			text += siblingText + ' ';
+		}
+		currentSibling = currentSibling.nextElementSibling;
+		siblingCount++;
+	}
+
+	return text;
+}
+
 function getSurroundingText( node, radius = 250 ) {
 	let text = '';
 
-	// Include immediate next and previous siblings
-	if ( node.previousElementSibling ) {
+	// Include immediate next and previous siblings (but skip noscript elements)
+	if ( node.previousElementSibling && node.previousElementSibling.nodeName.toLowerCase() !== 'noscript' ) {
 		text += node.previousElementSibling.textContent.trim() + ' ';
 	}
-	if ( node.nextElementSibling ) {
+	if ( node.nextElementSibling && node.nextElementSibling.nodeName.toLowerCase() !== 'noscript' ) {
 		text += node.nextElementSibling.textContent.trim() + ' ';
 	}
 
@@ -67,11 +93,17 @@ function getSurroundingText( node, radius = 250 ) {
 		if ( figcaption ) {
 			text += figcaption.textContent.trim() + ' ';
 		}
+
+		// Check siblings of the figure element for transcript links
+		text += collectSiblingText( figure.nextElementSibling, MAX_SIBLINGS_TO_CHECK );
 	}
 
 	// Walk limited DOM subtree (media-wrapper, section, article, etc.)
 	const parent = node.closest( '.media-wrapper, figure, section, article' );
 	if ( parent ) {
+		// Also check parent's siblings for transcript text
+		text += collectSiblingText( parent.nextElementSibling, PARENT_SIBLING_LIMIT );
+
 		const nodeFilter = {
 			acceptNode( textNode ) {
 				const style = window.getComputedStyle( textNode.parentElement );

tests/jest/rules/missingTranscript.test.js

@@ -85,6 +85,21 @@ describe( 'Missing Transcript Rule', () => {
 			`,
 			shouldPass: true,
 		},
+		{
+			name: 'passes YouTube iframe with transcript link nearby',
+			html: `
+			<figure>
+				<div class="wp-block-embed__wrapper">
+					<iframe src="https://www.youtube.com/embed/ABC123?feature=oembed&amp;enablejsapi=1&amp;origin=https://example.com" title="Sample Video Title" width="980" height="551" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" class="_iub_cs_activate perfmatters-lazy entered pmloaded _iub_cs_activate-activated" data-iub-purposes="3" data-src="//cdn.iubenda.com/cookie_solution/empty.html" data-ll-status="loaded" data-cmp-ab="2" data-cmp-info="8" async="false"></iframe>
+					<noscript>
+						<iframe title="Sample Video Title" width="980" height="551" src="//cdn.iubenda.com/cookie_solution/empty.html" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen suppressedsrc="https://www.youtube.com/embed/ABC123?feature=oembed&amp;enablejsapi=1&amp;origin=https://example.com" class=" _iub_cs_activate" data-iub-purposes="3"></iframe>
+					</noscript>
+				</div>
+			</figure>
+			<h3 class="wp-block-heading"><a href="https://example.com/transcript-sample-video/">(Access a full transcript of the above video.)</a></h3>
+			`,
+			shouldPass: true,
+		},
 
 		// ✅ Negative (non-relevant) elements — no violation
 		{