Repository: GoogleChrome/lighthouse
Pull request #7393 (2019-03-06 09:03:22)

core(tap-targets): disable font size and tap targets audit on desktop
**Summary**

These two audits aren't important to desktop SEO, so we should disable them there.

**Related Issues/PRs**

Closes https://github.com/GoogleChrome/lighthouse/issues/6687


Patch:
diff --git a/lighthouse-core/audits/seo/font-size.js b/lighthouse-core/audits/seo/font-size.js
index d33826f2b..2dad98bc9 100644
--- a/lighthouse-core/audits/seo/font-size.js
+++ b/lighthouse-core/audits/seo/font-size.js
@@ -207,7 +207,7 @@ class FontSize extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['FontSize', 'URL', 'MetaElements'],
+      requiredArtifacts: ['FontSize', 'URL', 'MetaElements', 'TestedAsMobileDevice'],
     };
   }
 
@@ -217,6 +217,14 @@ class FontSize extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
+    if (!artifacts.TestedAsMobileDevice) {
+      // Font size isn't important to desktop SEO
+      return {
+        rawValue: true,
+        notApplicable: true,
+      };
+    }
+
     const viewportMeta = await ComputedViewportMeta.request(artifacts, context);
     if (!viewportMeta.isMobileOptimized) {
       return {
diff --git a/lighthouse-core/audits/seo/tap-targets.js b/lighthouse-core/audits/seo/tap-targets.js
index 4b3505c0b..7d95dea73 100644
--- a/lighthouse-core/audits/seo/tap-targets.js
+++ b/lighthouse-core/audits/seo/tap-targets.js
@@ -264,7 +264,7 @@ class TapTargets extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['MetaElements', 'TapTargets'],
+      requiredArtifacts: ['MetaElements', 'TapTargets', 'TestedAsMobileDevice'],
     };
   }
 
@@ -274,6 +274,15 @@ class TapTargets extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
+    if (!artifacts.TestedAsMobileDevice) {
+      // Tap target sizes aren't important for desktop SEO, so disable the audit there.
+      // On desktop people also tend to have more precise pointing devices than fingers.
+      return {
+        rawValue: true,
+        notApplicable: true,
+      };
+    }
+
     const viewportMeta = await ComputedViewportMeta.request(artifacts, context);
     if (!viewportMeta.isMobileOptimized) {
       return {


Test patch:
diff --git a/lighthouse-core/test/audits/seo/font-size-test.js b/lighthouse-core/test/audits/seo/font-size-test.js
index c075fe132..8c093e1d2 100644
--- a/lighthouse-core/test/audits/seo/font-size-test.js
+++ b/lighthouse-core/test/audits/seo/font-size-test.js
@@ -22,6 +22,7 @@ describe('SEO: Font size audit', () => {
       URL,
       MetaElements: [],
       FontSize: [],
+      TestedAsMobileDevice: true,
     };
 
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
@@ -45,6 +46,7 @@ describe('SEO: Font size audit', () => {
           {textLength: 31, fontSize: 11, node: {nodeId: 2, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
 
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
@@ -66,6 +68,7 @@ describe('SEO: Font size audit', () => {
           {textLength: 0, fontSize: 11, node: {nodeId: 1, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
 
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
@@ -86,6 +89,7 @@ describe('SEO: Font size audit', () => {
           {textLength: 22, fontSize: 11, node: {nodeId: 2, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
     assert.equal(auditResult.rawValue, true);
@@ -123,6 +127,7 @@ describe('SEO: Font size audit', () => {
           {textLength: 2, fontSize: 10, node: {nodeId: 3}, cssRule: style2},
         ],
       },
+      TestedAsMobileDevice: true,
     };
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
 
@@ -145,6 +150,7 @@ describe('SEO: Font size audit', () => {
           {textLength: 10, fontSize: 10, node: {nodeId: 1, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
     assert.equal(auditResult.rawValue, false);
@@ -167,11 +173,13 @@ describe('SEO: Font size audit', () => {
           {textLength: 50, fontSize: 10, node: {nodeId: 1, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
     assert.equal(auditResult.rawValue, false);
-    expect(auditResult.explanation)
-      .toBeDisplayString('100% of text is too small (based on 50% sample).');
+    expect(auditResult.explanation).toBeDisplayString(
+      '100% of text is too small (based on 50% sample).'
+    );
     expect(auditResult.displayValue).toBeDisplayString('0% legible text');
   });
 
@@ -189,6 +197,7 @@ describe('SEO: Font size audit', () => {
           {textLength: 22, fontSize: 11, node: {nodeId: 2, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
     expect(auditResult.displayValue).toBeDisplayString('89.78% legible text');
@@ -208,8 +217,21 @@ describe('SEO: Font size audit', () => {
           {textLength: 4, fontSize: 11, node: {nodeId: 2, localName: 'p', attributes: []}},
         ],
       },
+      TestedAsMobileDevice: true,
     };
     const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
     expect(auditResult.displayValue).toBeDisplayString('2.48% legible text');
   });
+
+  it('is not applicable on desktop', async () => {
+    const artifacts = {
+      URL,
+      MetaElements: [],
+      FontSize: {},
+      TestedAsMobileDevice: false,
+    };
+    const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
+    expect(auditResult.rawValue).toBe(true);
+    expect(auditResult.notApplicable).toBe(true);
+  });
 });
diff --git a/lighthouse-core/test/audits/seo/tap-targets-test.js b/lighthouse-core/test/audits/seo/tap-targets-test.js
index 977143a50..3683d9b0a 100644
--- a/lighthouse-core/test/audits/seo/tap-targets-test.js
+++ b/lighthouse-core/test/audits/seo/tap-targets-test.js
@@ -12,13 +12,14 @@ const assert = require('assert');
 
 const getFakeContext = () => ({computedCache: new Map()});
 
-function auditTapTargets(tapTargets, metaElements = [{
+function auditTapTargets(tapTargets, {MetaElements = [{
   name: 'viewport',
   content: 'width=device-width',
-}]) {
+}], TestedAsMobileDevice = true} = {}) {
   const artifacts = {
     TapTargets: tapTargets,
-    MetaElements: metaElements,
+    MetaElements,
+    TestedAsMobileDevice,
   };
 
   return TapTargetsAudit.audit(artifacts, getFakeContext());
@@ -203,11 +204,19 @@ describe('SEO: Tap targets audit', () => {
   });
 
   it('fails if no meta viewport tag is provided', async () => {
-    const auditResult = await auditTapTargets([], []);
+    const auditResult = await auditTapTargets([], {MetaElements: []});
     assert.equal(auditResult.rawValue, false);
 
     expect(auditResult.explanation).toBeDisplayString(
       /* eslint-disable max-len */
       'Tap targets are too small because there\'s no viewport meta tag optimized for mobile screens');
   });
+
+  it('is not applicable on desktop', async () => {
+    const auditResult = await auditTapTargets(getBorderlineTapTargets({
+      overlapSecondClientRect: true,
+    }), {TestedAsMobileDevice: false});
+    assert.equal(auditResult.rawValue, true);
+    assert.equal(auditResult.notApplicable, true);
+  });
 });