From 113bd76598c8ddcd1af258b8f3f8447ec78a6768 Mon Sep 17 00:00:00 2001 From: jazyan <3894375+jazyan@users.noreply.github.com> Date: Fri, 28 Jul 2023 17:18:26 -0400 Subject: [PATCH] report: re-order manual audits and expand when audits pass (#15310) --- core/config/default-config.js | 14 ++--- .../reports/sample-flow-result.json | 60 +++++++++---------- core/test/results/sample_v2.json | 20 +++---- report/renderer/category-renderer.js | 12 ++-- report/renderer/pwa-category-renderer.js | 2 +- .../test/renderer/category-renderer-test.js | 12 ++++ shared/localization/locales/en-US.json | 2 +- shared/localization/locales/en-XL.json | 2 +- 8 files changed, 70 insertions(+), 54 deletions(-) diff --git a/core/config/default-config.js b/core/config/default-config.js index 880fee212a68..910c6500cb16 100644 --- 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 index d45a27e2eb13..c1017914c8fd 100644 --- 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,19 +4299,19 @@ "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 }, { @@ -4319,23 +4319,23 @@ "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,19 +15148,19 @@ "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 }, { @@ -15168,23 +15168,23 @@ "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,19 +21927,19 @@ "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 }, { @@ -21947,23 +21947,23 @@ "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 index b9bdf9be7281..7aae6661fcbd 100644 --- 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,19 +6396,19 @@ "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 }, { @@ -6416,23 +6416,23 @@ "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 index 8886f00cbcbd..b65b267c27d8 100644 --- 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} clumpId - * @param {{auditRefs: Array, description?: string}} clumpOpts + * @param {{auditRefs: Array, 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 index a0ed615393aa..890782f1ab42 100644 --- 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 index 193baf16a229..d3c4cc7954ed 100644 --- 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 index e371461afab5..e95c880211cc 100644 --- a/shared/localization/locales/en-US.json +++ b/shared/localization/locales/en-US.json @@ -1716,7 +1716,7 @@ "message": "Best practices" }, "core/config/default-config.js | a11yCategoryDescription": { - "message": "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." + "message": "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." }, "core/config/default-config.js | a11yCategoryManualDescription": { "message": "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/)." diff --git a/shared/localization/locales/en-XL.json b/shared/localization/locales/en-XL.json index 6b2435ffaac7..681459fed1a3 100644 --- a/shared/localization/locales/en-XL.json +++ b/shared/localization/locales/en-XL.json @@ -1716,7 +1716,7 @@ "message": "B̂éŝt́ p̂ŕâćt̂íĉéŝ" }, "core/config/default-config.js | a11yCategoryDescription": { - "message": "T̂h́êśê ćĥéĉḱŝ h́îǵĥĺîǵĥt́ ôṕp̂ór̂t́ûńît́îéŝ t́ô [ím̂ṕr̂óv̂é t̂h́ê áĉćêśŝíb̂íl̂ít̂ý ôf́ ŷóûŕ ŵéb̂ áp̂ṕ](https://developer.chrome.com/docs/lighthouse/accessibility/). Ôńl̂ý â śûb́ŝét̂ óf̂ áĉćêśŝíb̂íl̂ít̂ý îśŝúêś ĉán̂ b́ê áût́ôḿât́îćâĺl̂ý d̂ét̂éĉt́êd́ ŝó m̂án̂úâĺ t̂éŝt́îńĝ íŝ ál̂śô én̂ćôúr̂áĝéd̂." + "message": "T̂h́êśê ćĥéĉḱŝ h́îǵĥĺîǵĥt́ ôṕp̂ór̂t́ûńît́îéŝ t́ô [ím̂ṕr̂óv̂é t̂h́ê áĉćêśŝíb̂íl̂ít̂ý ôf́ ŷóûŕ ŵéb̂ áp̂ṕ](https://developer.chrome.com/docs/lighthouse/accessibility/). Âút̂óm̂át̂íĉ d́êt́êćt̂íôń ĉán̂ ón̂ĺŷ d́êt́êćt̂ á ŝúb̂śêt́ ôf́ îśŝúêś âńd̂ d́ôéŝ ńôt́ ĝúâŕâńt̂éê t́ĥé âćĉéŝśîb́îĺît́ŷ óf̂ ýôúr̂ ẃêb́ âṕp̂, śô [ḿâńûál̂ t́êśt̂ín̂ǵ](https://web.dev/how-to-review/) îś âĺŝó êńĉóûŕâǵêd́." }, "core/config/default-config.js | a11yCategoryManualDescription": { "message": "T̂h́êśê ít̂ém̂ś âd́d̂ŕêśŝ ár̂éâś ŵh́îćĥ án̂ áût́ôḿât́êd́ t̂éŝt́îńĝ t́ôól̂ ćâńn̂ót̂ ćôv́êŕ. L̂éâŕn̂ ḿôŕê ín̂ óûŕ ĝúîd́ê ón̂ [ćôńd̂úĉt́îńĝ án̂ áĉćêśŝíb̂íl̂ít̂ý r̂év̂íêẃ](https://web.dev/how-to-review/)."