focus outline can appear around elements when hovering, even outside of keyboard modality

[jonboiser]

Observed behavior

These are some screenshots I made browsing https://kolibri-dev.learningequality.org, which is using kolibri-design-system 0.2.2b1.

These screenshots were created while using the mouse exclusively (i.e. never entering into keyboard modality, at least intentionally by tabbing into elements).

On video player (hovering)

Learn search bar

Under top nav while side nav is open

Core menu while hovering

Expected behavior

In all of these screenshots, there should not be any outline

Steps to reproduce

Go to the various parts of the app in Chrome and you will see the outline when hovering with mouse (or sometimes without having to hover)

Context

[Priyaraj17]

Hey, We just need to add 'outline: none' in the css files. I will get started ASAP.

[jonboiser]

Hey, We just need to add 'outline: none' in the css files. I will get started ASAP.

@Priyaraj17 I don't think the solution is simple as that. We want the green outline to show when using the keyboard "tab" button to navigate the UI. Try navigating Kolibri right now with just the keyboard to see what I mean.

So any change to the CSS that will remove that is unacceptable (i.e. setting outline: none globally).

[Priyaraj17]

@jonboiser I was working on 2 issues simultaneously. I have solved the issues here. Shall I reference a pull request that I have made while solving a different issue? I believe it will resolve this issue too.

[Priyaraj17]

Hey, We just need to add 'outline: none' in the css files. I will get started ASAP.

@Priyaraj17 I don't think the solution is simple as that. We want the green outline to show when using the keyboard "tab" button to navigate the UI. Try navigating Kolibri right now with just the keyboard to see what I mean.

So any change to the CSS that will remove that is unacceptable (i.e. setting outline: none globally).

I think we can use tabindex = -1 for this. I have attached a screenshot too
I am hovering on the menu and the outline is not showing.

[Priyaraj17]

Will this work? @jonboiser @rtibbles

Hey, We just need to add 'outline: none' in the css files. I will get started ASAP.

@Priyaraj17 I don't think the solution is simple as that. We want the green outline to show when using the keyboard "tab" button to navigate the UI. Try navigating Kolibri right now with just the keyboard to see what I mean.
So any change to the CSS that will remove that is unacceptable (i.e. setting outline: none globally).

I think we can use tabindex = -1 for this. I have attached a screenshot too
I am hovering on the menu and the outline is not showing.

Will this work @rtibbles @jonboiser?