1815501 - Feature Callout focus ring's border radius is tighter than the callout's

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Shane Hughes [:aminomancer]]

Attachment: See the space between the blue focus ring's corners and the callout's

The focus ring on feature callout has tighter corners than the callout itself. It's because the background of the feature callout is drawn on a different element than the focused element, and these elements have different border radii. We could just make them have the same border radius, or we could change which element can be focused.

Comment 1

[Punam Dahiya [:pdahiya]]

NI UX and Product to help priortize and update bug with UX feedback. Thanks

Comment 2

[Shane Hughes [:aminomancer]]

Attachment: Applying the focus ring to the arrow

I thought we might also fix the arrow's focus ring while we're here. It currently doesn't have a focus ring, but one can be applied by using outline and z-index. Here's a screenshot of how that looks for reference

(The color/style are fixed in this screenshot too, btw. Currently on Nightly it has the default UA focus ring, with a bright inner ring and a dim outer ring. The standard focus ring colors for chrome and system content are #0061E0 for light mode, #0DF for dark mode, and -moz-DialogText for HCM)

Comment 3

[Tatiana Mirson]

(In reply to Shane Hughes [:aminomancer] from comment #0)

Created attachment 9316388 [details]
See the space between the blue focus ring's corners and the callout's

The focus ring on feature callout has tighter corners than the callout itself. It's because the background of the feature callout is drawn on a different element than the focused element, and these elements have different border radii. We could just make them have the same border radius, or we could change which element can be focused.

Shane, from this screenshot it looks good. The focused element should be the whole callout including the caret. Could you please confirm if the callout change size or if the caret is in a different position the radius border is still working ?

Regarding colors, for light mode you mentioned this: #0061E0 but I have for focus ring the same ones for primary CTA witch is #0060DF.
Is it #0061E0 the one used in the product in other places for focus ring? is it also the same HEX for the primary CTA's?

Comment 4

[Shane Hughes [:aminomancer]]

Ah, the reason the screenshots look different is just because the callout is dynamically positioned based on window size. Since I took the screenshots several days apart, the windows were different sizes in the 2 screenshots, so the callout moved. And the screenshots are being scaled down by Bugzilla, and since there's more negative space in the second one, it gets scaled down smaller. The callouts are still the same size.

In the patch I'm working on, I've fixed the issue of the caret not being visually focused. It was just a technical issue. So this patch should fix 3 issues:

1. The border radius of the feature callout doesn't match the border radius of the focus ring around the feature callout.
2. The caret "sticks out" of the focus ring, because it's really a separate pseudo-element and doesn't have an outline, which is how focus rings are usually implemented.
3. The focus ring uses a UA appearance instead of a style, so it actually has 2 focus rings, one bright and one dim, instead of the standard 2px solid outline that's the same color as the primary CTA. This UA appearance is just the default appearance for focusable HTML elements, so it was automatically inherited and we just haven't dealt with it yet, since visually it looks pretty close to the standard solid outline (until you zoom in enough to see it's actually 2 outlines)

As for colors, #0061E0 is the focus ring color in both chrome and content. This is also the color of primary CTAs in both chrome and content. The same goes for about:welcome, spotlight, etc. (since those inherit from common-shared.css, which is the stylesheet for system pages like about:preferences).

As for #0060DF, it sounds like maybe there's a discrepancy between the onboarding designs and the chrome/system page designs? Since the pattern you're describing is generally true — the focus ring color is always the same as the primary button color, they both use the same "accent color" in everything I've seen. But the actual hex value of that color in everything I've seen on train, outside the feature callout stylesheet, is #0061E0.

I'm not sure about what the primary CTA color might have been for feature callouts, since feature callouts themselves don't actually have primary buttons, at least so far. So we haven't implemented that color in the feature callout stylesheet. But in our other messaging surfaces, we use the variable --in-content-primary-button-background, whose value is inherited from common-shared.css (the stylesheet for all system pages), which is defined as #0061E0 for light mode.

Comment 5

[Tatiana Mirson]

Thanks Shane, then regarding the border is okey on this side.

I don't want to bring inconsistencies regarding color and if the primary CTA in both chrome and content are #0061E0 we should use the same one for the border-radius.

Comment 6

[Shane Hughes [:aminomancer]]

Attachment: Bug 1815501 - Fix Feature Callout focus rings. r=jprickett

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/63c1ac1ebbac
Fix Feature Callout focus rings. r=jprickett

Comment 8

[Norisz Fay [:noriszfay]]

Backed out for causing node failure on _feature-callout.scss

Backout link

Push with failures

Failure log

Comment 9

[Shane Hughes [:aminomancer]]

We should disable this rule force-attribute-nesting, it's really silly

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7fab6c11921d
Fix Feature Callout focus rings. r=jprickett

Comment 11

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/7fab6c11921d

Comment 12

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible using the latest Firefox Nightly (112.0a1 - Build ID: 20230223094032) installed on Windows 10 x64, macOS 12.6.1, and Ubuntu 22.04 x64. I can confirm that no spaces are displayed between the blue focus ring's corners and the callout.