1589918 - Given and additional names' focus rings are not covering the end side of the text area in the Add Address dialog

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, defect, P3)

Description

[Itiel]

Attachment: Screenshot

The code responsible was changed in bug 1485473, but I'm not sure if this was an issue even before.
See attached.

Comment 1

[Itiel]

Attachment: Screenshot - additional name

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

I think the intent here was to not have borders on the "inside" of the larger name area, so there would be no borders on either end of the additional-name field in the middle, and the given name would have no border on the end and the family name would have no border on the start.

Comment 4

[Tim Nguyen :ntim]

This is quite easy to fix, you only need to increase the z-index of focused containers:

#given-name-container:focus-within,
#additional-name-container:focus-within,
#family-name-container:focus-within {
    z-index: 1;
}

Note that the rule is targeting the container on :focus-within and not the text-input on :focus, because the latter would overlap and hide the label.

Comment 5

[Release mgmt bot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:MattN, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 6

[Tim Giles [:tgiles]]

To help Mozilla out with this bug, here's the steps:

1. Comment here on the bug that you want to volunteer to help.
   This will tell others that you're working on the next steps.
2. Download and build the Firefox source code
   • If you have any problems, please ask on Element/Matrix in the #introduction channel. They're there to help you get started.
   • You can also read the Developer Guide, which has answers to most development questions.
3. Start working on this bug.
   • You'll need to implement the styles that :ntim mentioned in Comment #4 in the editAddress.css file
   • If you have any problems with this bug, please comment on this bug and set the needinfo flag for me. Also, you can find me and my teammates on the #form-autofill channel on Element/Matrix most hours of most days.
4. Build your change with mach build and verify that the issue has been fixed by using mach run and then adding a new address in about:preferences. If you don't have "Saved Addresses" in about:preferences, you may need to enable it by setting extensions.formautofill.addresses.supported to on in about:config and then restarting Firefox.

• Also check your changes for adherence to our style guidelines by using mach lint.

5. Submit the patch (including an automated test, if applicable) for review. Mark me as a reviewer so I'll get an email to come look at your code.
   • How to Submit a Patch
   • This is when the bug will be assigned to you.
6. After a series of reviews and changes to your patch, I'll push it to autoland.
   • If there are changes requested, please read the "To update a submitted patch" section to ensure you don't accidentally create a duplicate revision!
   • Your code will soon be shipping to Firefox users worldwide!

Comment 7

[manisha270417]

Attachment: Bug 1589918 - Add covering Focus Ring of text area in Add Address dialog. r?tgiles

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/069aba746444
Add covering Focus Ring of text area in Add Address dialog. r=tgiles

Comment 9

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/069aba746444

Comment 10

[Ardelean Oana]

Reproducible on Firefox 100.0 on Ubuntu 20.04. Verified as fixed on Firefox 102.0b4(20220605185654) and Nightly 103.0a1(20220606212503) on Windows 10 x64, macOS 11 and Ubuntu 20.04.