stable
Clone or download
When you have a lot of projects / history, then navigating only with ↹ tab key might be problematic to reach easily a recent item. For example if we have 3 projects where we are admin, and 3 recent items, from the filter input we need to press 8× ↹ to reach the second item (and more if the first recent items is a milestone with test campaign, taskboard, & cie). input ↹ : legacy search button ↹ : project a ↹ : admin project a ↹ : project b ↹ : admin project b ↹ : project c ↹ : admin project c ↹ : recent item 1 (hopefully it does not have alternate links) ↹ : recent item 2 In order to improve UX, the proposal is to be able to navigate between the two list Projects and RecentItems with arrow keys. If a project has focus, then pressing → right arrow will move the focus to the first recent items. Similarily, pressing ← left arrow will move the focus from the recent items to the first project in the list. Since we are adding support of ←/→ arrow keys, we can also benefit from ↑ ↓ arrow keys as well to navigate inside each list. This helps to bypass alternative links (link to project admin, or links to milestone panes like taskboard or testplan) which was not possible with ↹. Now with the previous example the keystrokes is reduced to 4 keystrokes: input ↹ : legacy search button ↹ : project a → : recent item 1 ↓ : recent item 2 Once the recent item (or the project) is selected, then user can reach alternative links with ↹. Part of story #16209: « Switch to… » button Change-Id: Ibc51cc84b64d6acc2de792195ef57ae451f18d93
Modified Files
| Name | ||||
|---|---|---|---|---|
| M | src/scripts/switch-to/src/components/Body/Projects/ListOfProjects.vue | +9 | −1 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/Projects/ProjectLink.test.ts | +65 | −0 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/Projects/ProjectLink.vue | +43 | −6 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/Projects/__snapshots__/ProjectLink.test.ts.snap | +1 | −0 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/RecentItems/ListOfRecentItems.vue | +9 | −1 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/RecentItems/RecentItemsEntry.test.ts | +60 | −0 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/RecentItems/RecentItemsEntry.vue | +37 | −2 | Go to diff View file |
| M | src/scripts/switch-to/src/components/Body/RecentItems/__snapshots__/RecentItemsEntry.test.ts.snap | +3 | −0 | Go to diff View file |
| M | src/scripts/switch-to/src/initiate-app.ts | +1 | −0 | Go to diff View file |
| M | src/scripts/switch-to/src/store/actions.test.ts | +468 | −0 | Go to diff View file |
| M | src/scripts/switch-to/src/store/actions.ts | +94 | −2 | Go to diff View file |
| M | src/scripts/switch-to/src/store/mutations.test.ts | +15 | −1 | Go to diff View file |
| M | src/scripts/switch-to/src/store/mutations.ts | +8 | −1 | Go to diff View file |
| M | src/scripts/switch-to/src/store/type.ts | +12 | −1 | Go to diff View file |