lighthouse 12.0.0-dev.20240604 → 12.0.0-dev.20240606

package/core/audits/accessibility/aria-allowed-role.js

@@ -13,16 +13,14 @@ import AxeAudit from './axe-audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 
 const UIStrings = {
-  /** Title of an accesibility audit that evaluates if the ARIA role attributes are valid for the HTML element. This title is descriptive of the successful state and is shown to users when no user action is required. */
-  title: 'Values assigned to `role=""` are valid ARIA roles.',
-  /** Title of an accesibility audit that evaluates if the ARIA role attributes are valid for the HTML element. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
-  failureTitle: 'Values assigned to `role=""` are not valid ARIA roles.',
+  /** Title of an accessibility audit that evaluates if the ARIA role attributes are valid for the HTML element. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Uses ARIA roles only on compatible elements',
+  /** Title of an accessibility audit that evaluates if the ARIA role attributes are valid for the HTML element. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Uses ARIA roles on incompatible elements',
   /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
-  description: 'ARIA `role`s enable assistive technologies to know the role of each element on ' +
-      'the web page. If the `role` values are misspelled, not existing ARIA `role` values, or ' +
-      'abstract roles, then the purpose of the element will not be communicated to users of ' +
-      'assistive technologies. ' +
-      '[Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-role).',
+  description: 'Many HTML elements can only be assigned certain ARIA roles. Using ARIA ' +
+    'roles where they are not allowed can interfere with the accessibility of the web page. ' +
+    '[Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-role).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/metrics/interactive.d.ts

@@ -1,7 +1,7 @@
 export default InteractiveMetric;
 /**
  * @fileoverview This audit identifies the time the page is "consistently interactive".
- * Looks for the first period of at least 5 seconds after FMP where both CPU and network were quiet,
+ * Looks for the first period of at least 5 seconds after FCP where both CPU and network were quiet,
  * and returns the timestamp of the beginning of the CPU quiet period.
  * @see https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit#
  */

package/core/audits/metrics/interactive.js

@@ -18,7 +18,7 @@ const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
 /**
  * @fileoverview This audit identifies the time the page is "consistently interactive".
- * Looks for the first period of at least 5 seconds after FMP where both CPU and network were quiet,
+ * Looks for the first period of at least 5 seconds after FCP where both CPU and network were quiet,
  * and returns the timestamp of the beginning of the CPU quiet period.
  * @see https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit#
  */

package/core/computed/metrics/lantern-interactive.js

@@ -5,7 +5,7 @@
  */
 
 import {makeComputedArtifact} from '../computed-artifact.js';
-import {LanternFirstMeaningfulPaint} from './lantern-first-meaningful-paint.js';
+import {LanternLargestContentfulPaint} from './lantern-largest-contentful-paint.js';
 import {Interactive} from '../../lib/lantern/metrics/interactive.js';
 import {getComputationDataParams, lanternErrorAdapter} from './lantern-metric.js';
 
@@ -29,8 +29,8 @@ class LanternInteractive extends Interactive {
    * @return {Promise<LH.Artifacts.LanternMetric>}
    */
   static async compute_(data, context) {
-    const fmpResult = await LanternFirstMeaningfulPaint.request(data, context);
-    return this.computeMetricWithGraphs(data, context, {fmpResult});
+    const lcpResult = await LanternLargestContentfulPaint.request(data, context);
+    return this.computeMetricWithGraphs(data, context, {lcpResult});
   }
 }
 

package/core/lib/lantern/metric.d.ts

@@ -4,7 +4,7 @@ export type Simulator = import('./simulator/simulator.js').Simulator;
 export type Extras = {
     optimistic: boolean;
     fcpResult?: LH.Artifacts.LanternMetric | undefined;
-    fmpResult?: LH.Artifacts.LanternMetric | undefined;
+    lcpResult?: LH.Artifacts.LanternMetric | undefined;
     interactiveResult?: LH.Artifacts.LanternMetric | undefined;
     speedline?: {
         speedIndex: number;
@@ -17,7 +17,7 @@ export type Extras = {
  * @typedef Extras
  * @property {boolean} optimistic
  * @property {LH.Artifacts.LanternMetric=} fcpResult
- * @property {LH.Artifacts.LanternMetric=} fmpResult
+ * @property {LH.Artifacts.LanternMetric=} lcpResult
  * @property {LH.Artifacts.LanternMetric=} interactiveResult
  * @property {{speedIndex: number}=} speedline
  */

package/core/lib/lantern/metric.js

@@ -16,7 +16,7 @@ import {RESOURCE_TYPES} from '../../lib/network-request.js';
  * @typedef Extras
  * @property {boolean} optimistic
  * @property {LH.Artifacts.LanternMetric=} fcpResult
- * @property {LH.Artifacts.LanternMetric=} fmpResult
+ * @property {LH.Artifacts.LanternMetric=} lcpResult
  * @property {LH.Artifacts.LanternMetric=} interactiveResult
  * @property {{speedIndex: number}=} speedline
  */

package/core/lib/lantern/metrics/interactive.js

@@ -66,12 +66,12 @@ class Interactive extends Metric {
    * @return {LH.Gatherer.Simulation.Result}
    */
   static getEstimateFromSimulation(simulationResult, extras) {
-    if (!extras.fmpResult) throw new Error('missing fmpResult');
+    if (!extras.lcpResult) throw new Error('missing lcpResult');
 
     const lastTaskAt = Interactive.getLastLongTaskEndTime(simulationResult.nodeTimings);
     const minimumTime = extras.optimistic
-      ? extras.fmpResult.optimisticEstimate.timeInMs
-      : extras.fmpResult.pessimisticEstimate.timeInMs;
+      ? extras.lcpResult.optimisticEstimate.timeInMs
+      : extras.lcpResult.pessimisticEstimate.timeInMs;
     return {
       timeInMs: Math.max(minimumTime, lastTaskAt),
       nodeTimings: simulationResult.nodeTimings,
@@ -84,13 +84,13 @@ class Interactive extends Metric {
    * @return {Promise<LH.Artifacts.LanternMetric>}
    */
   static async compute(data, extras) {
-    const fmpResult = extras?.fmpResult;
-    if (!fmpResult) {
-      throw new Error('FMP is required to calculate the Interactive metric');
+    const lcpResult = extras?.lcpResult;
+    if (!lcpResult) {
+      throw new Error('LCP is required to calculate the Interactive metric');
     }
 
     const metricResult = await super.compute(data, extras);
-    metricResult.timing = Math.max(metricResult.timing, fmpResult.timing);
+    metricResult.timing = Math.max(metricResult.timing, lcpResult.timing);
     return metricResult;
   }
 

package/core/lib/lantern/types/lantern.d.ts

@@ -60,7 +60,11 @@ export class NetworkRequest<T = any> {
      * HTTP cache or going to the network for DNS/connection setup, in milliseconds.
      */
     networkRequestTime: number;
-    /** When the last byte of the response headers is received, in milliseconds. */
+    /**
+     * When the last byte of the response headers is received, in milliseconds.
+     * Equal to networkRequestTime if no data is recieved over the
+     * network (ex: cached requests or data urls).
+     */
     responseHeadersEndTime: number;
     /** When the last byte of the response body is received, in milliseconds. */
     networkEndTime: number;

package/core/lib/network-request.d.ts

@@ -104,7 +104,11 @@ export class NetworkRequest {
      * HTTP cache or going to the network for DNS/connection setup, in milliseconds.
      */
     networkRequestTime: number;
-    /** When the last byte of the response headers is received, in milliseconds. */
+    /**
+     * When the last byte of the response headers is received, in milliseconds.
+     * Equal to networkRequestTime if no data is recieved over the
+     * network (ex: cached requests or data urls).
+     */
     responseHeadersEndTime: number;
     /** When the last byte of the response body is received, in milliseconds. */
     networkEndTime: number;
@@ -203,6 +207,7 @@ export class NetworkRequest {
      * @param {LH.Crdp.Network.ResponseReceivedEvent['type']=} resourceType
      */
     _onResponse(response: LH.Crdp.Network.Response, timestamp: number, resourceType?: LH.Crdp.Network.ResponseReceivedEvent['type'] | undefined): void;
+    responseTimestamp: number | undefined;
     /**
      * Resolve differences between conflicting timing signals. Based on the property setters in DevTools.
      * @see https://github.com/ChromeDevTools/devtools-frontend/blob/56a99365197b85c24b732ac92b0ac70feed80179/front_end/sdk/NetworkRequest.js#L485-L502

package/core/lib/network-request.js

@@ -129,7 +129,11 @@ class NetworkRequest {
      * HTTP cache or going to the network for DNS/connection setup, in milliseconds.
      */
     this.networkRequestTime = -1;
-    /** When the last byte of the response headers is received, in milliseconds. */
+    /**
+     * When the last byte of the response headers is received, in milliseconds.
+     * Equal to networkRequestTime if no data is recieved over the
+     * network (ex: cached requests or data urls).
+     */
     this.responseHeadersEndTime = -1;
     /** When the last byte of the response body is received, in milliseconds. */
     this.networkEndTime = -1;
@@ -222,8 +226,9 @@ class NetworkRequest {
     this.isSecure = UrlUtils.isSecureScheme(this.parsedURL.scheme);
 
     this.rendererStartTime = data.timestamp * 1000;
-    // Expected to be overridden with better value in `_recomputeTimesWithResourceTiming`.
+    // These are expected to be overridden with better value in `_recomputeTimesWithResourceTiming`.
     this.networkRequestTime = this.rendererStartTime;
+    this.responseHeadersEndTime = this.rendererStartTime;
 
     this.requestMethod = data.request.method;
 
@@ -350,8 +355,7 @@ class NetworkRequest {
 
     if (response.protocol) this.protocol = response.protocol;
 
-    // This is updated in _recomputeTimesWithResourceTiming, if timings are present.
-    this.responseHeadersEndTime = timestamp * 1000;
+    this.responseTimestamp = timestamp * 1000;
 
     this.transferSize = response.encodedDataLength;
     this.responseHeadersTransferSize = response.encodedDataLength;
@@ -381,7 +385,7 @@ class NetworkRequest {
   _recomputeTimesWithResourceTiming(timing) {
     // Don't recompute times if the data is invalid. RequestTime should always be a thread timestamp.
     // If we don't have receiveHeadersEnd, we really don't have more accurate data.
-    if (timing.requestTime === 0 || timing.receiveHeadersEnd === -1) return;
+    if (timing.requestTime === -1 || timing.receiveHeadersEnd === -1) return;
 
     // Take networkRequestTime and responseHeadersEndTime from timing data for better accuracy.
     // Before this, networkRequestTime and responseHeadersEndTime were set to bogus values based on
@@ -392,15 +396,15 @@ class NetworkRequest {
     // See https://raw.githubusercontent.com/GoogleChrome/lighthouse/main/docs/Network-Timings.svg
     this.networkRequestTime = timing.requestTime * 1000;
     const headersReceivedTime = this.networkRequestTime + timing.receiveHeadersEnd;
-    // This was set in `_onResponse` as that event's timestamp.
-    const responseTimestamp = this.responseHeadersEndTime;
 
     // Update this.responseHeadersEndTime. All timing values from the netstack (timing) are well-ordered, and
     // so are the timestamps from CDP (which this.responseHeadersEndTime belongs to). It shouldn't be possible
     // that this timing from the netstack is greater than the onResponse timestamp, but just to ensure proper order
     // is maintained we bound the new timing by the network request time and the response timestamp.
     this.responseHeadersEndTime = headersReceivedTime;
-    this.responseHeadersEndTime = Math.min(this.responseHeadersEndTime, responseTimestamp);
+    if (this.responseTimestamp !== undefined) {
+      this.responseHeadersEndTime = Math.min(this.responseHeadersEndTime, this.responseTimestamp);
+    }
     this.responseHeadersEndTime = Math.max(this.responseHeadersEndTime, this.networkRequestTime);
 
     // We're only at responseReceived (_onResponse) at this point.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.0.0-dev.20240604",
+  "version": "12.0.0-dev.20240606",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/shared/localization/locales/en-US.json

@@ -18,13 +18,13 @@
     "message": "`[aria-*]` attributes match their roles"
   },
   "core/audits/accessibility/aria-allowed-role.js | description": {
-    "message": "ARIA `role`s enable assistive technologies to know the role of each element on the web page. If the `role` values are misspelled, not existing ARIA `role` values, or abstract roles, then the purpose of the element will not be communicated to users of assistive technologies. [Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-role)."
+    "message": "Many HTML elements can only be assigned certain ARIA roles. Using ARIA roles where they are not allowed can interfere with the accessibility of the web page. [Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-role)."
   },
   "core/audits/accessibility/aria-allowed-role.js | failureTitle": {
-    "message": "Values assigned to `role=\"\"` are not valid ARIA roles."
+    "message": "Uses ARIA roles on incompatible elements"
   },
   "core/audits/accessibility/aria-allowed-role.js | title": {
-    "message": "Values assigned to `role=\"\"` are valid ARIA roles."
+    "message": "Uses ARIA roles only on compatible elements"
   },
   "core/audits/accessibility/aria-command-name.js | description": {
     "message": "When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn how to make command elements more accessible](https://dequeuniversity.com/rules/axe/4.9/aria-command-name)."

package/shared/localization/locales/en-XL.json

@@ -18,13 +18,13 @@
     "message": "`[aria-*]` ât́t̂ŕîb́ût́êś m̂át̂ćĥ t́ĥéîŕ r̂ól̂éŝ"
   },
   "core/audits/accessibility/aria-allowed-role.js | description": {
-    "message": "ÂŔÎÁ `role`ŝ én̂áb̂ĺê áŝśîśt̂ív̂é t̂éĉh́n̂ól̂óĝíêś t̂ó k̂ńôẃ t̂h́ê ŕôĺê óf̂ éâćĥ él̂ém̂én̂t́ ôń t̂h́ê ẃêb́ p̂áĝé. Îf́ t̂h́ê `role` v́âĺûéŝ ár̂é m̂íŝśp̂él̂ĺêd́, n̂ót̂ éx̂íŝt́îńĝ ÁR̂ÍÂ `role` v́âĺûéŝ, ór̂ áb̂śt̂ŕâćt̂ ŕôĺêś, t̂h́êń t̂h́ê ṕûŕp̂óŝé ôf́ t̂h́ê él̂ém̂én̂t́ ŵíl̂ĺ n̂ót̂ b́ê ćôḿm̂ún̂íĉát̂éd̂ t́ô úŝér̂ś ôf́ âśŝíŝt́îv́ê t́êćĥńôĺôǵîéŝ. [Ĺêár̂ń m̂ór̂é âb́ôút̂ ÁR̂ÍÂ ŕôĺêś](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-role)."
+    "message": "M̂án̂ý ĤT́M̂Ĺ êĺêḿêńt̂ś ĉán̂ ón̂ĺŷ b́ê áŝśîǵn̂éd̂ ćêŕt̂áîń ÂŔÎÁ r̂ól̂éŝ. Úŝín̂ǵ ÂŔÎÁ r̂ól̂éŝ ẃĥér̂é t̂h́êý âŕê ńôt́ âĺl̂óŵéd̂ ćâń îńt̂ér̂f́êŕê ẃît́ĥ t́ĥé âćĉéŝśîb́îĺît́ŷ óf̂ t́ĥé ŵéb̂ ṕâǵê. [Ĺêár̂ń m̂ór̂é âb́ôút̂ ÁR̂ÍÂ ŕôĺêś](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-role)."
   },
   "core/audits/accessibility/aria-allowed-role.js | failureTitle": {
-    "message": "V̂ál̂úêś âśŝíĝńêd́ t̂ó `role=\"\"` âŕê ńôt́ v̂ál̂íd̂ ÁR̂ÍÂ ŕôĺêś."
+    "message": "Ûśêś ÂŔÎÁ r̂ól̂éŝ ón̂ ín̂ćôḿp̂át̂íb̂ĺê él̂ém̂én̂t́ŝ"
   },
   "core/audits/accessibility/aria-allowed-role.js | title": {
-    "message": "V̂ál̂úêś âśŝíĝńêd́ t̂ó `role=\"\"` âŕê v́âĺîd́ ÂŔÎÁ r̂ól̂éŝ."
+    "message": "Ûśêś ÂŔÎÁ r̂ól̂éŝ ón̂ĺŷ ón̂ ćôḿp̂át̂íb̂ĺê él̂ém̂én̂t́ŝ"
   },
   "core/audits/accessibility/aria-command-name.js | description": {
     "message": "Ŵh́êń âń êĺêḿêńt̂ d́ôéŝń't̂ h́âv́ê án̂ áĉćêśŝíb̂ĺê ńâḿê, śĉŕêén̂ ŕêád̂ér̂ś âńn̂óûńĉé ît́ ŵít̂h́ â ǵêńêŕîć n̂ám̂é, m̂ák̂ín̂ǵ ît́ ûńûśâb́l̂é f̂ór̂ úŝér̂ś ŵh́ô ŕêĺŷ ón̂ śĉŕêén̂ ŕêád̂ér̂ś. [L̂éâŕn̂ h́ôẃ t̂ó m̂ák̂é ĉóm̂ḿâńd̂ él̂ém̂én̂t́ŝ ḿôŕê áĉćêśŝíb̂ĺê](https://dequeuniversity.com/rules/axe/4.9/aria-command-name)."