lighthouse 9.3.1-dev.20220210 → 9.3.1-dev.20220214

package/lighthouse-cli/test/smokehouse/core-tests.js

@@ -14,7 +14,7 @@ import dbw from './test-definitions/dobetterweb.js';
 import errorsExpiredSsl from './test-definitions/errors-expired-ssl.js';
 import errorsIframeExpiredSsl from './test-definitions/errors-iframe-expired-ssl.js';
 import errorsInfiniteLoop from './test-definitions/errors-infinite-loop.js';
-// import formsAutoComplete from './test-definitions/forms-autocomplete.js';
+import formsAutoComplete from './test-definitions/forms-autocomplete.js';
 import issuesMixedContent from './test-definitions/issues-mixed-content.js';
 import lanternFetch from './test-definitions/lantern-fetch.js';
 import lanternIdleCallbackLong from './test-definitions/lantern-idle-callback-long.js';
@@ -72,8 +72,7 @@ const smokeTests = [
   errorsExpiredSsl,
   errorsIframeExpiredSsl,
   errorsInfiniteLoop,
-  // TODO: restore when --enable-features=AutofillShowTypePredictions is not needed.
-  // formsAutoComplete,
+  formsAutoComplete,
   issuesMixedContent,
   lanternOnline,
   lanternSetTimeout,

package/lighthouse-core/audits/autocomplete.js

@@ -195,12 +195,12 @@ class AutocompleteAudit extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['FormElements'],
+      requiredArtifacts: ['Inputs'],
     };
   }
 
   /**
-   * @param {LH.Artifacts.FormInput} input
+   * @param {LH.Artifacts.InputElement} input
    * @return {{hasValidTokens: boolean, isValidOrder?: boolean}}
    */
   static checkAttributeValidity(input) {
@@ -224,47 +224,44 @@ class AutocompleteAudit extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    const forms = artifacts.FormElements;
     const failingFormsData = [];
     const warnings = [];
     let foundPrediction = false;
-    for (const form of forms) {
-      for (const input of form.inputs) {
-        const validity = this.checkAttributeValidity(input);
-        if (validity.hasValidTokens && validity.isValidOrder) continue;
-        if (!input.autocomplete.prediction) continue;
-        if (noPrediction.includes(input.autocomplete.prediction) &&
-          !input.autocomplete.attribute) continue;
+    for (const input of artifacts.Inputs.inputs) {
+      const validity = this.checkAttributeValidity(input);
+      if (validity.hasValidTokens && validity.isValidOrder) continue;
+      if (!input.autocomplete.prediction) continue;
+      if (noPrediction.includes(input.autocomplete.prediction) &&
+        !input.autocomplete.attribute) continue;
 
-        foundPrediction = true;
+      foundPrediction = true;
 
-        // @ts-ignore
-        let suggestion = predictionTypesToTokens[input.autocomplete.prediction];
-        // This is here to satisfy typescript because the possible null value of autocomplete.attribute is not compatible with Audit details.
-        if (!input.autocomplete.attribute) input.autocomplete.attribute = '';
-        // Warning is created because while there is an autocomplete attribute, the autocomplete property does not exsist, thus the attribute's value is invalid.
-        if (input.autocomplete.attribute) {
-          warnings.push(str_(UIStrings.warningInvalid, {token: input.autocomplete.attribute,
-            snippet: input.node.snippet}));
-        }
-        if (validity.isValidOrder === false) {
-          warnings.push(str_(UIStrings.warningOrder, {tokens: input.autocomplete.attribute,
-            snippet: input.node.snippet}));
-          suggestion = UIStrings.reviewOrder;
-        }
-        // If the autofill prediction is not in our autofill suggestion mapping, then we warn
-        if (!(input.autocomplete.prediction in predictionTypesToTokens) &&
-            validity.isValidOrder) {
-          log.warn(`Autocomplete prediction (${input.autocomplete.prediction})
-             not found in our mapping`);
-          continue;
-        }
-        failingFormsData.push({
-          node: Audit.makeNodeItem(input.node),
-          suggestion: suggestion,
-          current: input.autocomplete.attribute,
-        });
+      // @ts-ignore
+      let suggestion = predictionTypesToTokens[input.autocomplete.prediction];
+      // This is here to satisfy typescript because the possible null value of autocomplete.attribute is not compatible with Audit details.
+      if (!input.autocomplete.attribute) input.autocomplete.attribute = '';
+      // Warning is created because while there is an autocomplete attribute, the autocomplete property does not exsist, thus the attribute's value is invalid.
+      if (input.autocomplete.attribute) {
+        warnings.push(str_(UIStrings.warningInvalid, {token: input.autocomplete.attribute,
+          snippet: input.node.snippet}));
       }
+      if (validity.isValidOrder === false) {
+        warnings.push(str_(UIStrings.warningOrder, {tokens: input.autocomplete.attribute,
+          snippet: input.node.snippet}));
+        suggestion = UIStrings.reviewOrder;
+      }
+      // If the autofill prediction is not in our autofill suggestion mapping, then we warn
+      if (!(input.autocomplete.prediction in predictionTypesToTokens) &&
+          validity.isValidOrder) {
+        log.warn(`Autocomplete prediction (${input.autocomplete.prediction})
+            not found in our mapping`);
+        continue;
+      }
+      failingFormsData.push({
+        node: Audit.makeNodeItem(input.node),
+        suggestion: suggestion,
+        current: input.autocomplete.attribute,
+      });
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */

package/lighthouse-core/config/default-config.js

@@ -144,7 +144,7 @@ const defaultConfig = {
       'meta-elements',
       'script-elements',
       'iframe-elements',
-      'form-elements',
+      'inputs',
       'main-document-content',
       'global-listeners',
       'dobetterweb/doctype',

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -46,7 +46,7 @@ const artifacts = {
   DOMStats: '',
   EmbeddedContent: '',
   FontSize: '',
-  FormElements: '',
+  Inputs: '',
   FullPageScreenshot: '',
   GlobalListeners: '',
   IFrameElements: '',
@@ -96,7 +96,7 @@ const defaultConfig = {
     {id: artifacts.DOMStats, gatherer: 'dobetterweb/domstats'},
     {id: artifacts.EmbeddedContent, gatherer: 'seo/embedded-content'},
     {id: artifacts.FontSize, gatherer: 'seo/font-size'},
-    {id: artifacts.FormElements, gatherer: 'form-elements'},
+    {id: artifacts.Inputs, gatherer: 'inputs'},
     {id: artifacts.FullPageScreenshot, gatherer: 'full-page-screenshot'},
     {id: artifacts.GlobalListeners, gatherer: 'global-listeners'},
     {id: artifacts.IFrameElements, gatherer: 'iframe-elements'},
@@ -148,7 +148,7 @@ const defaultConfig = {
         artifacts.DOMStats,
         artifacts.EmbeddedContent,
         artifacts.FontSize,
-        artifacts.FormElements,
+        artifacts.Inputs,
         artifacts.GlobalListeners,
         artifacts.IFrameElements,
         artifacts.ImageElements,

package/lighthouse-core/gather/gatherers/inputs.js

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * 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.
+ */
+'use strict';
+
+/* global getNodeDetails */
+
+const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
+const pageFunctions = require('../../lib/page-functions.js');
+
+/* eslint-env browser, node */
+
+/**
+ * @return {LH.Artifacts['Inputs']}
+ */
+/* c8 ignore start */
+function collectElements() {
+  /** @type {LH.Artifacts.InputElement[]} */
+  const inputArtifacts = [];
+  /** @type {Map<HTMLFormElement, LH.Artifacts.FormElement>} */
+  const formElToArtifact = new Map();
+  /** @type {Map<HTMLLabelElement, LH.Artifacts.LabelElement>} */
+  const labelElToArtifact = new Map();
+
+  /** @type {HTMLFormElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const formEls = getElementsInDocument('form'); // eslint-disable-line no-undef
+  for (const formEl of formEls) {
+    formElToArtifact.set(formEl, {
+      id: formEl.id,
+      name: formEl.name,
+      autocomplete: formEl.autocomplete,
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(formEl),
+    });
+  }
+
+  /** @type {HTMLLabelElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const labelEls = getElementsInDocument('label'); // eslint-disable-line no-undef
+  for (const labelEl of labelEls) {
+    labelElToArtifact.set(labelEl, {
+      for: labelEl.htmlFor,
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(labelEl),
+    });
+  }
+
+  /** @type {HTMLInputElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const inputEls = getElementsInDocument('textarea, input, select'); // eslint-disable-line no-undef
+  for (const inputEl of inputEls) {
+    // If the input element is in a form (either because an ancestor element is <form> or the
+    // form= attribute is associated with a <form> element's id), this will be set.
+    const parentFormEl = inputEl.form;
+    const parentFormIndex = parentFormEl ?
+      [...formElToArtifact.keys()].indexOf(parentFormEl) :
+      undefined;
+    const labelIndicies = [...inputEl.labels || []].map((labelEl) => {
+      return [...labelElToArtifact.keys()].indexOf(labelEl);
+    });
+
+    inputArtifacts.push({
+      parentFormIndex,
+      labelIndicies,
+      id: inputEl.id,
+      name: inputEl.name,
+      type: inputEl.type,
+      placeholder: inputEl instanceof HTMLSelectElement ? undefined : inputEl.placeholder,
+      autocomplete: {
+        property: inputEl.autocomplete,
+        attribute: inputEl.getAttribute('autocomplete'),
+        // Requires `--enable-features=AutofillShowTypePredictions`.
+        prediction: inputEl.getAttribute('autofill-prediction'),
+      },
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(inputEl),
+    });
+  }
+
+  return {
+    inputs: inputArtifacts,
+    forms: [...formElToArtifact.values()],
+    labels: [...labelElToArtifact.values()],
+  };
+}
+/* c8 ignore stop */
+
+class Inputs extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} passContext
+   * @return {Promise<LH.Artifacts['Inputs']>}
+   */
+  async getArtifact(passContext) {
+    return passContext.driver.executionContext.evaluate(collectElements, {
+      args: [],
+      useIsolation: true,
+      deps: [
+        pageFunctions.getElementsInDocumentString,
+        pageFunctions.getNodeDetailsString,
+      ],
+    });
+  }
+}
+
+module.exports = Inputs;

package/lighthouse-core/util-commonjs.js

@@ -630,6 +630,10 @@ const UIStrings = {
   thirdPartyResourcesLabel: 'Show 3rd-party resources',
   /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */
   viewTreemapLabel: 'View Treemap',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewTraceLabel: 'View Trace',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewOriginalTraceLabel: 'View Original Trace',
 
   /** Option in a dropdown menu that opens a small, summary report in a print dialog.  */
   dropdownPrintSummary: 'Print Summary',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.3.1-dev.20220210",
+  "version": "9.3.1-dev.20220214",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/report/renderer/report-ui-features.js

@@ -112,6 +112,15 @@ export class ReportUIFeatures {
       });
     }
 
+    if (this._opts.onViewTrace) {
+      this.addButton({
+        text: lhr.configSettings.throttlingMethod === 'simulate' ?
+          Util.i18n.strings.viewOriginalTraceLabel :
+          Util.i18n.strings.viewTraceLabel,
+        onClick: () => this._opts.onViewTrace?.(),
+      });
+    }
+
     if (this._opts.getStandaloneReportHTML) {
       this._dom.find('a[data-action="save-html"]', this._dom.rootEl).classList.remove('lh-hidden');
     }

package/report/renderer/util.js

@@ -627,6 +627,10 @@ const UIStrings = {
   thirdPartyResourcesLabel: 'Show 3rd-party resources',
   /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */
   viewTreemapLabel: 'View Treemap',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewTraceLabel: 'View Trace',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewOriginalTraceLabel: 'View Original Trace',
 
   /** Option in a dropdown menu that opens a small, summary report in a print dialog.  */
   dropdownPrintSummary: 'Print Summary',

package/report/test/renderer/__snapshots__/report-renderer-axe-test.js.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReportRendererAxe with aXe renders without axe violations 2`] = `
+Array [
+  Object {
+    "description": "Ensures every id attribute value is unique",
+    "help": "id attribute value must be unique",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.3/duplicate-id?application=axeAPI",
+    "id": "duplicate-id",
+    "impact": "minor",
+    "nodes": Array [
+      Object {
+        "all": Array [],
+        "any": Array [
+          Object {
+            "data": "viewport",
+            "id": "duplicate-id",
+            "impact": "minor",
+            "message": "Document has multiple static elements with the same id attribute: viewport",
+            "relatedNodes": Array [
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"viewport\\">",
+                "target": Array [
+                  "#seo > .lh-audit-group:nth-child(4) > .lh-clump--passed.lh-clump > .lh-audit--binary.lh-audit--pass.lh-audit:nth-child(2)",
+                ],
+              },
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"viewport\\">",
+                "target": Array [
+                  ".lh-audit-group--pwa-optimized > .lh-audit--binary.lh-audit--pass.lh-audit:nth-child(6)",
+                ],
+              },
+            ],
+          },
+        ],
+        "failureSummary": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: viewport",
+        "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"viewport\\">",
+        "impact": "minor",
+        "none": Array [],
+        "target": Array [
+          ".lh-audit--binary.lh-audit--pass.lh-audit:nth-child(20)",
+        ],
+      },
+      Object {
+        "all": Array [],
+        "any": Array [
+          Object {
+            "data": "image-alt",
+            "id": "duplicate-id",
+            "impact": "minor",
+            "message": "Document has multiple static elements with the same id attribute: image-alt",
+            "relatedNodes": Array [
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--fail\\" id=\\"image-alt\\">",
+                "target": Array [
+                  ".lh-audit-group--seo-content > .lh-audit--fail.lh-audit--binary.lh-audit:nth-child(3)",
+                ],
+              },
+            ],
+          },
+        ],
+        "failureSummary": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: image-alt",
+        "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--fail\\" id=\\"image-alt\\">",
+        "impact": "minor",
+        "none": Array [],
+        "target": Array [
+          ".lh-audit-group--a11y-names-labels > .lh-audit--fail.lh-audit--binary.lh-audit:nth-child(2)",
+        ],
+      },
+      Object {
+        "all": Array [],
+        "any": Array [
+          Object {
+            "data": "document-title",
+            "id": "duplicate-id",
+            "impact": "minor",
+            "message": "Document has multiple static elements with the same id attribute: document-title",
+            "relatedNodes": Array [
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"document-title\\">",
+                "target": Array [
+                  "#seo > .lh-audit-group:nth-child(4) > .lh-clump--passed.lh-clump > .lh-audit--binary.lh-audit--pass.lh-audit:nth-child(3)",
+                ],
+              },
+            ],
+          },
+        ],
+        "failureSummary": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: document-title",
+        "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"document-title\\">",
+        "impact": "minor",
+        "none": Array [],
+        "target": Array [
+          ".lh-audit--binary.lh-audit--pass.lh-audit:nth-child(13)",
+        ],
+      },
+    ],
+    "tags": Array [
+      "cat.parsing",
+      "wcag2a",
+      "wcag411",
+    ],
+  },
+]
+`;

package/report/test/renderer/report-renderer-axe-test.js

@@ -53,23 +53,44 @@ describe('ReportRendererAxe', () => {
       // eslint-disable-next-line no-undef
       const axeResults = await page.evaluate(config => axe.run(config), config);
 
-      expect(axeResults.violations).toMatchObject([
-        // Color contrast failure only pops up if this pptr is run headfully.
-        // There are currently 27 problematic nodes, primarily audit display text and explanations.
-        // TODO: fix these failures, regardless.
-        // {
-        //   id: 'color-contrast',
-        // },
-        {
-          id: 'duplicate-id',
-          nodes: [
-            // We use these audits in multiple categories. Makes sense.
-            {html: '<div class="lh-audit lh-audit--binary lh-audit--pass" id="viewport">'},
-            {html: '<div class="lh-audit lh-audit--binary lh-audit--fail" id="image-alt">'},
-            {html: '<div class="lh-audit lh-audit--binary lh-audit--pass" id="document-title">'},
-          ],
-        },
-      ]);
+      // Color contrast failure only pops up if this pptr is run headfully.
+      // There are currently 27 problematic nodes, primarily audit display text and explanations.
+      // TODO: fix these failures, regardless.
+      // {
+      //   id: 'color-contrast',
+      // },
+
+      expect(axeResults.violations.find(v => v.id === 'duplicate-id')).toMatchObject({
+        id: 'duplicate-id',
+        nodes: [
+          // We use these audits in multiple categories. Makes sense.
+          {html: '<div class="lh-audit lh-audit--binary lh-audit--pass" id="viewport">'},
+          {html: '<div class="lh-audit lh-audit--binary lh-audit--fail" id="image-alt">'},
+          {html: '<div class="lh-audit lh-audit--binary lh-audit--pass" id="document-title">'},
+        ],
+      });
+
+      const axeSummary = axeResults.violations.map((v) => {
+        return {
+          id: v.id,
+          message: v.nodes.map((n) => n.failureSummary).join('\n'),
+        };
+      });
+      expect(axeSummary).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "id": "duplicate-id",
+    "message": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: viewport
+Fix any of the following:
+  Document has multiple static elements with the same id attribute: image-alt
+Fix any of the following:
+  Document has multiple static elements with the same id attribute: document-title",
+  },
+]
+`);
+
+      expect(axeResults.violations).toMatchSnapshot();
     },
     // This test takes 10s on fast hardware, but can take longer in CI.
     // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues

package/report/types/report-renderer.d.ts

@@ -5,6 +5,7 @@
  */
 
 import { Result as AuditResult } from "../../types/lhr/audit-result";
+import { ReportUIFeatures } from "../renderer/report-ui-features.js";
 
 declare module Renderer {
   function renderReport(lhr: AuditResult, options?: Options): HTMLElement;
@@ -26,6 +27,12 @@ declare module Renderer {
     onPageAnchorRendered?: (link: HTMLAnchorElement) => void;
     /** If defined, `Save as HTML` option is shown in dropdown menu. */
     getStandaloneReportHTML?: () => string;
+    /**
+     * If defined, adds a `View Trace` button to the report, and calls this callback when clicked.
+     * The callback should do something to present the user with a visualization of the trace
+     * data, which can be gotten from the artifacts.
+     */
+    onViewTrace?: () => void;
   }
 }
 

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

@@ -2543,6 +2543,12 @@
   "report/renderer/util.js | varianceDisclaimer": {
     "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics."
   },
+  "report/renderer/util.js | viewOriginalTraceLabel": {
+    "message": "View Original Trace"
+  },
+  "report/renderer/util.js | viewTraceLabel": {
+    "message": "View Trace"
+  },
   "report/renderer/util.js | viewTreemapLabel": {
     "message": "View Treemap"
   },

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

@@ -2543,6 +2543,12 @@
   "report/renderer/util.js | varianceDisclaimer": {
     "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ."
   },
+  "report/renderer/util.js | viewOriginalTraceLabel": {
+    "message": "V̂íêẃ Ôŕîǵîńâĺ T̂ŕâćê"
+  },
+  "report/renderer/util.js | viewTraceLabel": {
+    "message": "V̂íêẃ T̂ŕâćê"
+  },
   "report/renderer/util.js | viewTreemapLabel": {
     "message": "V̂íêẃ T̂ŕêém̂áp̂"
   },

package/types/artifacts.d.ts

@@ -139,8 +139,8 @@ export interface GathererArtifacts extends PublicGathererArtifacts,LegacyBaseArt
   Fonts: Artifacts.Font[];
   /** Information on poorly sized font usage and the text affected by it. */
   FontSize: Artifacts.FontSize;
-  /** All the form elements in the page and formless inputs. */
-  FormElements: Artifacts.Form[];
+  /** All the input elements, including associated form and label elements. */
+  Inputs: {inputs: Artifacts.InputElement[]; forms: Artifacts.FormElement[]; labels: Artifacts.LabelElement[]};
   /** Screenshot of the entire page (rather than just the above the fold content). */
   FullPageScreenshot: Artifacts.FullPageScreenshot | null;
   /** Information about event listeners registered on the global object. */
@@ -787,22 +787,22 @@ declare module Artifacts {
     observedSpeedIndexTs: number;
   }
 
-  interface Form {
-    /** If attributes is missing that means this is a formless set of elements. */
-    attributes?: {
-      id: string;
-      name: string;
-      autocomplete: string;
-    };
-    node: NodeDetails | null;
-    inputs: Array<FormInput>;
-    labels: Array<FormLabel>;
+  interface FormElement {
+    id: string;
+    name: string;
+    autocomplete: string;
+    node: NodeDetails;
   }
 
   /** Attributes collected for every input element in the inputs array from the forms interface. */
-  interface FormInput {
+  interface InputElement {
+    /** If set, the parent form is the index into the associated FormElement array. Otherwise, the input element has no parent form. */
+    parentFormIndex?: number;
+    /** Array of indices into associated LabelElement array. */
+    labelIndicies: number[];
     id: string;
     name: string;
+    type: string;
     placeholder?: string;
     autocomplete: {
       property: string;
@@ -813,7 +813,7 @@ declare module Artifacts {
   }
 
   /** Attributes collected for every label element in the labels array from the forms interface */
-  interface FormLabel {
+  interface LabelElement {
     for: string;
     node: NodeDetails;
   }