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

[MGNLUI-2673] Support of ESC and ENTER in dialogs, detail editors, alerts and notifications Created: 12/Feb/14  Updated: 17/Jan/20  Resolved: 22/Apr/14

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

Type: Sub-task Priority: Major
Reporter: Rainer Blumenthal Assignee: Mikaël Geljić
Resolution: Fixed Votes: 0
Labels: keyboard, support, usability, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Cloners
clones MGNLUI-2605 Keyboard support to confirm e.g. a de... Closed
Relates
relates to MGNLUI-2792 Click outside of light dialogs, confi... Closed
relates to MGNLUI-2747 Keyboard focus should remain inside a... Closed
duplicate
duplicates MGNLUI-2089 ESCAPE key should close light dialogs... Closed
duplicates MGNLUI-2090 Subapp editor should be keyboard cont... Closed
is duplicated by MGNLUI-2788 Support of RETURN/ENTER key to confir... Closed
relation
is related to MGNLUI-2884 Pressing Escape in Dialog/DetailEdito... Closed
is related to MGNLUI-2797 Show clear focus and hover states on ... Closed
is related to MGNLUI-2814 ENTER keyboard shortcut causes error ... Closed
is related to MGNLUI-2812 Confirmation dialog unwantedly re-app... Closed
is related to MGNLUI-5613 Remove EnterFriendlyPanel hack Open
is related to MGNLUI-2817 UI Tests for ESC and ENTER keyboard s... Closed
Template:
Date of First Response:

 Description   

We're supporting ESC to close some dialogs and RETURN to trigger the default action in some cases already, but we've not implemented such support across all dialogs.

We should ensure that:

  1. Alerts, light dialogs and notifications can be closed by pressing ESC.
  2. Regular dialogs and embedded forms show an alert box when the user presses ESC, asking her to confirm that changes will be lost if she continues. If feasible, only show such a dialog if the content in the form has actually been changed. If this is too much of a hassle to implement now, please do not support ESC for closing regular dialogs and embedded forms.
  3. Pressing Enter key should submit a form, the same as pushing the Save or Confirm button. But this shortcut key should not trigger the action if the focus is currently in a textarea or richtextfield, because a user may simply want to add an enter.

The goal is to avoid that users loose work in such dialogs, which - in particular with the introduction of light dialogs - are now mainly used for editing items and content.



 Comments   
Comment by Andreas Weder [ 17/Mar/14 ]

Ok, sorry, I've given this issue a scope which is considered too broad. I'm going to re-focus it on what was reported and link it to other tickets that cover the rest.

Comment by Christopher Zimmermann [ 03/Apr/14 ]

I re-added the ENTER key support since i found a clean way to do it.

Comment by Christopher Zimmermann [ 10/Apr/14 ]

Note - will need to be forward ported to 5.3

Comment by Mikaël Geljić [ 17/Apr/14 ]

Fixes are on branch "MGNLUI-2673-c", beware that branch is 5.3-based (merged state with other confirm-dialog changes that are actually also in 5.2.4, will be easier to backport than the other way around)

Comment by Christoph Meier [ 17/Apr/14 ]

I had to change the encoding (to UTF-8) and to fix some special characters in the message-bundles

Comment by Milan Divilek [ 17/Apr/14 ]

Reopen: Focus of dialog is lost when cancel confirmation dialog.

Reproduce:
1. Open any dialog. For example "pages" app - "rename page" action
2. Press ESC key
3. Confirmation dialog pop-up
4. Press cancel button
5. Press ESC or ENTER key -> nothing happens
6. When click anywhere into dialog then ESC, ENTER keys again works

Comment by Mikaël Geljić [ 18/Apr/14 ]

On branch https://git.magnolia-cms.com/gitweb/?p=magnolia_ui.git;a=shortlog;h=refs/heads/MGNLUI-2673

Comment by Milan Divilek [ 21/Apr/14 ]

Reopen: Focus of dialog is lost when ESC confirmation dialog.

Reproduce:
1. Open any dialog. For example "pages" app - "rename page" action
2. Press ESC key
3. Confirmation dialog pop-up
4. Press ESC button. Confirmation dialog is closed.
5. Press ESC or ENTER key -> nothing happens
6. When click anywhere into dialog then ESC, ENTER keys again works

This has ugly side effect during editing pages. Pressing ESC leads to switching between edit and preview mode instead of open "close" confirmation dialog.

For example (best it's visible when using Firefox, but it's reproducible also with Safari and Chrome)
1. Go to this page http://localhost:8080/magnoliaAuthor/.magnolia/admincentral#app:pages:detail;/demo-project/about/subsection-articles/article:edit and open "page header" edit dialog
2. Press ESC key
3. Confirmation dialog pop-up
4a. Firefox - Just repeatable press ESC and look on background. Edit subapp will switch between edit and preview mode
4b. Safari, Chrome - Quickly repeatable press ESC -> edit subapp will switch mode

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