Highlight / active state issue

[schroef]

We talked about perhaps adding a background tint or outline color to items for active state. This is the function like in a browser when the users switch input by hitting the tab key. In browser a highlight border appears.

This issue kind arose when we discussed the preview window issue appeard in issue #67. However im not sure we should use this. Because currently hitting tab doesnt do really much. You need to hit tab many times when eventually something will happen. For instance when we have the select function active in the toolbar and we hit tab 1 time, nothing actually happens. After hitting tab many times suddenly we see some movement in the inspector window and eventually the tag panel gets highlighted. Than after many more presses the tag hierarchy on left starts to move.

Currently i dont see any function for this tab method for switching input. Perhaps not everything is added to some sort of tab index.

Also im not sure how we can style it properly. In the current layout there are a couple items which have the active state, so they are highlighted. Perhaps i need to check BluePrintJS again and see how its properly done.

EDIT
I had a quick look at Blueprintjs, it looks like they add aria for this. https://blueprintjs.com/docs/#core/components/tabs
Im not 100% convinced we need this. I mean it sort of represents a browser feel. I taught we were going more for a desktop experience.

Ive attached a screenshot and also tried a screengrab to show the current issue

[schroef]

It wasnt a hard fix actually, yet not all parts seem to be reachable. Also not sure i like the highlight effect, it will always show when pressing an item. I would prefer without i guess. It gives a cleaner look.

You can see a very soft background color show behind an item as i press tab to switch between them.

[schroef]

Tab seems to be working, though i think we need to strip that make-shift tooltip i made. Now it also shows when using tab. We see a floating rectangle which also gets highlighted

Im checking how the app looks by disabling all "outline: none" i added. I didnt like it because it looked so square and didnt fit in.

[schroef]

Hmm trying to style "focus will make it show double focus area. Thats is weird?!
I simply addd a global :focus, but that seems to be adding an extra one.

[schroef]

I did some more testing and im stil not convinced this highlight is usefull. I dont like the style of the highlight and cant really style it. I believe when i use border instead of outline, everything gets an border. Not sure why this happens though, when its set to outline only buttons and inputs get the blue outline. There are also some parts getting the blue highlight which dont make sense. Like some parts in the outliner for example

I also tried using a soft background color, this does look nice. But this causes some issue in parts of the ui which have specific color set. We could set those focuse colors independent ofcourse. This does already look better then the blue rectangle highlight. But still it highlights parts and im not sure why. For instance the content area lights up as well. I guess we normally dont see this because the blue highlight is outside of the view. Another thing is that not all items in the UI seem to react to tab input. For instance, the dropdown menu dont get highlighted

[RvanderLaan]

I wanted to close this one but the focus outline still seems a little off. We have it for the search bar, but nothing for the buttons next to it when you tab into them