1866291 - There should be some information shown when the new webcompat reporter's Send button is deactivated

Status: VERIFIED FIXED

(Firefox :: General, enhancement)

Description

[Daniel Bodea [:danibodea]]

Found in

• Beta v121.0b1

Affected versions

• Nightly v121.0a1
• Beta v121.0b1

Tested platforms

• Affected platforms: Windows 10, MacOS 11, Ubuntu 22
• Unaffected platforms: -

Steps to reproduce

1. Make sure new webcopmpat feature is enabled:
   ui.new-webcompat-reporter.enabled = true
2. Set up the mandatory drop-down:
   ui.new-webcompat-reporter.reason-dropdown = 2
3. Load any webpage
4. Open the new webcompat reporter tool
5. Send the report without choosing a reason from the drop-down.
   Expected result

• Upon clicking the disabled "Send" button, a message should be displayed stating why it can't be sent.
  Actual result
• Upon clicking the disabled "Send" button, nothing happens. The user is confused.

6. Choose a reason from the drop-down. (the "Send" button enables)
7. Insert a space character anywhere inside the domain portion of the URL. (the Send button is disabled)
8. Attempt to Send the report again.
   Expected result

• Upon clicking the disabled "Send" button, a message should be displayed stating why it can't be sent.
  Actual result
• Upon clicking the disabled "Send" button, nothing happens. The user is confused.

Regression range

• not a regression, but an implementation flaw.

Additional information

• ?

Comment 1

[Anna Yeddi [:ayeddi]]

While the button is disabled with HTML attribute, there should be no hover or active state provided to the element - this does appear to be confusing and may affect users with cognitive difficulties.

Maybe removing these two states would help in the interim, while more comprehensive error notification is worked on with the UX?

Comment 2

[Thomas Wisniewski [:twisniewski]]

Thank you Anna, I agree. In fact we just fixed that as part of the work in bug 1865827 :)

Comment 3

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1866291 - Display messages when Report Broken Site disables its send button; r?gijs

Comment 4

[Thomas Wisniewski [:twisniewski]]

After much back-and-forth, what we've ended up with is that the send button will always be enabled, but will just focus on the first invalid input, if any, instead of sending anything.

This means the drop-down opens, or the URL is focused, so screen reader users at least some way of knowing what's wrong.

In addition, a visual message will be displayed under the URL or reason drop-down while they are in an invalid state (and will not show it until they are edited, or the send button is clicked).

And unfortunately, it seems that we do not yet have a CSS token in our branding to give the text a red color, and so to prevent red text appearing on red (if the user has a custom color theme), we'll just bold the text for now.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Comment on attachment 9366331 [details]
Bug 1866291 - Display messages when Report Broken Site disables its send button; r?gijs

Beta/Release Uplift Approval Request

• User impact if declined: Users will receive no informational feedback while using the new Report Broken Site feature, and screen reader users will have no obvious way to know what the errors are.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: Bug 1868412
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This only affects the Report Broken Site feature, which will be disabled by default on 121, and may only see a limited trial run.
• String changes made/needed: Two new strings added, but there is no expectation of them being translated in time for 121 (:flod recommended to land them anyway).
• Is Android affected?: No

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/879945617f6b
Display messages when Report Broken Site disables its send button; r=Gijs,fluent-reviewers,desktop-theme-reviewers,flod,Itiel

Comment 7

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9366331 [details]
Bug 1866291 - Display messages when Report Broken Site disables its send button; r?gijs

Approved for 121.0b9. Per discussion with the engineering and l10n teams, we're aware that the newly-added strings are not likely to see much translation between now and the RC and that was deemed an acceptable risk for this.

Comment 8

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/53dff28f7a8d

Comment 9

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/879945617f6b

Comment 10

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

This enhancement is implemented on RC1 121.0 and Nightly 122.0a1 on Windows 10, macOS 12, Ubuntu 22.

1. When the user edits the URL into an invalid form, a red border appears around the URL textbox and the following text is displayed underneath: "Please enter a valid URL."
2. If the mandatory reason drop-down is set up and the user clicks on the ‘Send' button, without having any pre-selected reason, the dropdown automatically opens (with a red border around it), and the following text is displayed underneath: "Please choose a reason."

We did notice however that there is no focus ring - for the dropdown - when using keyboard navigation in this state . Should we file a bug for this? Thank you.

Comment 11

[Thomas Wisniewski [:twisniewski]]

We did notice however that there is no focus ring - for the dropdown - when using keyboard navigation in this state . Should we file a bug for this?

I just filed this as bug 1869442 yesterday, I think (we can move it under the QA bug if that's the case)