lighthouse 11.0.0-dev.20230905 → 11.0.0-dev.20230906

package/core/audits/accessibility/skip-link.js

@@ -19,7 +19,7 @@ const UIStrings = {
   failureTitle: 'Skip links are not focusable.',
   /** 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: 'Including a skip link can help users skip to the main content to save time. ' +
-      '[Learn more about skip links](https://dequeuniversity.com/rules/axe/4.7/skip-link).',
+      '[Learn more about skip links](https://dequeuniversity.com/rules/axe/4.8/skip-link).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/tabindex.js

@@ -20,7 +20,7 @@ const UIStrings = {
   /** 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: 'A value greater than 0 implies an explicit navigation ordering. ' +
       'Although technically valid, this often creates frustrating experiences ' +
-      'for users who rely on assistive technologies. [Learn more about the `tabindex` attribute](https://dequeuniversity.com/rules/axe/4.7/tabindex).',
+      'for users who rely on assistive technologies. [Learn more about the `tabindex` attribute](https://dequeuniversity.com/rules/axe/4.8/tabindex).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/table-duplicate-name.js

@@ -20,7 +20,7 @@ const UIStrings = {
   /** 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: 'The summary attribute should describe the table structure, while `<caption>` ' +
       'should have the onscreen title. Accurate table mark-up helps users of screen readers. ' +
-      '[Learn more about summary and caption](https://dequeuniversity.com/rules/axe/4.7/table-duplicate-name).',
+      '[Learn more about summary and caption](https://dequeuniversity.com/rules/axe/4.8/table-duplicate-name).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/table-fake-caption.js

@@ -23,7 +23,7 @@ const UIStrings = {
   description: 'Screen readers have features to make navigating tables easier. Ensuring ' +
       'that tables use the actual caption element instead of cells with the `[colspan]` ' +
       'attribute may improve the experience for screen reader users. ' +
-      '[Learn more about captions](https://dequeuniversity.com/rules/axe/4.7/table-fake-caption).',
+      '[Learn more about captions](https://dequeuniversity.com/rules/axe/4.8/table-fake-caption).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/target-size.js

@@ -20,7 +20,7 @@ const UIStrings = {
   /** 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: 'Touch targets with sufficient size and spacing help users who may have ' +
       'difficulty targeting small controls to activate the targets. ' +
-      '[Learn more about touch targets](https://dequeuniversity.com/rules/axe/4.7/target-size).',
+      '[Learn more about touch targets](https://dequeuniversity.com/rules/axe/4.8/target-size).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/td-has-header.js

@@ -21,7 +21,7 @@ const UIStrings = {
   description: 'Screen readers have features to make navigating tables easier. Ensuring ' +
       'that `<td>` elements in a large table (3 or more cells in width and height) have an ' +
       'associated table header may improve the experience for screen reader users. ' +
-      '[Learn more about table headers](https://dequeuniversity.com/rules/axe/4.7/td-has-header).',
+      '[Learn more about table headers](https://dequeuniversity.com/rules/axe/4.8/td-has-header).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/td-headers-attr.js

@@ -24,7 +24,7 @@ const UIStrings = {
   description: 'Screen readers have features to make navigating tables easier. Ensuring ' +
       '`<td>` cells using the `[headers]` attribute only refer to other cells in the same ' +
       'table may improve the experience for screen reader users. ' +
-      '[Learn more about the `headers` attribute](https://dequeuniversity.com/rules/axe/4.7/td-headers-attr).',
+      '[Learn more about the `headers` attribute](https://dequeuniversity.com/rules/axe/4.8/td-headers-attr).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/th-has-data-cells.js

@@ -23,7 +23,7 @@ const UIStrings = {
   description: 'Screen readers have features to make navigating tables easier. Ensuring ' +
       'table headers always refer to some set of cells may improve the experience for screen ' +
       'reader users. ' +
-      '[Learn more about table headers](https://dequeuniversity.com/rules/axe/4.7/th-has-data-cells).',
+      '[Learn more about table headers](https://dequeuniversity.com/rules/axe/4.8/th-has-data-cells).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/valid-lang.js

@@ -20,7 +20,7 @@ const UIStrings = {
   /** 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: 'Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) ' +
       'on elements helps ensure that text is pronounced correctly by a screen reader. ' +
-      '[Learn how to use the `lang` attribute](https://dequeuniversity.com/rules/axe/4.7/valid-lang).',
+      '[Learn how to use the `lang` attribute](https://dequeuniversity.com/rules/axe/4.8/valid-lang).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/accessibility/video-caption.js

@@ -21,7 +21,7 @@ const UIStrings = {
   /** 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: 'When a video provides a caption it is easier for deaf and hearing impaired ' +
       'users to access its information. ' +
-      '[Learn more about video captions](https://dequeuniversity.com/rules/axe/4.7/video-caption).',
+      '[Learn more about video captions](https://dequeuniversity.com/rules/axe/4.8/video-caption).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

package/core/audits/bootup-time.d.ts

@@ -6,6 +6,12 @@ declare class BootupTime extends Audit {
     static get defaultOptions(): import("../../types/audit.js").default.ScoreOptions & {
         thresholdInMs: number;
     };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<number>}
+     */
+    static getTbtImpact(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<number>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context

package/core/audits/bootup-time.js

@@ -4,12 +4,16 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
+import log from 'lighthouse-logger';
+
 import {Audit} from './audit.js';
 import {taskGroups} from '../lib/tracehouse/task-groups.js';
 import * as i18n from '../lib/i18n/i18n.js';
 import {NetworkRecords} from '../computed/network-records.js';
 import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {getExecutionTimingsByURL} from '../lib/tracehouse/task-summary.js';
+import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
+import {Sentry} from '../lib/sentry.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -45,7 +49,7 @@ class BootupTime extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
       guidanceLevel: 1,
-      requiredArtifacts: ['traces', 'devtoolsLogs'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
@@ -62,6 +66,33 @@ class BootupTime extends Audit {
     };
   }
 
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<number>}
+   */
+  static async getTbtImpact(artifacts, context) {
+    let tbtImpact = 0;
+
+    try {
+      const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+      const tasks = await TBTImpactTasks.request(metricComputationData, context);
+      for (const task of tasks) {
+        const groupId = task.group.id;
+        if (groupId !== 'scriptEvaluation' && groupId !== 'scriptParseCompile') continue;
+        tbtImpact += task.selfTbtImpact;
+      }
+    } catch (err) {
+      Sentry.captureException(err, {
+        tags: {audit: this.meta.id},
+        level: 'error',
+      });
+      log.error(this.meta.id, err.message);
+    }
+
+    return tbtImpact;
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
@@ -77,6 +108,7 @@ class BootupTime extends Audit {
       settings.throttling.cpuSlowdownMultiplier : 1;
 
     const executionTimings = getExecutionTimingsByURL(tasks, networkRecords);
+    const tbtImpact = await this.getTbtImpact(artifacts, context);
 
     let hadExcessiveChromeExtension = false;
     let totalBootupTime = 0;
@@ -143,6 +175,9 @@ class BootupTime extends Audit {
         str_(i18n.UIStrings.seconds, {timeInMs: totalBootupTime}) : '',
       details,
       runWarnings,
+      metricSavings: {
+        TBT: tbtImpact,
+      },
     };
   }
 }

package/core/audits/image-aspect-ratio.js

@@ -59,7 +59,16 @@ class ImageAspectRatio extends Audit {
     const displayedAspectRatio = image.displayedWidth / image.displayedHeight;
 
     const targetDisplayHeight = image.displayedWidth / actualAspectRatio;
-    const doRatiosMatch = Math.abs(targetDisplayHeight - image.displayedHeight) < THRESHOLD_PX;
+    const targetDisplayWidth = image.displayedHeight * actualAspectRatio;
+
+    // Small rounding errors in aspect ratio can lead to large differences in target width/height
+    // if the aspect ratio is close to 0.
+    //
+    // In these cases, we should compare the smaller dimension because any rounding errors will
+    // affect that dimension less.
+    const doRatiosMatch = targetDisplayHeight < targetDisplayWidth
+      ? Math.abs(targetDisplayHeight - image.displayedHeight) < THRESHOLD_PX
+      : Math.abs(targetDisplayWidth - image.displayedWidth) < THRESHOLD_PX;
 
     return {
       url,

package/core/computed/main-resource.d.ts

@@ -9,7 +9,7 @@ declare const MainResourceComputed: typeof MainResource & {
 };
 /**
  * @fileoverview This artifact identifies the main resource on the page. Current solution assumes
- * that the main resource is the first non-rediected one.
+ * that the main resource is the first non-redirected one.
  */
 declare class MainResource {
     /**

package/core/computed/main-resource.js

@@ -5,12 +5,12 @@
  */
 
 import {makeComputedArtifact} from './computed-artifact.js';
-import {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
 import {NetworkRecords} from './network-records.js';
+import {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
 
 /**
  * @fileoverview This artifact identifies the main resource on the page. Current solution assumes
- * that the main resource is the first non-rediected one.
+ * that the main resource is the first non-redirected one.
  */
 class MainResource {
   /**
@@ -21,8 +21,14 @@ class MainResource {
   static async compute_(data, context) {
     const {mainDocumentUrl} = data.URL;
     if (!mainDocumentUrl) throw new Error('mainDocumentUrl must exist to get the main resource');
-    const requests = await NetworkRecords.request(data.devtoolsLog, context);
-    const mainResource = NetworkAnalyzer.findResourceForUrl(requests, mainDocumentUrl);
+    const records = await NetworkRecords.request(data.devtoolsLog, context);
+
+    // We could have more than one record matching the main doucment url,
+    // if the page did `location.reload()`. Since `mainDocumentUrl` refers to the _last_
+    // document request, we should return the last candidate here. Besides, the browser
+    // would have evicted the first request by the time `MainDocumentRequest` (a consumer
+    // of this computed artifact) attempts to fetch the contents, resulting in a protocol error.
+    const mainResource = NetworkAnalyzer.findLastDocumentForUrl(records, mainDocumentUrl);
     if (!mainResource) {
       throw new Error('Unable to identify the main resource');
     }

package/core/computed/page-dependency-graph.js

@@ -412,7 +412,8 @@ class PageDependencyGraph {
     const rootNode = networkNodeOutput.idToNodeMap.get(rootRequest.requestId);
     if (!rootNode) throw new Error('rootNode not found');
 
-    const mainDocumentRequest = NetworkAnalyzer.findResourceForUrl(networkRecords, mainDocumentUrl);
+    const mainDocumentRequest =
+      NetworkAnalyzer.findLastDocumentForUrl(networkRecords, mainDocumentUrl);
     if (!mainDocumentRequest) throw new Error('mainDocumentRequest not found');
     const mainDocumentNode = networkNodeOutput.idToNodeMap.get(mainDocumentRequest.requestId);
     if (!mainDocumentNode) throw new Error('mainDocumentNode not found');

package/core/gather/gatherers/accessibility.js

@@ -42,12 +42,17 @@ async function runA11yChecks() {
       'accesskeys': {enabled: true},
       'area-alt': {enabled: false},
       'aria-allowed-role': {enabled: true},
+      'aria-braille-equivalent': {enabled: false},
+      'aria-conditional-attr': {enabled: false},
+      'aria-deprecated-role': {enabled: false},
       'aria-dialog-name': {enabled: true},
+      'aria-prohibited-attr': {enabled: false},
       'aria-roledescription': {enabled: false},
       'aria-treeitem-name': {enabled: true},
       'aria-text': {enabled: true},
       'audio-caption': {enabled: false},
       'blink': {enabled: false},
+      'duplicate-id-active': {enabled: true},
       'duplicate-id': {enabled: false},
       'empty-heading': {enabled: true},
       'frame-focusable-content': {enabled: false},

package/core/lib/dependency-graph/simulator/network-analyzer.d.ts

@@ -174,9 +174,15 @@ export class NetworkAnalyzer {
      * @return {LH.Artifacts.NetworkRequest|undefined}
      */
     static findResourceForUrl(records: Array<LH.Artifacts.NetworkRequest>, resourceUrl: string): LH.Artifacts.NetworkRequest | undefined;
+    /**
+     * @param {Array<LH.Artifacts.NetworkRequest>} records
+     * @param {string} resourceUrl
+     * @return {LH.Artifacts.NetworkRequest|undefined}
+     */
+    static findLastDocumentForUrl(records: Array<LH.Artifacts.NetworkRequest>, resourceUrl: string): LH.Artifacts.NetworkRequest | undefined;
     /**
      * Resolves redirect chain given a main document.
-     * See: {@link NetworkAnalyzer.findResourceForUrl}) for how to retrieve main document.
+     * See: {@link NetworkAnalyzer.findLastDocumentForUrl}) for how to retrieve main document.
      *
      * @param {LH.Artifacts.NetworkRequest} request
      * @return {LH.Artifacts.NetworkRequest}

package/core/lib/dependency-graph/simulator/network-analyzer.js

@@ -506,9 +506,25 @@ class NetworkAnalyzer {
     );
   }
 
+  /**
+   * @param {Array<LH.Artifacts.NetworkRequest>} records
+   * @param {string} resourceUrl
+   * @return {LH.Artifacts.NetworkRequest|undefined}
+   */
+  static findLastDocumentForUrl(records, resourceUrl) {
+    // equalWithExcludedFragments is expensive, so check that the resourceUrl starts with the request url first
+    const matchingRequests = records.filter(request =>
+      request.resourceType === 'Document' &&
+      // Note: `request.url` should never have a fragment, else this optimization gives wrong results.
+      resourceUrl.startsWith(request.url) &&
+      UrlUtils.equalWithExcludedFragments(request.url, resourceUrl)
+    );
+    return matchingRequests[matchingRequests.length - 1];
+  }
+
   /**
    * Resolves redirect chain given a main document.
-   * See: {@link NetworkAnalyzer.findResourceForUrl}) for how to retrieve main document.
+   * See: {@link NetworkAnalyzer.findLastDocumentForUrl}) for how to retrieve main document.
    *
    * @param {LH.Artifacts.NetworkRequest} request
    * @return {LH.Artifacts.NetworkRequest}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "11.0.0-dev.20230905",
+  "version": "11.0.0-dev.20230906",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -166,7 +166,7 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^21.0.3",
+    "puppeteer": "^21.1.1",
     "resolve": "^1.22.1",
     "rollup": "^2.52.7",
     "rollup-plugin-polyfill-node": "^0.12.0",
@@ -181,7 +181,7 @@
   },
   "dependencies": {
     "@sentry/node": "^6.17.4",
-    "axe-core": "4.7.2",
+    "axe-core": "^4.8.0",
     "chrome-launcher": "^1.0.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
@@ -199,11 +199,11 @@
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "puppeteer-core": "^21.0.3",
+    "puppeteer-core": "^21.1.1",
     "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.23.3",
+    "third-party-web": "^0.24.0",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"