report: re-order manual audits and expand when audits pass (#15310)

GoogleChrome · Jul 28, 2023 · 113bd76 · 113bd76
1 parent 31913c7
commit 113bd76
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 54 deletions.
diff --git a/core/config/default-config.js b/core/config/default-config.js
@@ -38,8 +38,8 @@ const UIStrings = {
   diagnosticsGroupDescription: 'More information about the performance of your application. These numbers don\'t [directly affect](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) the Performance score.',
   /** Title of the Accessibility category of audits. This section contains audits focused on making web content accessible to all users. Also used as a label of a score gauge; try to limit to 20 characters. */
   a11yCategoryTitle: 'Accessibility',
-  /** Description of the Accessibility category. This is displayed at the top of a list of audits focused on making web content accessible to all users. No character length limits. 'improve the accessibility of your web app' becomes link text to additional documentation. */
-  a11yCategoryDescription: 'These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.',
+  /** Description of the Accessibility category. This is displayed at the top of a list of audits focused on making web content accessible to all users. No character length limits. 'improve the accessibility of your web app' and 'manual testing' become link texts to additional documentation. */
+  a11yCategoryDescription: 'These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/how-to-review/) is also encouraged.',
   /** Description of the Accessibility manual checks category. This description is displayed above a list of accessibility audits that currently have no automated test and so must be verified manually by the user. No character length limits. 'conducting an accessibility review' becomes link text to additional documentation. */
   a11yCategoryManualDescription: 'These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/how-to-review/).',
   /** Title of the best practices section of the Accessibility category. Within this section are audits with descriptive titles that highlight common accessibility best practices. */
@@ -571,16 +571,16 @@ const defaultConfig = {
         {id: 'valid-lang', weight: 7, group: 'a11y-language'},
         {id: 'video-caption', weight: 10, group: 'a11y-audio-video'},
         // Manual audits
-        {id: 'logical-tab-order', weight: 0},
         {id: 'focusable-controls', weight: 0},
         {id: 'interactive-element-affordance', weight: 0},
-        {id: 'managed-focus', weight: 0},
+        {id: 'logical-tab-order', weight: 0},
+        {id: 'visual-order-follows-dom', weight: 0},
         {id: 'focus-traps', weight: 0},
+        {id: 'managed-focus', weight: 0},
+        {id: 'use-landmarks', weight: 0},
+        {id: 'offscreen-content-hidden', weight: 0},
         {id: 'custom-controls-labels', weight: 0},
         {id: 'custom-controls-roles', weight: 0},
-        {id: 'visual-order-follows-dom', weight: 0},
-        {id: 'offscreen-content-hidden', weight: 0},
-        {id: 'use-landmarks', weight: 0},
         // Hidden audits
         {id: 'empty-heading', weight: 0, group: 'hidden'},
         {id: 'identical-links-same-purpose', weight: 0, group: 'hidden'},

diff --git a/core/test/fixtures/user-flows/reports/sample-flow-result.json b/core/test/fixtures/user-flows/reports/sample-flow-result.json
@@ -4006,7 +4006,7 @@
           },
           "accessibility": {
             "title": "Accessibility",
-            "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
+            "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/how-to-review/) is also encouraged.",
             "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/how-to-review/).",
             "supportedModes": [
               "navigation",
@@ -4299,43 +4299,43 @@
                 "group": "a11y-audio-video"
               },
               {
-                "id": "logical-tab-order",
+                "id": "focusable-controls",
                 "weight": 0
               },
               {
-                "id": "focusable-controls",
+                "id": "interactive-element-affordance",
                 "weight": 0
               },
               {
-                "id": "interactive-element-affordance",
+                "id": "logical-tab-order",
                 "weight": 0
               },
               {
-                "id": "managed-focus",
+                "id": "visual-order-follows-dom",
                 "weight": 0
               },
               {
                 "id": "focus-traps",
                 "weight": 0
               },
               {
-                "id": "custom-controls-labels",
+                "id": "managed-focus",
                 "weight": 0
               },
               {
-                "id": "custom-controls-roles",
+                "id": "use-landmarks",
                 "weight": 0
               },
               {
-                "id": "visual-order-follows-dom",
+                "id": "offscreen-content-hidden",
                 "weight": 0
               },
               {
-                "id": "offscreen-content-hidden",
+                "id": "custom-controls-labels",
                 "weight": 0
               },
               {
-                "id": "use-landmarks",
+                "id": "custom-controls-roles",
                 "weight": 0
               },
               {
@@ -14855,7 +14855,7 @@
           },
           "accessibility": {
             "title": "Accessibility",
-            "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
+            "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/how-to-review/) is also encouraged.",
             "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/how-to-review/).",
             "supportedModes": [
               "navigation",
@@ -15148,43 +15148,43 @@
                 "group": "a11y-audio-video"
               },
               {
-                "id": "logical-tab-order",
+                "id": "focusable-controls",
                 "weight": 0
               },
               {
-                "id": "focusable-controls",
+                "id": "interactive-element-affordance",
                 "weight": 0
               },
               {
-                "id": "interactive-element-affordance",
+                "id": "logical-tab-order",
                 "weight": 0
               },
               {
-                "id": "managed-focus",
+                "id": "visual-order-follows-dom",
                 "weight": 0
               },
               {
                 "id": "focus-traps",
                 "weight": 0
               },
               {
-                "id": "custom-controls-labels",
+                "id": "managed-focus",
                 "weight": 0
               },
               {
-                "id": "custom-controls-roles",
+                "id": "use-landmarks",
                 "weight": 0
               },
               {
-                "id": "visual-order-follows-dom",
+                "id": "offscreen-content-hidden",
                 "weight": 0
               },
               {
-                "id": "offscreen-content-hidden",
+                "id": "custom-controls-labels",
                 "weight": 0
               },
               {
-                "id": "use-landmarks",
+                "id": "custom-controls-roles",
                 "weight": 0
               },
               {
@@ -21634,7 +21634,7 @@
           },
           "accessibility": {
             "title": "Accessibility",
-            "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
+            "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/how-to-review/) is also encouraged.",
             "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/how-to-review/).",
             "supportedModes": [
               "navigation",
@@ -21927,43 +21927,43 @@
                 "group": "a11y-audio-video"
               },
               {
-                "id": "logical-tab-order",
+                "id": "focusable-controls",
                 "weight": 0
               },
               {
-                "id": "focusable-controls",
+                "id": "interactive-element-affordance",
                 "weight": 0
               },
               {
-                "id": "interactive-element-affordance",
+                "id": "logical-tab-order",
                 "weight": 0
               },
               {
-                "id": "managed-focus",
+                "id": "visual-order-follows-dom",
                 "weight": 0
               },
               {
                 "id": "focus-traps",
                 "weight": 0
               },
               {
-                "id": "custom-controls-labels",
+                "id": "managed-focus",
                 "weight": 0
               },
               {
-                "id": "custom-controls-roles",
+                "id": "use-landmarks",
                 "weight": 0
               },
               {
-                "id": "visual-order-follows-dom",
+                "id": "offscreen-content-hidden",
                 "weight": 0
               },
               {
-                "id": "offscreen-content-hidden",
+                "id": "custom-controls-labels",
                 "weight": 0
               },
               {
-                "id": "use-landmarks",
+                "id": "custom-controls-roles",
                 "weight": 0
               },
               {

diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json
@@ -6103,7 +6103,7 @@
     },
     "accessibility": {
       "title": "Accessibility",
-      "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
+      "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/how-to-review/) is also encouraged.",
       "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/how-to-review/).",
       "supportedModes": [
         "navigation",
@@ -6396,43 +6396,43 @@
           "group": "a11y-audio-video"
         },
         {
-          "id": "logical-tab-order",
+          "id": "focusable-controls",
           "weight": 0
         },
         {
-          "id": "focusable-controls",
+          "id": "interactive-element-affordance",
           "weight": 0
         },
         {
-          "id": "interactive-element-affordance",
+          "id": "logical-tab-order",
           "weight": 0
         },
         {
-          "id": "managed-focus",
+          "id": "visual-order-follows-dom",
           "weight": 0
         },
         {
           "id": "focus-traps",
           "weight": 0
         },
         {
-          "id": "custom-controls-labels",
+          "id": "managed-focus",
           "weight": 0
         },
         {
-          "id": "custom-controls-roles",
+          "id": "use-landmarks",
           "weight": 0
         },
         {
-          "id": "visual-order-follows-dom",
+          "id": "offscreen-content-hidden",
           "weight": 0
         },
         {
-          "id": "offscreen-content-hidden",
+          "id": "custom-controls-labels",
           "weight": 0
         },
         {
-          "id": "use-landmarks",
+          "id": "custom-controls-roles",
           "weight": 0
         },
         {

diff --git a/report/renderer/category-renderer.js b/report/renderer/category-renderer.js
@@ -309,14 +309,14 @@ export class CategoryRenderer {
    * Take a set of audits and render in a top-level, expandable clump that starts
    * in a collapsed state.
    * @param {Exclude<TopLevelClumpId, 'failed'>} clumpId
-   * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string}} clumpOpts
+   * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string, openByDefault?: boolean}} clumpOpts
    * @return {!Element}
    */
-  renderClump(clumpId, {auditRefs, description}) {
+  renderClump(clumpId, {auditRefs, description, openByDefault}) {
     const clumpComponent = this.dom.createComponent('clump');
     const clumpElement = this.dom.find('.lh-clump', clumpComponent);
 
-    if (clumpId === 'warning') {
+    if (openByDefault) {
       clumpElement.setAttribute('open', '');
     }
 
@@ -559,6 +559,7 @@ export class CategoryRenderer {
       });
     }
 
+    const numFailingAudits = clumps.get('failed')?.length;
     // Render each clump.
     for (const [clumpId, auditRefs] of clumps) {
       if (auditRefs.length === 0) continue;
@@ -571,7 +572,10 @@ export class CategoryRenderer {
       }
 
       const description = clumpId === 'manual' ? category.manualDescription : undefined;
-      const clumpElem = this.renderClump(clumpId, {auditRefs, description});
+      // Expand on warning, or manual audits when there are no failing audits.
+      const openByDefault =
+        clumpId === 'warning' || (clumpId === 'manual' && numFailingAudits === 0);
+      const clumpElem = this.renderClump(clumpId, {auditRefs, description, openByDefault});
       element.append(clumpElem);
     }
 

diff --git a/report/renderer/pwa-category-renderer.js b/report/renderer/pwa-category-renderer.js
@@ -41,7 +41,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     // Manual audits are still in a manual clump.
     const manualAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode === 'manual');
     const manualElem = this.renderClump('manual',
-      {auditRefs: manualAuditRefs, description: category.manualDescription});
+      {auditRefs: manualAuditRefs, description: category.manualDescription, openByDefault: true});
     categoryElem.append(manualElem);
 
     return categoryElem;

diff --git a/report/test/renderer/category-renderer-test.js b/report/test/renderer/category-renderer-test.js
@@ -464,6 +464,18 @@ describe('CategoryRenderer', () => {
       assert.ok(isExpanded, 'Warning audit group should be expanded by default');
     });
 
+    it('expands the manual audit group if there are 0 failing audits', () => {
+      const category = sampleResults.categories.accessibility;
+      const categoryClone = JSON.parse(JSON.stringify(category));
+      categoryClone.auditRefs.filter(audit => audit.result.scoreDisplayMode === 'binary')
+        .forEach(audit => audit.result.score = 1);
+
+      const auditDOM = renderer.render(categoryClone, sampleResults.categoryGroups);
+      const manualClumpEl = auditDOM.querySelector('.lh-clump--manual');
+      const isExpanded = manualClumpEl.hasAttribute('open');
+      assert.ok(isExpanded, 'Manual audit group should be expanded if there are 0 failing audits');
+    });
+
     it('only passing audits with warnings show in warnings section', () => {
       const failingWarning = 'Failed and warned';
       const passingWarning = 'A passing warning';

diff --git a/shared/localization/locales/en-US.json b/shared/localization/locales/en-US.json
diff --git a/shared/localization/locales/en-XL.json b/shared/localization/locales/en-XL.json