[MGNLUI-4974] Implement keyboard navigation in tabular views. Get shortcut support on par with M5 apps Created: 22/Jan/19  Updated: 08/Jan/20  Resolved: 23/Dec/19

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2

Type: Task Priority: Neutral
Reporter: Aleksandr Pchelintcev Assignee: Šimon Demočko
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 6d 5.05h
Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLUI-4934 Offer list of keyboard shortcuts Accepted
relates to MGNLUI-5084 Only first subapp keeps keyboard focu... Closed
relates to MGNLUI-5265 New UI framework. Navigating with key... Closed
relates to MGNLUI-4557 Implement keyboard shortcuts in the g... Closed
relates to MGNLUI-5002 Apply FastNavigation add-on to TreeView Closed
relates to MGNLUI-5061 New framework: reenable fast navigati... Closed
relates to CNTCTSAPP-107 CLONE - Provide default action suppor... Closed
relates to MGNLUI-4976 Provide default action support in Gri... Closed
causality
is causing MGNLUI-5580 Letter shortcuts break typing into fi... Closed
dependency
is depended upon by MGNLUI-5065 Keyboard navigation doesn't work in t... Closed
is depended upon by MGNLUI-3105 Keyboard focus should only move the f... Closed
documentation
to be documented by MGNLUI-5581 DOC: Update keyboard shortcuts Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Documentation update required:
Yes
Date of First Response:
Epic Link: Keyboard shortcuts
Sprint: UI Framework 11, UI Framework 12, UI Framework 13
Story Points: 8

 Description   
  • Investigate and specify desired keyboard shortcuts behavior for grids (https://wiki.magnolia-cms.com/display/UX/M6+Keyboard+navigation)
  • Implement following:
    • Selecting: 
      • SHIFT + ML
      • CMD + ML
      • SHIFT + UP/DOWN
    • Navigating: (these two first investigated. If more effort required, separate ticket will be created)
      • j/k (up/down)
      • e (inline edit)
    • Actions:
      • Backspace (delete)

Other shortcut bindings for custom actions will be implemented in MGNLUI-5531



 Comments   
Comment by Šimon Demočko [ 20/Nov/19 ]

Related docs:
6.1 https://documentation.magnolia-cms.com/display/DOCS61/Keyboard+shortcuts

5.7 https://documentation.magnolia-cms.com/display/DOCS57/Keyboard+shortcuts

Comment by Anja von Gunten [ 25/Nov/19 ]

apchelintcev sdemocko I guess current ticket is about keyboard shortcuts in grid views right?

Here is a full overview of M6 shortcuts https://wiki.magnolia-cms.com/display/UX/M6+Keyboard+navigation

Here is a related epic with smaller packages of the above https://jira.magnolia-cms.com/browse/MGNLUI-4934

Maybe we have some overlap, eg. https://jira.magnolia-cms.com/browse/MGNLUI-4557

Comment by Šimon Demočko [ 26/Nov/19 ]

cmeier are we sure about SHIFT and CMD? I just tried and it works with SHIFT and arrows. Combining it with CMD does not seem to do anything.

Comment by Christoph Meier [ 27/Nov/19 ]

sdemocko

 are we sure about SHIFT and CMD?

Yes, at least for me  (however, I think that's an "old" feature).
Do not combine SHIFT, CMD with the arrows.

The shift scenario:
(1)Use the mouse (click) to activate a 1st row.
(2) Use both mouse and SHIFT to activate a 2nd row.
As a result the rows (1), (2) and all in between activated.

The CMD scenario:
(1)Use the mouse (click) to activate a 1st row.
(2) Use both mouse and CMD key to activate any further row(s). 
This activates these rows: the one from (1) and any further row clicked by (2).
Clicking again with both mouse and CMD can be used to deactivate an already active row.

I operate on OS-X. (But I highly assume that works on other systems too. On Windows use CTRL instead of CMD).
When trying it right now, I used the "old" Assets and "old" pages apps running on CE-6.1.3.

P.S.
True. When combining SHIFT, CMD with arrows instead of the mouse, then only SHIFT may lead to "some results".
Sorry for not being more precise in my 1st comment above.

Comment by Šimon Demočko [ 27/Nov/19 ]

We have further clarified with avongunten, ldelnevo and rkovarik desired keyboard navigation for grids. I reflected decisions in the Grid table on https://wiki.magnolia-cms.com/display/UX/M6+Keyboard+navigation. The scope of this issue was shown to be larger after clarifying. With rkovarik we narrowed the scope of this issue. Related but out of scope issues were created:

  • MGNLUI-5529 M6 - Focus rectangle (black border) is not shown in List view
  • MGNLUI-5530 Thumbnail view does not register any keyboard shortcuts (different backend)
  • MGNLUI-5531 Implement configurable action shortcuts for grids

Description of this issue will be modified to reflect agreed amended scope. 

Comment by Šimon Demočko [ 27/Nov/19 ]

cmeier thanks for further clarifying that. I added SHIFT + ML and CMD/CTRL + ML to the documentation and current scope.

Comment by Šimon Demočko [ 23/Dec/19 ]

Persistence of inline edits had to be reimplemented (unexpected scope) since used shortcut add-on broke it.

Comment by Šimon Demočko [ 27/Dec/19 ]

Current implementation triggers shortcut when typing in filter columns.  Linking issue MGNLUI-5580.

Comment by Šimon Demočko [ 30/Dec/19 ]

Info for DOCS – unless we need to revert the changes in the issue (this we'll know in following days) these will be the changes introduced to docs:

All of this stands for behavior in grids / browser sub apps
 

Area Action M6 keystroke
Browse Move focus up in list arrow up / k
  Move focus down in list arrow down / j
  Move focus up by a page in list page up (on mac Fn+arrow up)
  Move focus down by a page in list page down (on mac Fn+arrow down)
  Expand node in a list arrow right
  Collapse node in a list arrow left
Select Select / Deselect a list item space
  Select next SHIFT + J
  Select previous SHIFT + K
  Range selection / inversion. SHIFT + ML
  Add clicked row to selection (works like spacebar) CMD/CTRL + ML (depends if Mac or Win)
Open if selected: Execute default action. Works for multiple selection if action supports it. If only one selected and app has no default action configured, it opens inline edit mode
if inline edited: Save changes and inline edit next row.
return
Edit node if focused: Inline edit focused node's name e
Edit next property if inline edited: Shift inline editor focus to the next column or first column of next row. tab
Edit previous property if inline edited: Shift inline editor focus to the previous column or last column of previous row. shift + tab
Exit if inline editing: Exit edit mode esc
Delete if selected: Delete selected item(s) backspace

Might be good to refer to the fact that the app needs to have it's delete action and default action configured for the shortcuts to trigger those. Otherwise nothing happens.

It might be also good to note, that though SHIFT + J,K work to select rows, SHIFT + arrows do not (we might fix that later, but it's complicated, so it might stay like this)

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