From 55840f6c56bf9a671774469869d1c869da36d5cf Mon Sep 17 00:00:00 2001 From: Jasmine Yan Date: Wed, 26 Jul 2023 17:09:35 -0400 Subject: [PATCH 1/4] expand manual on a11y 100, reorder manual audits, and update a11y category desc --- core/config/default-config.js | 14 ++--- .../reports/sample-flow-result.json | 60 +++++++++---------- core/test/results/sample_v2.json | 20 +++---- report/renderer/category-renderer.js | 11 +++- shared/localization/locales/en-US.json | 2 +- shared/localization/locales/en-XL.json | 2 +- 6 files changed, 57 insertions(+), 52 deletions(-) diff --git a/core/config/default-config.js b/core/config/default-config.js index f2f2b07f018c..516127acc1f0 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://www.w3.org/WAI/test-evaluate/) 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 a62a4cf3e17c..00e1a0f09c59 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://www.w3.org/WAI/test-evaluate/) 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://www.w3.org/WAI/test-evaluate/) 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://www.w3.org/WAI/test-evaluate/) 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 ed0f81513904..c33ca35945c0 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://www.w3.org/WAI/test-evaluate/) 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..aebd9e732f30 100644 --- a/report/renderer/category-renderer.js +++ b/report/renderer/category-renderer.js @@ -310,13 +310,14 @@ export class CategoryRenderer { * in a collapsed state. * @param {Exclude} clumpId * @param {{auditRefs: Array, description?: string}} clumpOpts + * @param {boolean} openByDefault * @return {!Element} */ - renderClump(clumpId, {auditRefs, description}) { + renderClump(clumpId, {auditRefs, description}, openByDefault = false) { const clumpComponent = this.dom.createComponent('clump'); const clumpElement = this.dom.find('.lh-clump', clumpComponent); - if (clumpId === 'warning') { + if (clumpId === 'warning' || openByDefault) { clumpElement.setAttribute('open', ''); } @@ -571,7 +572,11 @@ export class CategoryRenderer { } const description = clumpId === 'manual' ? category.manualDescription : undefined; - const clumpElem = this.renderClump(clumpId, {auditRefs, description}); + const scoreOutOf100 = Math.round(Number(category.score) * 100); + // Expand the manual a11y checks upon scoring 100. + const openByDefault = + (category.id === 'accessibility' && clumpId === 'manual' && scoreOutOf100 === 100); + const clumpElem = this.renderClump(clumpId, {auditRefs, description}, openByDefault); element.append(clumpElem); } diff --git a/shared/localization/locales/en-US.json b/shared/localization/locales/en-US.json index 48dc5a0b6507..a2e2d937d0e0 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://www.w3.org/WAI/test-evaluate/) 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 bbd5ad2a6491..0f48451f6f26 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://www.w3.org/WAI/test-evaluate/) îś âĺŝó êńĉóûŕâǵê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/)." From 6e958ea51f59163bfa7e46660ae917f3a338fa8f Mon Sep 17 00:00:00 2001 From: Jasmine Yan Date: Fri, 28 Jul 2023 11:15:26 -0400 Subject: [PATCH 2/4] review changes --- core/config/default-config.js | 2 +- .../user-flows/reports/sample-flow-result.json | 6 +++--- core/test/results/sample_v2.json | 2 +- report/renderer/category-renderer.js | 15 +++++++-------- shared/localization/locales/en-US.json | 2 +- shared/localization/locales/en-XL.json | 2 +- 6 files changed, 14 insertions(+), 15 deletions(-) diff --git a/core/config/default-config.js b/core/config/default-config.js index 516127acc1f0..ec54bb2c5c87 100644 --- a/core/config/default-config.js +++ b/core/config/default-config.js @@ -39,7 +39,7 @@ const UIStrings = { /** 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' 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://www.w3.org/WAI/test-evaluate/) is also encouraged.', + 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. */ 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 00e1a0f09c59..0547950b76b5 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/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://www.w3.org/WAI/test-evaluate/) 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", @@ -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/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://www.w3.org/WAI/test-evaluate/) 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", @@ -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/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://www.w3.org/WAI/test-evaluate/) 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", diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json index c33ca35945c0..0fe380ffb41b 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/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://www.w3.org/WAI/test-evaluate/) 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", diff --git a/report/renderer/category-renderer.js b/report/renderer/category-renderer.js index aebd9e732f30..b65b267c27d8 100644 --- a/report/renderer/category-renderer.js +++ b/report/renderer/category-renderer.js @@ -309,15 +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 {boolean} openByDefault + * @param {{auditRefs: Array, description?: string, openByDefault?: boolean}} clumpOpts * @return {!Element} */ - renderClump(clumpId, {auditRefs, description}, openByDefault = false) { + renderClump(clumpId, {auditRefs, description, openByDefault}) { const clumpComponent = this.dom.createComponent('clump'); const clumpElement = this.dom.find('.lh-clump', clumpComponent); - if (clumpId === 'warning' || openByDefault) { + if (openByDefault) { clumpElement.setAttribute('open', ''); } @@ -560,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; @@ -572,11 +572,10 @@ export class CategoryRenderer { } const description = clumpId === 'manual' ? category.manualDescription : undefined; - const scoreOutOf100 = Math.round(Number(category.score) * 100); - // Expand the manual a11y checks upon scoring 100. + // Expand on warning, or manual audits when there are no failing audits. const openByDefault = - (category.id === 'accessibility' && clumpId === 'manual' && scoreOutOf100 === 100); - const clumpElem = this.renderClump(clumpId, {auditRefs, description}, openByDefault); + clumpId === 'warning' || (clumpId === 'manual' && numFailingAudits === 0); + const clumpElem = this.renderClump(clumpId, {auditRefs, description, openByDefault}); element.append(clumpElem); } diff --git a/shared/localization/locales/en-US.json b/shared/localization/locales/en-US.json index a2e2d937d0e0..28ac2b13092d 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/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://www.w3.org/WAI/test-evaluate/) 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 0f48451f6f26..502f865b22db 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/). Âú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://www.w3.org/WAI/test-evaluate/) îś âĺŝó êńĉóûŕâǵê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/)." From 8b43dee9044dd386ce45783d21bd1da59daff06a Mon Sep 17 00:00:00 2001 From: Jasmine Yan Date: Fri, 28 Jul 2023 16:38:37 -0400 Subject: [PATCH 3/4] add test, and expand pwa manual audits by default --- report/renderer/pwa-category-renderer.js | 2 +- report/test/renderer/category-renderer-test.js | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) 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..44aa269d5c3e 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'; From 87fe9cb883d3b7a8bcd12d96edd7eb309b868b09 Mon Sep 17 00:00:00 2001 From: Jasmine Yan Date: Fri, 28 Jul 2023 16:53:09 -0400 Subject: [PATCH 4/4] oops --- report/test/renderer/category-renderer-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report/test/renderer/category-renderer-test.js b/report/test/renderer/category-renderer-test.js index 44aa269d5c3e..d3c4cc7954ed 100644 --- a/report/test/renderer/category-renderer-test.js +++ b/report/test/renderer/category-renderer-test.js @@ -474,7 +474,7 @@ describe('CategoryRenderer', () => { 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';