From 1005ce14d56310a59e1d0bfbb4c2a0e8089581dd Mon Sep 17 00:00:00 2001 From: Bruno Braga Date: Tue, 31 Jan 2023 16:09:57 +0000 Subject: [PATCH] [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 Commit-Queue: Wolfgang Beyer Reviewed-by: Wolfgang Beyer --- config/gni/devtools_grd_files.gni | 3 ++ front_end/models/issues_manager/BUILD.gn | 3 ++ .../models/issues_manager/GenericIssue.ts | 33 +++++++++++++++++++ ...ericFormAutocompleteAttributeEmptyError.md | 5 +++ .../genericFormDuplicateIdForInputError.md | 5 +++ .../genericFormInputWithNoLabelError.md | 5 +++ 6 files changed, 54 insertions(+) create mode 100644 front_end/models/issues_manager/descriptions/genericFormAutocompleteAttributeEmptyError.md create mode 100644 front_end/models/issues_manager/descriptions/genericFormDuplicateIdForInputError.md create mode 100644 front_end/models/issues_manager/descriptions/genericFormInputWithNoLabelError.md diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 28f57a4a0c..d6010b3e2f 100644 --- a/config/gni/devtools_grd_files.gni +++ b/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", diff --git a/front_end/models/issues_manager/BUILD.gn b/front_end/models/issues_manager/BUILD.gn index e3cf60b97d..e2116c8bcd 100644 --- a/front_end/models/issues_manager/BUILD.gn +++ b/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", diff --git a/front_end/models/issues_manager/GenericIssue.ts b/front_end/models/issues_manager/GenericIssue.ts index e559b86303..4201c031d8 100644 --- a/front_end/models/issues_manager/GenericIssue.ts +++ b/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 = 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 = 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], ]); diff --git a/front_end/models/issues_manager/descriptions/genericFormAutocompleteAttributeEmptyError.md b/front_end/models/issues_manager/descriptions/genericFormAutocompleteAttributeEmptyError.md new file mode 100644 index 0000000000..7943bccfd8 --- /dev/null +++ b/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. diff --git a/front_end/models/issues_manager/descriptions/genericFormDuplicateIdForInputError.md b/front_end/models/issues_manager/descriptions/genericFormDuplicateIdForInputError.md new file mode 100644 index 0000000000..d8d1c52234 --- /dev/null +++ b/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. diff --git a/front_end/models/issues_manager/descriptions/genericFormInputWithNoLabelError.md b/front_end/models/issues_manager/descriptions/genericFormInputWithNoLabelError.md new file mode 100644 index 0000000000..6ccd4d9496 --- /dev/null +++ b/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.