As a user field focussing and tabbing should work well in dialogs (MGNLUI-1978)

[MGNLUI-2605] Keyboard support to confirm e.g. a deletion Created: 20/Jan/14  Updated: 12/Feb/14  Resolved: 23/Jan/14

Status: Closed
Project: Magnolia UI
Component/s: user interaction
Affects Version/s: None
Fix Version/s: 5.2.2

Type: Sub-task Priority: Major
Reporter: Rainer Blumenthal Assignee: Christopher Zimmermann
Resolution: Fixed Votes: 0
Labels: usability, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: JPEG File screenshot-1.jpg    
Issue Links:
Cloners
is cloned by MGNLUI-2673 Support of ESC and ENTER in dialogs, ... Closed
Template:
Date of First Response:

 Description   

One issue which disturbs a lot during working with the new UI is (for editors and developers):

The confirmation dialogs do not react on ENTER - they do not support keyboard interactions in any way.

I can't switch the selection with left / right or tab - and I can't send the form by pressing enter. Please see screenshot.



 Comments   
Comment by Christopher Zimmermann [ 20/Jan/14 ]

A good solution to this will be to improve focus handling in light dialogs. Unfortunately we blanket disabled the html "outline" that indicates which element has the focus. We will at least partially re-enable this so that a user can see which button has the focus. Additionally for light dialogs, such as these confirmation dialogs - the focus will be set to the default button.
Therefore a user can simply press the spacebar or the enter key to execute the default action (button), or use tab or shift-tab to select the other action, and then spacebar or enter to execute that one.

Comment by Christopher Zimmermann [ 20/Jan/14 ]

TODO is to determine the exact visual appearance of focussed elements with UX group.

Comment by Christopher Zimmermann [ 23/Jan/14 ]

Set the 'default' button to have focus for light dialogs. Also change light dialog styles to give color emphasis to the button with :focus instead of that with class .default. This enables user to use spacebar or enter to execute the hilighted button, and allows user to tab through the buttons and see which has focus.
This means that a user can confirm or cancel in light dialogs via keyboard.

Comment by Jaroslav Simak [ 29/Jan/14 ]

Just a note: by default focus is on cancel button. To switch the focus on confirm button use shift+tab keyboard shortcut.

Comment by Rainer Blumenthal [ 10/Feb/14 ]

If we try to rename a page ... there is still no keyboard support, the deletion was just a sample - are you planning to roll this out globally for all dialogs / popups?

Comment by Rainer Blumenthal [ 10/Feb/14 ]

Can yo please reopen this?

I have no rights to do so...

Generated at Mon Feb 12 08:58:21 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.