Blue line in the left of explorer icon in activity bar when mouse down.

[pixieaka]

• VS Code Version: 1.56.0 insider - commit: 0310f02
• OS Version: Windows 10 20h2

Steps to Reproduce:

@sandy081 I have noticed this blue line in the left when mouse down only in file icon and this doesn't shows in the other icons. (0310f02) - Ref: #118077 (comment)

Does this issue occur when all extensions are disabled?: Yes

[miguelsolorio]

Yes, this is the focus state for the activity bar. If you tab into the activity bar you'll see this as well so this is by design.

[pixieaka]

@misolori But it's only in first icon ( explorer icon )! The other icons doesn't have focus state.

[miguelsolorio]

@pixieaka this happens on all icons:

CleanShot.2021-04-24.at.15.40.11.mp4

[pixieaka]

@misolori This not working with me in all icons !

[miguelsolorio]

@sandy081 assigning to you since it seems the active state does not appear until after you've had keyboard access, so looks like a bug in the activity bar:

Screen.Recording.2021-04-26.at.9.04.07.AM.mov

[pixieaka]

@sandy081 After latest update all icons works fine, But Timeline still doesn't work.

[miguelsolorio]

It seems like the behavior is inconsistent overall. Sometimes it show and other times it doesn't.

[sandy081]

Blue line is showed when the item is focused and I am not sure why the item is not set to focused on click. More strangely it only works for the first item.

[hi-ogawa]

Hi everyone, I made a PR to address this issue.
I explained it in the PR comment, but what I found is that tabindex attribute is only enabled for the first activity bar item, which is the "file explorer" tab. Note that "tabindex" is necessary for li tag (which is used for activity bar item) to have the ability of :focus selector to match and get a correct styling.
Please let me know if the PR properly solves the issue (and, importantly, doesn't make a new bug).

[vs-code-engineering]

We closed this issue because we don't plan to address it.

Thanks for your understanding, and happy coding!