core(font-size): exclude invisible text (#16281)

GoogleChrome · Dec 12, 2024 · 3c09253 · 3c09253
1 parent 36cac18
commit 3c09253
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/cli/test/fixtures/font-size.html b/cli/test/fixtures/font-size.html
@@ -34,5 +34,10 @@ <h6>2</h6>
   <script class='small'>
     // text from SCRIPT tags should be ignored by the font-size audit
   </script>
+
+  <!-- PASS(font-size): text is not visible -->
+  <div style="visibility: hidden;">
+    <div class="small">Invisible</div>
+  </div>
 </body>
 </html>
diff --git a/core/gather/gatherers/seo/font-size.js b/core/gather/gatherers/seo/font-size.js
@@ -221,8 +221,9 @@ class FontSize extends BaseGatherer {
 
         const nodeIndex = doc.layout.nodeIndex[layoutIndex];
         const styles = doc.layout.styles[layoutIndex];
-        const [fontSizeStringId] = styles;
+        const [fontSizeStringId, visibilityStringId] = styles;
         const fontSize = getFloat(fontSizeStringId);
+        const visibility = getString(visibilityStringId);
 
         const parentIndex = nodes.parentIndex[nodeIndex];
         const grandParentIndex = nodes.parentIndex[parentIndex];
@@ -234,6 +235,7 @@ class FontSize extends BaseGatherer {
           nodeIndex,
           backendNodeId: nodes.backendNodeId[nodeIndex],
           fontSize,
+          visibility,
           textLength: getTextLength(text),
           parentNode: {
             ...parentNode,
@@ -257,17 +259,24 @@ class FontSize extends BaseGatherer {
     let failingTextLength = 0;
 
     for (const textNodeData of this.getTextNodesInLayoutFromSnapshot(snapshot)) {
+      if (textNodeData.visibility === 'hidden') {
+        continue;
+      }
+
       totalTextLength += textNodeData.textLength;
-      if (textNodeData.fontSize < MINIMAL_LEGIBLE_FONT_SIZE_PX) {
-        // Once a bad TextNode is identified, its parent Node is needed.
-        failingTextLength += textNodeData.textLength;
-        failingNodes.push({
-          nodeId: 0, // Set later in fetchFailingNodeSourceRules.
-          parentNode: textNodeData.parentNode,
-          textLength: textNodeData.textLength,
-          fontSize: textNodeData.fontSize,
-        });
+
+      if (textNodeData.fontSize >= MINIMAL_LEGIBLE_FONT_SIZE_PX) {
+        continue;
       }
+
+      // Once a bad TextNode is identified, its parent Node is needed.
+      failingTextLength += textNodeData.textLength;
+      failingNodes.push({
+        nodeId: 0, // Set later in fetchFailingNodeSourceRules.
+        parentNode: textNodeData.parentNode,
+        textLength: textNodeData.textLength,
+        fontSize: textNodeData.fontSize,
+      });
     }
 
     return {totalTextLength, failingTextLength, failingNodes};
@@ -294,7 +303,7 @@ class FontSize extends BaseGatherer {
 
     // Get the computed font-size style of every node.
     const snapshot = await session.sendCommand('DOMSnapshot.captureSnapshot', {
-      computedStyles: ['font-size'],
+      computedStyles: ['font-size', 'visibility'],
     });
 
     const {