Keyboard Support For Various Popups

[sid]

Hi.
Ever since I’ve started using Wappler, keyboard support has improved gradually but a LOT of UI elements still need to integrated.
One of the things is various popups that show up at various place.
Any confirmation box or an alert which have buttons like “yes”, “no”, “ok” etc can be pressed via keyboard, but there is no highlighting of which of the buttons is selected - making it a hit or miss on which button is being pressed via keyboard. I have seen few alert prompts with “ok” getting dismissed by ESC, but few don’t.

So this feature request is to request Wappler team to improve keyboard accessibility of various popups across the Wappler UI.

[TomD]

@sid

there is no highlighting of which of the buttons is selected

An exception to this is the new file dialog. The default button is highlighted but unfortunately it doesn’t work as expected: it doesn’t respond to Enter, Esc or the Tab key, so the only option is to click it.

[sid]

I saw this when setting a new remote connection in Git too. But this is coloured button.
By highlight, I mean when focus is moved via tab on keyboard, the button should highlight with colour change or shadow or something else.

[sid]

@George Updated to 4.9.1 a few days ago. Sorry to say, but all dialogs still suck.

Ref:

@George

Try running the latest version and deliver feedback about the new features and suggest improvements on existing - then we can work on those.

The issue, as highlight in the original post, is that the buttons shown in dialogs are not usable via keyboard and have a bad mouse UX as well.

As an example, if I am to discard file changes via Git panel, I am shown below dialog:

I have no idea which button is selected here so I can’t just press arrow keys to highlight, and Enter to select from Keyboard.
As for mouse support, when I hover, the button is slightly brightened, but the mouse icon is not even a pointer.

Like you have informed… if Wappler is using native dialogs as per the OS, these buttons should have the same native UX.

[nickneustroev]

Bump.
We need the ability to press “Enter” on the keyboard to Save and Close the current popup Panel in Wappler.

Let me elaborate a little.
In every Wappler popup panel (Binding, Queries, Flows, etc.), when the job is done, you have to click the “Save” (”Select”, “Ok” etc.) button at the bottom of the panel. And moving the cursor there takes some time. Considering in Wappler you work with panels regularly, these small time leaks eventually massively affect overall productivity.

But the current placing of “Ok” and “Cancel” buttons is familiar and reliable. So I don’t see a simple proven way to make things differently in UI. Of course I have some ideas, but I don’t want to bring them up now as they are uncommon and sketchy and so unlikely to be implemented.

So the only simple way is adding keyboard support for most popup panels in Wappler.

This way pressing the “Enter” key on the keyboard would mean as you click the “Save” (”Select”, “Ok” etc.) button.