Clicking Esc key closes the quick-preview, instead of the open drop-down

[rgarg1]

Ref: https://github.com/openshiftio/openshift.io/issues/268

While a drop-down like Assignees is open, pressing the Escape key on the keyboard closes the quick-preview, rather than the open drop-down.

See @qodfathr comment in the referenced defect.

Note: On the detail view page, Esc key has no effect either.

[divyanshiGupta]

@rgarg1 this happens for each dropdown. Label selector, iteration selector and area selector if open doesn't get closed after pressing ESC.

[nimishamukherjee]

@Veethika can you come up with keyboard guidelines for quick preview.

[joshuawilson]

Can you bring back the feature where we could click on the row for the quick-preview and it closes it? There are several default behaviors that don't work here. I should be able to click on the navigation area and close the slide out.

If you remove the "close on ESC" then we have to wait for the notification to close to close the view.

[serenamarie125]

I think we need to have a list of generic keyboard controls which we support across the app. We then may need to identify how to handle specific areas of the UI . I'd suggest that @Veethika starts with getting agreement on a subset of keyboard controls (likely a subset of these https://www.ssa.gov/accessibility/keyboard_nav.html). Once we have agreement there, go further into specific areas of the UI. @catrobson fyi

[Veethika]

here's the document for the keyboard shortcut for planner: https://docs.google.com/spreadsheets/d/1cATzs0UyUgeZ_cn32LCTQlVHJLsPcfmw3KUTYQN6n-E/edit#gid=2056972779 In reference to this particular issue, ESC should only exit the immediate active field/area - e.g. if a person is editing a field within quick preview, ESC should first exit that field. Pressing ESC again should exit the quick preview.

[joshuawilson]

That makes sense to me.

I also think we need to fix it so that you can click on the nav bar and it closes it.

[Veethika]

UX Document has been provided. Removing UX labels and assignment. @rgarg1 Please assign this to the concerned team.

[christianvogt]

This issue has diverged from the original issue regarding closing the top most popover item using the esc key.

In general all of our components should act upon a layer system and when in a higher layer, focus should be trapped and pressing esc, if appropriate, should only close the top most popover.

Whether general navigation keybindings remain active when in a higher layer can be discussed when we start to implement such key bindings.

[Veethika]

@rgarg1 @christianvogt pressing escape key should only close the most immediate component that user is operating within. For example, if a user is inside a dropdown in the quick preview panel, on pressing ESC first the drop-down should be exited then on pressing ESC the 2nd time the quick preview panel should be closed.

[rgarg1]

I expect the same @Veethika