1852340 - Implement a new "report broken site" feature for desktop Firefox

Status: RESOLVED FIXED

(Firefox :: General, enhancement, P3)

Description

[Thomas Wisniewski [:twisniewski]]

As per https://mozilla-hub.atlassian.net/browse/FIDE-1426, we would like to replace our "Report Site Issue" interface with one which we can enable on the release channel as well. This bug will track the initial implementation of a replacement "Report Broken Site" feature.

Comment 1

[kkim]

Description:
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).

We are replacing our "Report Site Issue" interface to a simplified reporting tool directly in Firefox Release. If a user encounters a broken site, they will be able to access this reporting tool via three entry points: the Help menu, the hamburger menu, and the ETP Shield Icon menu. Once the reporting tool is triggered, the user will see 3 elements:

1. A populated (yet editable) URL text field
2. A dropdown menu of pre-set webcompat categories detailing what's broken, such as "Site slow or not working" or "Images or videos"
3. An optional comment text field where the user can describe the problem in further detail

Once the user submits the report, the reporting tool UI will close and trigger a pop-up confirming that the report was sent.

How do we test this? If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

Tom can share the latest Treeherder build. One thing to note: testers will need to flip a pref in about:config to enable the dropdown menu in the reporting UI. When you get to about:config, search for "ui.new-webcompat-reporter.reason-dropdown" and switch the pref from 0 to either 1 or 2.

Pref options:
0: Disable dropdown
1: Enable optional
2: Enable non-optional

When will this ship? Firefox 121-122

Tracking bug/issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1852340

Design documents (e.g. Product Requirements Document, UI spec):

Figma
https://www.figma.com/file/tRpI5FnvDmWMSUXJNutqkI/Webcompat-Reporting-Tool?type=design&node-id=15-3479&mode=design&t=WYoBMXfJUxWm6VXI-0

ENG Spec
https://docs.google.com/document/d/1YvGfNBdJ7uCwnAaa5zikQpLhAgtn60MVP78VYUj_q-g/edit#heading=h.ms9n7142uusj

Engineering lead: Tom Wisniewski
Product manager: Karen Kim

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines

Please describe the accessibility guidelines you considered and what steps you've taken to address them:

During the Design process, we have engaged with the a11y team for an official design review of our Figma. Prior to the handoff to Engineering, our UX Designer incorporated any a11y feedback into the latest wireframes. We should be in compliance with text and color contrast.

Describe any areas of concern to which you want the accessibility team to give special attention:

1. Could you please give special attention to any code issues with screenreader capability? We want to ensure that the reporting tool (with and without the dropdown menu) is readable across OS--i.e., VoiceOver, NVDA, and Orca.

2. We expect that the Webcompat Reporting Tool will operate similarly to the current ETP "Site not working?" > "Send a report" user flow. With this in mind, we would like to confirm with a11y that issues such as form controls and focus are working properly, especially for keyboard-only users.

Comment 2

[Thomas Wisniewski [:twisniewski]]

Please see comment #1 for the actual review request.

Comment 3

[kkim]

For the a11y review, please refer to my description comment submitted right before Tom's.

Comment 4

[Thomas Wisniewski [:twisniewski]]

Builds of the current patch-set are in progress here: https://treeherder.mozilla.org/jobs?repo=try&revision=9c07ae6d8260511ca78ab97b8681945bbeee81c3

Comment 5

[Anna Yeddi [:ayeddi]]

Hi team,
Thank you for submitting the request and for the helpful instructions and builds!

With most of our reviewers being out (sick, PTO), we are likely to do testing mid-ish next week, but we'll try to do it sooner if possible.

Comment 6

[kkim]

