[MGNLUI-5833] highlighted row when entering the apps built with new UI FW Created: 03/Apr/20  Updated: 13/Jan/21  Resolved: 27/Jul/20

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

Type: Improvement Priority: Neutral
Reporter: Richard Gange Assignee: Lam Nguyen Bao
Resolution: Obsolete Votes: 0
Labels: M6-UI-3
Remaining Estimate: 0d
Time Spent: 4d 7h
Original Estimate: Not Specified

Attachments: PNG File highlighted-row.png     PNG File image-2020-07-21-14-59-50-799.png    
Issue Links:
Relates
relates to MGNLUI-6075 Restyle focus state in grid to be mor... Closed
relation
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: M6 UI & UX Improvements
Sprint: CM & OC 6, CM & OC 7
Story Points: 5

 Description   

Notice the black border around the first element in the grid of apps ported to the new framework. It is confusing for some users.

The border appears at load of the app; when navigating away and returning to the app, the border is gone. When closing and re-opening the app, the border is there again.

Note: The border is the current keyboard focus. It can be moved up/down and has shortcuts attached (e.g. space bar for selecting an item).



 Comments   
Comment by Anja von Gunten [ 20/May/20 ]

Let's show it once the user starts using the keyboard.

Comment by Mikaël Geljić [ 30/Jun/20 ]
  • remove default focus from the grid component
  • add a keyboard shortcut (to a parent element?) for arrow-up and down keys, to focus the grid then.
Comment by Šimon Demočko [ 21/Jul/20 ]

There's two different issues hiding here:

  • Having the focus border in grid (that was intentional and in my opinion is not an issue, see below)
  • Grid is not refocused when returning to the app - that one was filed already under MGNLUI-5526

Addressing the first - focus border being there:

  • I would keep it, having global shortcut up/down that would focus the grid would not allow user to move up and down on other elements of the page (which is planned to be supported)
  • Visually - I do not think it is an issue that the border is there - it shows its readiness. See the same happening in gmail (press j/k and see it move from it's default position)
  • If we still don't want to see the border there initially we could do what Anja suggests, which is how Finder on Mac works. But there's an issue with the GridFastNavigation. Vaadin allows you to focus the border invisibly above the top row, if you go higher (-1 index). We could hide the border by focusing this invisible row on opening - however, GridFastNavigation does not allow focusing it, it considers it out of range. Only Vaadin can get there from client side. But in Vaadin 7 there's no way to do this from server.

Suggestion solution:

  • Closing as invalid and being okay with focus border being present. The fact that it is missing when re-opening needs to be fixed but that's in MGNLUI-5526
Comment by Šimon Demočko [ 23/Jul/20 ]

Quick update: Discussed with Anja - we'd like to park this issue and just redesign the looks of the focus (Anja plans to look into that) so it's not visually intrusive - and then keep it there - this issue would become obsolete, since we do want to have the focus there as explained above. MGNLUI-5526 will still need to be fixed.

This has also been discussed with Marvin (Anja talked to him) and he's okay with this.

Comment by Anja von Gunten [ 24/Jul/20 ]

Created this ticket for restyling https://jira.magnolia-cms.com/browse/MGNLUI-6075

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