Skip to:

  1. Skip to Jira Navigation
  2. Skip to Side Navigation
  3. Skip to Main Content

Implement keyboard navigation in tabular views. Get shortcut support on par with M5 apps

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

is causing

is depended upon by

relates to

to be documented by

Activity

Show:

Šimon Demočko December 30, 2019 at 8:39 AM
Edited

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)

Šimon Demočko December 27, 2019 at 4:59 PM
Edited

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

Šimon Demočko December 23, 2019 at 1:25 PM

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

Šimon Demočko November 27, 2019 at 12:13 PM

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

Šimon Demočko November 27, 2019 at 12:12 PM

We have further clarified with , and  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 we narrowed the scope of this issue. Related but out of scope issues were created:

  •  M6 - Focus rectangle (black border) is not shown in List view

  •  Thumbnail view does not register any keyboard shortcuts (different backend)

  •  Implement configurable action shortcuts for grids

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

Fixed

Details

Assignee

Reporter

Priority

Fix versions

Parent

Story Points

Sprint

More fields

Created January 22, 2019 at 8:38 AM
Updated January 8, 2020 at 5:57 PM
Resolved December 23, 2019 at 1:15 PM