dcrdex icon indicating copy to clipboard operation
dcrdex copied to clipboard

ui: audit and improve keyboard navigation

Open buck54321 opened this issue 2 years ago • 1 comments

comment by @davecgh on Element.

I personally prefer for enter to activate the default action of forms. More generally, one of the biggest pet peeves I have with almost all cross platform UIs is they invariably don't do things like the native platform does, and usually it often has to do with lack of support for keyboard-related things. One of them is this case where enter activates the default action. If the concern is accidentally submitting when you didn't mean to, the way native platforms tend to handle that is with an additional confirmation dialog that also has an option to no longer show that confirmation dialog in the future (typically via a checkbox). Other common missing features in this regard are improper and/or no support for tabbing into fields and/or tab order so the tab order logically follows the fields, inability to associate shortcut keys with labels linked to input fields so they can be jumped to via alt+underlined letter in the label, and missing support for common actions in lists such as being able to ctrl+click individual sparse list items to select them or click+ shift click to select an entire range.

As it regards #1977, I don't think we should add a confirmation dialog for our confirmation dialog. We can just roll with enter-submit. The limited feedback I got on Element seemed supportive.

Looks like tab-navigation works reasonably well within forms and across hyperlinks on Chrome and Firefox. But we can't tab select e.g. the market/limit tabs above the order form or wallet type tabs on the wallet creation form. Is there an easy fix?

As far as shortcut keys, we would need to do it programatically cuz i18n. Scan labels and associate with inputs. Apply styling to a single unique character per label. Process keyboard events to apply focus.

I can't think of anywhere we would need to select multiple list items.

buck54321 avatar Jan 02 '23 20:01 buck54321

As it regards #1977, I don't think we should add a confirmation dialog for our confirmation dialog. We can just roll with enter-submit. The limited feedback I got on Element seemed supportive.

Yes, especially since if they hit enter in the password dialog and if the password entered is correct, their intent is perfectly clear. Conversely, ESC closes the form. Even if the password field is hidden because it's cached, Enter would still be good to submit since this is already a confirmation form.

Looks like tab-navigation works reasonably well within forms and across hyperlinks on Chrome and Firefox. But we can't tab select e.g. the market/limit tabs above the order form or wallet type tabs on the wallet creation form. Is there an easy fix?

Hotkeys seems reasonable here. e.g. m and l to select, or the dom-based solution you suggested to deal with i18n.

chappjc avatar Jan 02 '23 20:01 chappjc