ugly black border on focused elements

[leonardb]

I'm not logging an issue for this since I'm not sure it is, or how exactly to report it.

When browsing https://clarity.design/ I'm experiencing a strange behavior.

Any element I focus on receives a black border.

for example:
When I focus on a checkbox in the Core Components section, the checkbox gets a square black border.

If I switch focus the text (description) of the element, the entire main viewport gets a black border

If I then do the same for the "Angular Components" checkbox.
When clicking the 'Option 1' checkbox, the black border 'flashes' on-off for the main viewport and the checkbox does not get a black border

When I focus on any of the text in the main viewport, the main viewport gets a black border

I've disabled all browser extensions and the behavior continues.
Browser: Google Chrome Version 89.0.4389.90 (Official Build) (64-bit)
OS: Ubuntu Xenial

Update:
The same border (blue though) occurs with Core Component checkbox with Firefox 87.0 (64-bit)
The 'main viewport' border behavior does not seem to occur.

[sis0k0]

Hi @leonardb!

Does this happen only on the Clarity website? Does it happen with another browser?
I suspect it might be caused by an update in Chrome 83. You can disable the new behavior from chrome://flags/#form-controls-refresh.

[leonardb]

Hi @sis0k0

Well, disabling that flag changes the color of the border on both mobile [Android] and desktop [Ubuntu] Chrome but does not remove it.

Just to make sure I reset all flags to default in Chrome (Ubuntu) and the behavior continues.

Additionally tested on Mac and results are inconsistent.

'Core' checkbox:

• Safari: no hard border on the checkbox, adds a border on the main content area
• Firefox: no borders on either checkbox or content area
• Chrome: 'hard' border on checkbox, flashes border on content area

'Angular' checkbox:

• Safari: no hard border on the checkbox, adds a border on the main content area
• Firefox: no borders on either checkbox or content area
• Chrome: no border on checkbox (does add a 'glow'), flashes border on content area

It may be related to 'user agent stylesheet' for the browsers I guess.
Even so, I'm still not certain this is 'intended behavior' to add this extract border for focused elements or a 'bug' where clarity is either adding or not removing these extra borders

[mathisscott]

🤔

@leonardb

Fwiw. I'm on Big Sur. Chrome 90. Firefox 87. Here is what I see...

'Core' checkbox:

• Safari: I see what you describe. Only the page is stuck in a tab-focus loop. I can't get anything in the content area to focus.
• Firefox: I see the blue, "hard" borders
• Chrome: I see no flash on the content area but I do see the blue hard borders on the checkbox

'Angular' checkbox:

• Safari: same thing. same focus-loop too.
• Firefox: I see the blue focus glow
• Chrome: I also see the blue focus glow

The focus glow is provided by the browser. We are not likely to change that in Clarity Angular.

The hard, blue border is the correct focus display moving forward through Core.

Safari appears to be broken on my end. This looks like something that needs to be fixed. I can't make any focus style appear unless I go into the Inspector panel. If I do that, the blue glow appears for the Angular checkbox and nothing appears for the Core checkbox.

So tl;dr. I'm not seeing the issues you are describing. But I'm seeing issues.

[leonardb]

Attaching a video of checkbox behavior for latest Firefox/Chrome/Safari on Mac

It's worse on Linux as it gets a black border, not the blue. The difference in behavior between the Core and Angular versions is a bit jarring, and as I understand the Angular components are to be deprecated in favor of Core.

Screen.Recording.2021-04-19.at.4.59.55.PM.mov

[mathisscott]

That video helps. Thanks. I'm curious why I'm not seeing that, though. What version of iOS are you on? Also, what versions of the other browsers are you using?

[leonardb]

@mathisscott

OS: Big Sur 11.2.3
Safari: 14.0.3
Firefox: 87.0
Chrome: 89.0.4389.128

[dpoehls]

I have been seeing the same issue in my own app (both in 5.0.0 and after I've upgraded to 5.1.1). Always a black box around anything I click on. Happens on Chrome but not on Firefox.

[mathisscott]

@dpoehls
Is this Linux? I'm getting a little mixed up here because it's not clear who is seeing what and what their environments are.

[dpoehls]

Sorry about that - no, Chrome on Windows 10.

[leonardb]

The video I uploaded is my Macbook (easier to capture video/examples)

OS: Big Sur 11.2.3
Safari: 14.0.3
Firefox: 87.0
Chrome: 89.0.4389.128

I'll try and get a video of Chrome/Safari on my Linux workstation tomorrow

[leonardb]

Recording on Ubuntu Xenial

Behavior on 'Core':

• label clicked, black box around checkbox
• checkbox clicked, no black box around checkbox
  Behavior with 'Angular'
• label clicked, 'glow' added to checkbox (no black border)
• checkbox clicked, 'glow' added to checkbox (no black border)

edit the behavior seems to be the same with 'toggle' on Core component

Browsers:
Chrome: 90.0.4430.72
Firefox: 87.0

clarity.mp4

[mathisscott]

Thanks for all this info @leonardb

This could be a bigger issue to tackle. I was thinking maybe it could be just an easy fix but I think I should take it back to the team today to see what our plan for it will be.

Thanks again!

[mathisscott]

It appears like we could modify this behavior. Details are in this blogpost if you are looking for a workaround @leonardb

But before we move forward on any sort of fix, I need to know what the expected interaction it's supposed to be 👈 @scroniser

And if we do plan to have these focus outlines, what colors should they be? 👈 @colinreedmiller

Clarity has always relied on browsers for focus outlines. But with these new features in chromium browsers, it's looking like we won't be able to continue doing that.

[colinreedmiller]

There is a project to make an analysis of taking on visual focus management outside of what browsers provide, but as a large and serious concern I don't imagine it will be solved let alone implemented soon. In the meantime if there is a workaround or temporary fix I'd suggest the use of --cds-alias-status-info

[leonardb]

@mathisscott thanks for looking into this.

I'd have to disagree with this statement:
Clarity has always relied on browsers for focus outlines.

The behavior for Angular checkbox certainly does not. It uses a glow around the box.
'text' input in both Angular and Core overrides the browser and adds an underline/highlight, while it seems the browser default (black/blue outline) is used for other components.

The behavior on Core checkbox puts the hard box around the 'checkbox' (and toggle) when the label is clicked, but not when the checkbox itself is clicked.

As a 'user' I'd like to see consistency. If it's being overridden for 'text' input should Clarity not attempt to provide a more consistent 'feel' for other elements? The default for text input seems to be a blue underline, while we get a hard blue/black (seems platform dependent) border on everything else.

Speaking for myself, I far prefer the subtle glow on the Angular checkbox to the hard blue/black border.

[scroniser]

@mathisscott, the blog you listed is from an accessibility specialist/developer advocate at Google -- the techniques discussed are fantastic.

From from an accessibility perspective, the focus must be visible when the element is in focus (WCAG 2.0 & 2.1 SC 2.4.7 Level A).

The working draft from WCAG 2.2 helps to define what this means -- for Clarity, I believe the easiest implementation is a 2px thick focus indicator. It must also have a 3:1 contrast ratio compared to the unfocused state. Other variations can be explored through following the WCAG 2.2 working draft for SC 2.4.11 Level AA.

While WCAG 2.2 has been officially released, it's anticipated that it will be released this summer.

The glow does not meet color contrast requirements of WCAG 2.2 SC 2.4.11 mentioned above. The black outline, however, is an accessibility feature the Chrome team released last year -- the change is likely influenced by the upcoming WCAG changes.