Thank you, Anna! Hope everyone feels better soon :(

Comment 7

[Anna Yeddi [:ayeddi]]

Thank you for the good wishes, Kim!

Issues found:

1. Bug 1856009 - Focus management on dialog open: focus needs to be placed on the Back button when the report doorhanger is first opened.
2. Bug 1856026: Notifications: When a success message is shown, focus is placed on the Okay button (as expected), but the message itself is not being announced.
3. Error handling: there is no error shown if the URL field is left open (and if dropdown is present with ui.new-webcompat-reporter.reason-dropdown=1 optional), a user could successfully submit an empty report. The field is not marked as optional thus perceived as required but this is not communicated programmatically and not reinforced.
   • Guides for validating input and inline error indication can be found on linked WAI ARIA pages.
   • We could reuse the pattern for the non-optional dropdown (ui.new-webcompat-reporter.reason-dropdown=2) and disable the Send button if the URL field is empty and, if we check for it too, if the URL is in non-URL format
4. Language recommendation: the label for the URL to be reported is just URL, this is something that I did not notice during the design review, but the hands-on use prompted a thought that we could clarify what exactly is the URL that we are looking to get from a user, i.e. URL of the broken site - this would help users with cognitive and learning difficulties to easier recall the purpose of the form and ensure, if they choose to edit/clear/correct the input, they'll be reminded the purpose of this field too
5. Alt text recommendation: since there is no other (clear) indication of the report successfully being submitted, provide text alternative to the green checkbox, i.e. Success:, so it'll be communicated to screen reader users (i.e. the announcement of the heading would be: Success: Your report has been sent
6. HCM: the dialog does not provide HCM colors support, we keep advocating for the wider chrome support of HCM, this is to be tracked in meta bug 1832382 and the HCM component library with examples for different Windows HCM themes is provided here (NDA'd link)

Also, I was wondering why when navigated with the Tab, the input fields like URL and Comment did not announce their labels, but in the markup the code looks good and while we're resolving the bug 1800787 this is as far as I can investigate it. We could apply the WIP patch for the a11y inspector to dig deeper

Comment 8

[Anna Yeddi [:ayeddi]]

(In reply to Anna Yeddi [:ayeddi] from comment #7)

Also, I was wondering why when navigated with the Tab, the input fields like URL and Comment did not announce their labels, but in the markup the code looks good and while we're resolving the bug 1800787 this is as far as I can investigate it. We could apply the WIP patch for the a11y inspector to dig deeper

Confirmed to be a bug 1856042 - Input fields on a new Report Broken Site are not associated with their labels programmatically

Comment 9

[kkim]

Thank you for the review, Anna! Tom and I will discuss our game plan on implementing fixes.

Comment 10

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1852340 - part 1: Add a new Gecko component for reporting broken websites; r?ayeddi

Comment 11

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1852340 - part 2: Simplify the fallback Report Site Issue feature to not have redundant actors and experimental APIs; r?ksenia

Depends on D190647

Comment 12

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1852340 - part 3: Hook up Glean telemetry events and custom ping for user-submitted reports; r?dexter

Depends on D190648

Comment 13

[kkim]

Just for clarification: https://bugzilla.mozilla.org/show_bug.cgi?id=1855128 was filed as a separate bug for data review purposes at the time. By the counsel of data stewards, we will now file the data-review within this bug, which is being used for proper implementation.

Comment 14

[kkim]

Attachment: Webcompat Reporting Tool Data Collection Request - Probes for Fx121_122.pdf

PDF version of data collection request document

Comment 15

[kkim]

Attachment: Webcompat Reporting Tool Data Collection Request - Probes for Fx121_122.txt

.txt file version of the data collection request form for a standard data review.

We have officially gotten approval for the sensitive Category 3 probes with the Data Review committee.

Comment 16

[Nneka]

On behalf of the data review committee, confirming the approval of this. Thank you!

Comment 17

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Comment on attachment 9361504 [details]
Webcompat Reporting Tool Data Collection Request - Probes for Fx121_122.txt

Clearing the data-review? since this was addressed in a sensitive data review, as documented by Nneka in comment 16

Comment 18

[Dave Townsend [:mossop]]

Attachment: Bug 1852340: Strings for new broken website reporting component.

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cfe1120d1bbb
Strings for new broken website reporting component.

Comment 20

[Norisz Fay [:noriszfay]]

Backed out for causing bc failures on browser_all_files_referenced.js

Backout link

Push with failures

Failure log

Comment 21

[Thomas Wisniewski [:twisniewski]]

Well that's annoying. I guess we'll just have to land the strings with the rest of the patch (presumably within the next 24-48 hours or so).

Comment 22

[Dave Townsend [:mossop]]

(In reply to Thomas Wisniewski [:twisniewski] from comment #21)

Well that's annoying. I guess we'll just have to land the strings with the rest of the patch (presumably within the next 24-48 hours or so).

Ugh, sorry I didn't see this because phabricator emails are broken right now. Looks like strings can land up till the end of today (Friday) so you should be good to land this along with the rest of the patch.

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/59a1d385ed2a
part 1: Add a new Gecko component for reporting broken websites; r=ayeddi,fluent-reviewers,mossop,flod,Gijs

Comment 24

[Natalia Csoregi [:nataliaCs]]

Backed out for causing multiple failures e.g. browser_startup_images.js

• backout: https://hg.mozilla.org/integration/autoland/rev/45c9c8724cca1f521814786bfbad9de79191b7d3
• push: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&revision=59a1d385ed2ab3f817eef75000ea1c50b71453d1
• failure logs:
  • TEST-UNEXPECTED-FAIL | browser/base/content/test/performance/browser_startup_images.js | Loaded image chrome://global/skin/icons/resizer.svg should have been shown. -
  • TEST-UNEXPECTED-FAIL | browser/components/reportbrokensite/test/browser/browser_report_send.js | Uncaught exception in test bound testSendButton - at chrome://mochitests/content/browser/browser/components/reportbrokensite/test/browser/browser_report_send.js:20 - TypeError: can't access property "testBeforeNextSubmit", GleanPings.brokenSiteReport is undefined
  • TEST-UNEXPECTED-FAIL | browser/components/reportbrokensite/test/browser/browser_reason_dropdown.js | Uncaught exception in test bound testReasonDropdown - at chrome://mochitests/content/browser/browser/components/reportbrokensite/test/browser/browser_reason_dropdown.js:15 - TypeError: can't access property "testBeforeNextSubmit", GleanPings.brokenSiteReport is undefined

Comment 25

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1852340 - Strings for new broken website reporting component; r?ryanvm

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/067697c814aa
Strings for new broken website reporting component; r=RyanVM

Comment 27

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/067697c814aa

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7851355d5c95
part 1: Add a new Gecko component for reporting broken websites; r=ayeddi,fluent-reviewers,mossop,flod,Gijs
https://hg.mozilla.org/integration/autoland/rev/0049d0494b17
part 2: Simplify the fallback Report Site Issue feature to not have redundant actors and experimental APIs; r=webcompat-reviewers,ksenia
https://hg.mozilla.org/integration/autoland/rev/86f9e01f70d6
part 3: Hook up Glean telemetry events and custom ping for user-submitted reports; r=janerik

Comment 29

[Natalia Csoregi [:nataliaCs]]

Backed out for causing failures due to reportBrokenSite.ftl

• backout: https://hg.mozilla.org/integration/autoland/rev/c3021f5ece18388f5f66348a7fd8cb540529da33
• push: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&revision=86f9e01f70d6efdd8eda55c9d8df638a41d6f21c&selectedTaskRun=Y5cIJo0mTSSrxYZRE5fCeg.0
• failure log: https://treeherder.mozilla.org/logviewer?job_id=436760236&repo=autoland&lineNumber=4667

[task 2023-11-19T08:18:15.929Z] 08:18:15     INFO - TEST-PASS | browser/base/content/test/static/browser_all_files_referenced.js | there should be no unreferenced files - 
[task 2023-11-19T08:18:15.929Z] 08:18:15     INFO - Buffered messages finished
[task 2023-11-19T08:18:15.930Z] 08:18:15     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_all_files_referenced.js | unused allowlist entry: resource://app/localization/en-US/browser/reportBrokenSite.ftl - 
[task 2023-11-19T08:18:15.931Z] 08:18:15     INFO - Stack trace:
[task 2023-11-19T08:18:15.931Z] 08:18:15     INFO - chrome://mochikit/content/browser-test.js:test_ok:1583
[task 2023-11-19T08:18:15.931Z] 08:18:15     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_all_files_referenced.js:checkAllTheFiles:1049
[task 2023-11-19T08:18:15.931Z] 08:18:15     INFO - chrome://mochikit/content/browser-test.js:handleTask:1134
[task 2023-11-19T08:18:15.932Z] 08:18:15     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1206
[task 2023-11-19T08:18:15.932Z] 08:18:15     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1348
[task 2023-11-19T08:18:15.932Z] 08:18:15     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1123
[task 2023-11-19T08:18:15.933Z] 08:18:15     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2023-11-19T08:18:15.933Z] 08:18:15     INFO - ignored unused allowlist entry: resource://app/blocklist.xml
[task 2023-11-19T08:18:15.934Z] 08:18:15     INFO - ignored unused allowlist entry: resource://gre/gmp-clearkey/0.1/manifest.json
[task 2023-11-19T08:18:15.935Z] 08:18:15     INFO - ignored unused allowlist entry: resource://gre/res/test.properties
[task 2023-11-19T08:18:15.935Z] 08:18:15     INFO - missing file: resource://gre/modules/WebNavigation.jsm
[task 2023-11-19T08:18:15.936Z] 08:18:15     INFO - missing file: resource://test/ReturnCodeChild.sys.mjs
[task 2023-11-19T08:18:15.936Z] 08:18:15     INFO - missing file: resource://gre/modules/ExtensionProcessScript.jsm
[task 2023-11-19T08:18:15.937Z] 08:18:15     INFO - missing file: resource://test/ReturnCodeChild.jsm
[task 2023-11-19T08:18:15.938Z] 08:18:15     INFO - missing file: chrome://aboutsync/content/AboutSyncRedirector.js
[task 2023-11-19T08:18:15.938Z] 08:18:15     INFO - Console message: No chrome package registered for chrome://aboutsync/content/AboutSyncRedirector.js

Also failing: TEST-UNEXPECTED-FAIL | docshell/test/chrome/test_bug364461.xhtml | Unexpected event (pagehide) occurred

Comment 30

[Thomas Wisniewski [:twisniewski]]

Of course I would forget to remove the allowlist entry, and that not doing so would also cause a failure :)

Comment 31

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/411374d444d1
part 1: Add a new Gecko component for reporting broken websites; r=ayeddi,fluent-reviewers,mossop,flod,Gijs
https://hg.mozilla.org/integration/autoland/rev/05320d6c0441
part 2: Simplify the fallback Report Site Issue feature to not have redundant actors and experimental APIs; r=webcompat-reviewers,ksenia
https://hg.mozilla.org/integration/autoland/rev/61875987e62c
part 3: Hook up Glean telemetry events and custom ping for user-submitted reports; r=janerik

Comment 32

[Cristian Tuns]

Backed out for causing frequent failures in docshell/test/chrome/

• Backout link
• Push with failures
• Failure Log
• Failure lines: TEST-UNEXPECTED-FAIL | docshell/test/chrome/test_bug364461.xhtml | A load event was expected, but a pagehide event occurred - got "pagehide", expected "load"
  TEST-UNEXPECTED-FAIL | docshell/test/chrome/test_bug364461.xhtml | A pageshow event was expected, but a load event occurred - got "load", expected "pageshow"
  TEST-UNEXPECTED-FAIL | docshell/test/chrome/test_bug364461.xhtml | The persisted property of the load event on page data:text/plain,aaa had an unexpected value - got undefined, expected false
  TEST-UNEXPECTED-FAIL | docshell/test/chrome/test_bug364461.xhtml | Unexpected event (pageshow) occurred

Comment 33

[Iulian Moraru]

FYI: there are also this puppeteer jobs that are permfailing on the push that got backed out.

Comment 34

[Thomas Wisniewski [:twisniewski]]

Ok, I managed to find the issue causing the puppeteer and test_bug364451 failures (at least this try-run implies to me that neither of the failures revealed before are happening with its fix). I'll try landing once more.

Comment 35

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0ceff7daf4a4
part 1: Add a new Gecko component for reporting broken websites; r=ayeddi,fluent-reviewers,mossop,flod,Gijs
https://hg.mozilla.org/integration/autoland/rev/f7beb47ee128
part 2: Simplify the fallback Report Site Issue feature to not have redundant actors and experimental APIs; r=webcompat-reviewers,ksenia
https://hg.mozilla.org/integration/autoland/rev/73f60b8af6da
part 3: Hook up Glean telemetry events and custom ping for user-submitted reports; r=janerik

Comment 36

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/0ceff7daf4a4
https://hg.mozilla.org/mozilla-central/rev/f7beb47ee128
https://hg.mozilla.org/mozilla-central/rev/73f60b8af6da