Allow displaying a Control's focus stylebox only on keyboard/gamepad focus, not mouse focus

[Shadowblitz16]

Describe the project you are working on

Win32 theme

Describe the problem or limitation you are having in your project

Godot's themes just isn't flexible enough to recreate it.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Separate keyboard/gamepad and touch/mouse focus styles

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

the button on the far left can't be emulated in godot

If this enhancement will not be used often, can it be worked around with a few lines of script?

It would be used end of story and no

Is there a reason why this should be core and not an add-on in the asset library?

Godot's theming system is severally limited and devs don't seem to think so.

[Calinou]

Most applications (and web browsers) do not expose separate focus styles depending on how you focused something. At the end of the day, how you focused on something shouldn't matter for accessibility reasons.

Using a JavaScript hack, Web browsers make it possible to hide the focus style if you've clicked on a button (but still technically focus on it). Maybe this is something we could expose as a focus mode in addition to the existing None, Click and All.

Edit (December 2021): In modern browsers, the above JavaScript hack is now available as a built-in behavior using the CSS :focus-visible pseudo-selector.

[Shadowblitz16]

I just know that the black lines in win32 apps seems to be the mouse focus and the dotted rectangle is the keyboard focus and its seems like it's currently not possible to do in godot

[Calinou]

I have a WIP implementation of this: https://github.com/Calinou/godot/tree/button-focus-visible

simplescreenrecorder-2022-03-07_23.10.46.mp4

It mostly works, but there's a small issue where focus styleboxes will not display after using keyboard tabbing on a given button if the button was recently clicked.

Testing project for the above branch: test_focus_visible.zip

[Shadowblitz16]

@Calinou I can't test this right now, Have you tried this with a win95 theme?

[Shadowblitz16]

@Calinou I am closing this in favor of my other post I go into more detail on how it would work there.

[GarrickWinter]

@Calinou I am closing this in favor of my other post I go into more detail on how it would work there.

Could you link to the other post? I've tried to find it, but I've had no luck. I'd very much like a way to have focus only for keyboard/controller and not on the mouse, so I'd like to keep track of items related to that functionality.

[OhiraKyou]

@GarrickWinter

I'm assuming they were referring to the proposal mentioned below the post, which is this: GUI styles should draw focus behind text #2012

Incidentally, my solution to this problem was to do the following (initially for buttons, with similar processes applicable to other controls):

1. Make buttons and their text invisible via styling (i.e., assign styles to a new StyleBoxEmpty, and set text alpha to 0)
2. Add child nodes (e.g., panels) to represent various states, styled as desired.
3. Enable relevant nodes and disable irrelevant nodes on state change, via script.
4. Use a script to copy the button text into a separate label or multiple, state-specific labels. Or, leave the button text visible, and enable show_behind_parent on custom background nodes to make them show behind the existing button text.

For buttons, I reused the same StyleBoxFlat resources that I previously used for the original buttons. And, by making the style nodes and script nodes children of a button, I was able to save off a scene branch with the button as the root node and treat instances like any other button.

This method of separating functional and visual components is similar to how many things in games are constructed. For example, consider characters. One set of nodes (e.g., a character controller, colliders, and triggers) provides the functionality. And, another set of nodes (e.g., an animated mesh with accessory meshes and particles) provides the visual representation, which may be interpolated separately between physics updates for smoother motion.

The primary benefit of this method is that it decouples styling from state. Arbitrary combinations of visual representations with arbitrary hierarchy organizations may represent arbitrary numbers of states using an arbitrary selection of properties (not just those exposed through the theme system). With this, I could...

• Reuse hover background styling (e.g., desaturated by default, saturated on hover) for focus—without covering the text due to built-in focus styling being treated as an overlay.
• Add a focus outline as a separate node, and only show it when using a keyboard or gamepad.
• Use multiple layers to build up a visual representation rather than relying exclusively on borders and shadows.
• Create a 3D press effect by using separate labels and backgrounds—or an animation to shift text and specific background layers down.