From e7560c622e990386c089ff8dd714cc816f8d9b04 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 10 Jun 2019 16:21:38 -0700 Subject: [PATCH 1/7] report: quick tab --- .../html/renderer/report-ui-features.js | 35 +++++++++++++++++++ lighthouse-core/report/html/templates.html | 23 ++++++++++++ 2 files changed, 58 insertions(+) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 213199757c28..46ef9c570d1b 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -84,6 +84,7 @@ class ReportUIFeatures { this._setupToolsButton(); this._setupThirdPartyFilter(); this._setUpCollapseDetailsAfterPrinting(); + this._setUpQuickTabFocus(); this._resetUIState(); this._document.addEventListener('keyup', this.onKeyUp); this._document.addEventListener('copy', this.onCopy); @@ -559,6 +560,40 @@ class ReportUIFeatures { } } + /** + * Tab + Enter for quick jump document.activeElement to the first interesting element. + */ + _setUpQuickTabFocus() { + const firstContentSelectors = [ + { + selector: '.lh-audit--fail summary', + label: 'Jump to first failing audit.', + }, + { + selector: '.lh-audit--average summary', + label: 'Jump to first average audit.', + }, + { + selector: '.lh-audit--audit summary', + label: 'Jump to first audit.', + }, + ]; + + const {selector, label} = firstContentSelectors.find(({selector}) => { + const el = this._document.querySelector(selector); + return Boolean(el && el instanceof HTMLElement); + }) || {selector: '.lh-category-header .lh-gauge__wrapper', label: 'Jump to first category.'}; + + const startOfContentEl = this._dom.find(selector, this._document); + const quickFocusEl = this._dom.find('.lh-a11y-quick-focus', this._document); + quickFocusEl.innerText = label; + quickFocusEl.classList.remove('disabled'); + quickFocusEl.addEventListener('click', (e) => { + startOfContentEl.focus(); + e.preventDefault(); + }); + } + /** * Returns the html that recreates this report. * @return {string} diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index ffa2f896fd4c..620b71031c82 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -352,8 +352,31 @@ margin-left: 0; } } + + .lh-a11y-quick-focus { + background-color: var(--color-blue); + padding: 20px; + clip: rect(1px, 1px, 1px, 1px); + margin: 0; + height: 1px; + width: 1px; + overflow: hidden; + position: absolute; + } + .lh-a11y-quick-focus.disabled { + visibility: hidden; + } + .lh-a11y-quick-focus:focus { + clip: auto; + height: auto; + width: auto; + z-index: 10000; /* lol */ + } + + asd +
From 9a7df738fd632a99c4c66baf8407f1e12180f844 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 11 Jun 2019 15:11:54 -0700 Subject: [PATCH 4/7] refactor --- .../html/renderer/report-ui-features.js | 36 ++++++++++++++----- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index e7958ca5a8e4..63ad51401325 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -560,11 +560,8 @@ class ReportUIFeatures { } } - /** - * Tab + Enter for quick jump document.activeElement to the first interesting element. - */ - _setUpQuickTabFocus() { - const firstContentSelectors = [ + _getFirstInterestingElement() { + const rules = [ { selector: '.lh-audit--fail summary', label: 'Jump to first failing audit.', @@ -577,19 +574,40 @@ class ReportUIFeatures { selector: '.lh-audit--audit summary', label: 'Jump to first audit.', }, + { + selector: '.lh-category-header .lh-gauge__wrapper', + label: 'Jump to first category.', + }, ]; - const {selector, label} = firstContentSelectors.find(({selector}) => { + const firstValidRule = rules.find(({selector}) => { const el = this._document.querySelector(selector); return Boolean(el && el instanceof HTMLElement); - }) || {selector: '.lh-category-header .lh-gauge__wrapper', label: 'Jump to first category.'}; + }); + + if (!firstValidRule) { + return null; + } + + return { + element: this._dom.find(firstValidRule.selector, this._document), + label: firstValidRule.label, + }; + } + + /** + * Tab + Enter for quick jump document.activeElement to the first interesting element. + */ + _setUpQuickTabFocus() { + const firstInterestingElement = this._getFirstInterestingElement(); + if (!firstInterestingElement) return; + const {element, label} = firstInterestingElement; - const startOfContentEl = this._dom.find(selector, this._document); const quickFocusEl = this._dom.find('.lh-a11y-quick-focus', this._document); quickFocusEl.textContent = label; quickFocusEl.classList.remove('disabled'); quickFocusEl.addEventListener('click', (e) => { - startOfContentEl.focus(); + element.focus(); e.preventDefault(); }); } From 8b49ef6cadcaa22d1899820d4377632390a5cd34 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 11 Jun 2019 15:20:19 -0700 Subject: [PATCH 5/7] i18n --- .../report/html/renderer/report-ui-features.js | 8 ++++---- lighthouse-core/report/html/renderer/util.js | 12 ++++++++++++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 63ad51401325..ff3197fd3c4f 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -564,19 +564,19 @@ class ReportUIFeatures { const rules = [ { selector: '.lh-audit--fail summary', - label: 'Jump to first failing audit.', + label: Util.UIStrings.quickTabFirstFailingAudit, }, { selector: '.lh-audit--average summary', - label: 'Jump to first average audit.', + label: Util.UIStrings.quickTabFirstAverageAudit, }, { selector: '.lh-audit--audit summary', - label: 'Jump to first audit.', + label: Util.UIStrings.quickTabFirstAudit, }, { selector: '.lh-category-header .lh-gauge__wrapper', - label: 'Jump to first category.', + label: Util.UIStrings.quickTabFirstCategory, }, ]; diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index f29b6293374a..39a0a50396d9 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -600,6 +600,18 @@ Util.UIStrings = { /** This label is for a checkbox above a table of items loaded by a web page. The checkbox is used to show or hide third-party (or "3rd-party") resources in the table, where "third-party resources" refers to items loaded by a web page from URLs that aren't controlled by the owner of the web page. */ thirdPartyResourcesLabel: 'Show 3rd-party resources', + + /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */ + quickTabFirstFailingAudit: 'Skip to first failing audit', + + /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */ + quickTabFirstAverageAudit: 'Skip to first average audit', + + /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */ + quickTabFirstAudit: 'Skip to first audit', + + /** This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element. */ + quickTabFirstCategory: 'Skip to first category', }; if (typeof module !== 'undefined' && module.exports) { From 15bfaf14ac9eedeeba7dea2e0f61d4a92a34bcf5 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 11 Jun 2019 15:21:16 -0700 Subject: [PATCH 6/7] remove unneeded conditional --- lighthouse-core/report/html/renderer/report-ui-features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index ff3197fd3c4f..005e5725a150 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -582,7 +582,7 @@ class ReportUIFeatures { const firstValidRule = rules.find(({selector}) => { const el = this._document.querySelector(selector); - return Boolean(el && el instanceof HTMLElement); + return Boolean(el); }); if (!firstValidRule) { From ccc083cf941e6e56ef640ef5cfe49a76e11c9ea0 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 11 Jun 2019 16:09:16 -0700 Subject: [PATCH 7/7] sample jsonn --- lighthouse-core/lib/i18n/en-US.json | 16 ++++++++++++++++ lighthouse-core/test/results/sample_v2.json | 4 ++++ proto/lighthouse-result.proto | 12 ++++++++++++ proto/sample_v2_round_trip.json | 4 ++++ 4 files changed, 36 insertions(+) diff --git a/lighthouse-core/lib/i18n/en-US.json b/lighthouse-core/lib/i18n/en-US.json index b4d573c3d4c0..64ca6164e84b 100644 --- a/lighthouse-core/lib/i18n/en-US.json +++ b/lighthouse-core/lib/i18n/en-US.json @@ -1435,6 +1435,22 @@ "message": "Passed audits", "description": "Section heading shown above a list of audits that are passing. 'Passed' here refers to a passing grade. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list." }, + "lighthouse-core/report/html/renderer/util.js | quickTabFirstAudit": { + "message": "Skip to first audit", + "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element." + }, + "lighthouse-core/report/html/renderer/util.js | quickTabFirstAverageAudit": { + "message": "Skip to first average audit", + "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element." + }, + "lighthouse-core/report/html/renderer/util.js | quickTabFirstCategory": { + "message": "Skip to first category", + "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element." + }, + "lighthouse-core/report/html/renderer/util.js | quickTabFirstFailingAudit": { + "message": "Skip to first failing audit", + "description": "This label is shown to users who tab-focus to navigate the Lighthouse report. The first focus element on the page will show this text, and hitting enter will move the document's focus to the specified element." + }, "lighthouse-core/report/html/renderer/util.js | snippetCollapseButtonLabel": { "message": "Collapse snippet", "description": "Label for button that only shows a few lines of the snippet when clicked" diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 088cbea1083d..d03f3234a3f2 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -5051,6 +5051,10 @@ "opportunityResourceColumnLabel": "Opportunity", "opportunitySavingsColumnLabel": "Estimated Savings", "passedAuditsGroupTitle": "Passed audits", + "quickTabFirstAudit": "Skip to first audit", + "quickTabFirstAverageAudit": "Skip to first average audit", + "quickTabFirstCategory": "Skip to first category", + "quickTabFirstFailingAudit": "Skip to first failing audit", "snippetCollapseButtonLabel": "Collapse snippet", "snippetExpandButtonLabel": "Expand snippet", "thirdPartyResourcesLabel": "Show 3rd-party resources", diff --git a/proto/lighthouse-result.proto b/proto/lighthouse-result.proto index d3d485782d2e..7ca4a1838681 100644 --- a/proto/lighthouse-result.proto +++ b/proto/lighthouse-result.proto @@ -359,6 +359,18 @@ message I18n { // This label is for a filter checkbox above a table of items string third_party_resources_label = 20; + + // The first focus element on the page will show this text + string quick_tab_first_failing_audit = 21; + + // The first focus element on the page will show this text + string quick_tab_first_average_audit = 22; + + // The first focus element on the page will show this text + string quick_tab_first_audit = 23; + + // The first focus element on the page will show this text + string quick_tab_first_category = 24; } // The message holding all formatted strings diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json index 5e0e3279fa0f..1d87540a1ddf 100644 --- a/proto/sample_v2_round_trip.json +++ b/proto/sample_v2_round_trip.json @@ -3921,6 +3921,10 @@ "opportunityResourceColumnLabel": "Opportunity", "opportunitySavingsColumnLabel": "Estimated Savings", "passedAuditsGroupTitle": "Passed audits", + "quickTabFirstAudit": "Skip to first audit", + "quickTabFirstAverageAudit": "Skip to first average audit", + "quickTabFirstCategory": "Skip to first category", + "quickTabFirstFailingAudit": "Skip to first failing audit", "snippetCollapseButtonLabel": "Collapse snippet", "snippetExpandButtonLabel": "Expand snippet", "thirdPartyResourcesLabel": "Show 3rd-party resources",