[Autofill in Devtools] Create some of autofill issues frontend error messages.

go/devtools-autofill-issue-strings

Bug: 1399414
Change-Id: I038ecd5e13d7fb9afc31625bcd92dbd20c5bed26
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4190006
Auto-Submit: Bruno Braga <brunobraga@google.com>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>

config/gni/devtools_grd_files.gni

@@ -339,6 +339,9 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/federatedAuthRequestManifestNoResponse.md",
   "front_end/models/issues_manager/descriptions/federatedAuthRequestTooManyRequests.md",
   "front_end/models/issues_manager/descriptions/genericCrossOriginPortalPostMessageError.md",
+  "front_end/models/issues_manager/descriptions/genericFormAutocompleteAttributeEmptyError.md",
+  "front_end/models/issues_manager/descriptions/genericFormDuplicateIdForInputError.md",
+  "front_end/models/issues_manager/descriptions/genericFormInputWithNoLabelError.md",
   "front_end/models/issues_manager/descriptions/genericFormLabelForNameError.md",
   "front_end/models/issues_manager/descriptions/heavyAd.md",
   "front_end/models/issues_manager/descriptions/mixedContent.md",

front_end/models/issues_manager/BUILD.gn

@@ -96,6 +96,9 @@ devtools_issue_description_files = [
   "deprecationNavigatorUserAgent.md",
   "genericCrossOriginPortalPostMessageError.md",
   "genericFormLabelForNameError.md",
+  "genericFormDuplicateIdForInputError.md",
+  "genericFormInputWithNoLabelError.md",
+  "genericFormAutocompleteAttributeEmptyError.md",
   "federatedAuthRequestApprovalDeclined.md",
   "federatedAuthRequestTooManyRequests.md",
   "federatedAuthRequestManifestHttpNotFound.md",

front_end/models/issues_manager/GenericIssue.ts

@@ -19,7 +19,13 @@ const UIStrings = {
    *@description Title for cross-origin portal post message error
    */
   crossOriginPortalPostMessage: 'Portals - Same-origin communication channels',
+
+  /**
+   *@description title for autofill documentation page
+   */
+  howDoesAutofillWorkPageTitle: 'How does autofill work?',
 };
+
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/GenericIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
@@ -90,12 +96,39 @@ export const genericFormLabelForNameError = {
   }],
 };
 
+export const genericFormInputWithNoLabelError = {
+  file: 'genericFormInputWithNoLabelError.md',
+  links: [],
+};
+
+export const genericFormAutocompleteAttributeEmptyError = {
+  file: 'genericFormAutocompleteAttributeEmptyError.md',
+  links: [],
+};
+
+export const genericFormDuplicateIdForInputError = {
+  file: 'genericFormDuplicateIdForInputError.md',
+  links: [{
+    link: 'https://web.dev/learn/forms/autofill/#how-does-autofill-work',
+    linkTitle: i18nLazyString(UIStrings.howDoesAutofillWorkPageTitle),
+  }],
+};
+
 const issueDescriptions: Map<Protocol.Audits.GenericIssueErrorType, LazyMarkdownIssueDescription> = new Map([
   [Protocol.Audits.GenericIssueErrorType.CrossOriginPortalPostMessageError, genericCrossOriginPortalPostMessageError],
   [Protocol.Audits.GenericIssueErrorType.FormLabelForNameError, genericFormLabelForNameError],
+  [Protocol.Audits.GenericIssueErrorType.FormInputWithNoLabelError, genericFormInputWithNoLabelError],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormAutocompleteAttributeEmptyError,
+    genericFormAutocompleteAttributeEmptyError,
+  ],
+  [Protocol.Audits.GenericIssueErrorType.FormDuplicateIdForInputError, genericFormDuplicateIdForInputError],
 ]);
 
 const issueTypes: Map<Protocol.Audits.GenericIssueErrorType, IssueKind> = new Map([
   [Protocol.Audits.GenericIssueErrorType.CrossOriginPortalPostMessageError, IssueKind.Improvement],
   [Protocol.Audits.GenericIssueErrorType.FormLabelForNameError, IssueKind.PageError],
+  [Protocol.Audits.GenericIssueErrorType.FormInputWithNoLabelError, IssueKind.Improvement],
+  [Protocol.Audits.GenericIssueErrorType.FormAutocompleteAttributeEmptyError, IssueKind.PageError],
+  [Protocol.Audits.GenericIssueErrorType.FormDuplicateIdForInputError, IssueKind.PageError],
 ]);

front_end/models/issues_manager/descriptions/genericFormAutocompleteAttributeEmptyError.md

@@ -0,0 +1,5 @@
+# Incorrect use of 'autocomplete' attribute
+
+A form field's `autocomplete` attribute is empty. This might prevent the browser from correctly autofilling the form.
+
+To fix this issue, provide a valid `autocomplete` value.

front_end/models/issues_manager/descriptions/genericFormDuplicateIdForInputError.md

@@ -0,0 +1,5 @@
+# Duplicate input 'id' in the same form
+
+Multiple input fields in the same form have the same `id` attribute value. This might prevent the browser from correctly autofilling the form.
+
+To fix this issue, use unique `id` attribute values for each form field.

front_end/models/issues_manager/descriptions/genericFormInputWithNoLabelError.md

@@ -0,0 +1,5 @@
+# Form field without valid 'aria-labelledby' attribute or associated label
+
+A form field has neither a valid `aria-labelledby` attribute nor an associated label. This might prevent the browser from autofilling the form.
+
+To improve this, provide a label describing the purpose of the form field.