Focus outline on Code Snippet is unstyled

[joshblack]

When clicking in a code snippet, it appears that we have a un-styled focus indicator:

This is called (I believe) by tabindex="0" and role="textbox", which I believe is moreso meant for an area where you can freely edit text.

[joshblack]

cc @dakahn do you agree on the textbox stuff?

[dakahn]

Yeah, exactly right. Wrong role. I can bundle these fixes in with some code snippet improvements that have been made recently to CCR. 👍🏽

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[dakahn]

Looks like this was taken care of 😄

[janhassel]

I was just about to open an issue about the focus style on code snippet and found this issue.
In the current version ([email protected]) I can replicate the screenshot from @joshblack

In the single-line codesnippet the focus style beyond the box, in the multi-line it's just unstyled:

Using Chrome v79 on macOs 10.14.6

[tw15egan]

Confirmed this is still present. @carbon-design-system/design , what should we do with this outline here?

[laurenmrice]

Can we do something like this:

[tw15egan]

With the way the component is set up, it doesn't seem like that is possible.

My recommendation would be to just remove the focus from the element since it is not interactive anyways. The focus will just go to the copy icon, then to show more.

[laurenmrice]

ok yeah then lets just do that, have the focus on the copy icon and then the show more only^ .

[tw15egan]

Focus styles have been removed from multi-line snippet, @emyarod is going to look into a possible cross-browser / os solution to the single line snippet in a separate PR

[emyarod]

just a proof of concept, still WIP but looking for feedback before I continue @laurenmrice @tw15egan

here's a screenshot dump but we can go over this in more detail later on. every category below has 3 images each showing Windows 10, macOS with hidden scrollbars, and macOS with visible scrollbars. the first set is the as-is, the second set is a CSS only fix, and the third set includes a proof of concept that includes JS.

as-is

default

snippet focused

copy button focused

preliminary fix (no height adjustments)

default

snippet focused

copy button focused

dynamically set height based on whether or not scrollbar is present

if the content is short and a scrollbar is not rendered, it will appear the same as the prelim fix screenshots above on macOS

default

snippet focused

copy button focused

[tw15egan]

@emyarod thanks for taking the time to put these screencaps together 🙏 Makes it very easy to illustrate the issue.

[emyarod]

if the "preliminary fix (no height adjustments)" solution is fine then I can continue with that, but the proof of concept with a bit of tweaking might be worth implementing

[tw15egan]

Personally, I think the preliminary fix (no height adjustments) looks great and could be implemented immediately it seems. I like that it stays the same height in both macOS versions.

[laurenmrice]

agreed, lets go for that ^