Stop propagation of keyboard navigation in a number of components

[ShGKme]

☑️ Resolves

• Fix: [BITV]: Not possible to navigate the tabs in sidebar nextcloud/server#39415

#4406 was merged too early, it solved only problems with Arrows in general, but not ESC.

Arrows and ESC are used for keyboard navigation in some components. But the keydown event is not stopped. As a result, arrows and ESC not only manipulate such components but also are handled globally.

For example:

• NcModal:
  • ESC in the open emoji picker or select inside NcModal should only close popover, but also close the Modal
  • ← → in Tabs should only switch tabs but also switch slides in NcModal

To test add a global event listener and check console:

window.addEventListener('keydown', console.log)

🖼️ Screenshots

🏚️ Before	🏡 After
ESC in open select closes modal	ESC in open select closes select
ESC in open emoji picker closes modal	ESC in open emoji picker closes the picker

🚧 Tasks

• Add more items to example of NcModal
• Simply add .stop modifier:
  • NcAppSidebar
    • Stop propagation of ESC on title edit with nameEditable
  • NcAppSidebarTabs
    • Stop propagation of all keyboard navigation: ESC, ↓ ↑ → ←
  • NcInputConfirmCancel
    • Stop propagation of ESC
• NcSelect: add interceptor via mapKeydown to stop propagation when select is open
• NcPopover: manually add keydown event listener similar to how focus trap is added. It can be cleaner with an additional wrapper of popover content
  • It also fixes components, based on NcPopover:
    • NcActions
    • NcEmojiPicker
    • NcUserBubble
    • NcColorPicker
    • NcDatetimePicker

Ignored:

• NcHeaderMenu:
  • Global ESC handler. It is not a problem, it is never used inside other components with a global handler.
• NcListItem:
  • Hide actions on ESC when focused. Should not be a problem, it's also not used inside other components with a global handler.

Additional discussion

Both this PR and #4406 fixes Arrows navigation in Sidebar tabs being in a modal viewer. But they do it in a different way:

• That PR saves NcModal from switching slides by any not stopped arrows outside the modal
• This PR saves any modal-like component from handling Arrows navigation of its content.

I'd keep both PRs but we can revert #4406.

For example, if we want to switch slides in Viewer when the focus is on Tab panel content div.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[GretaD]

you can Dissmiss changes requested by pytal, if its delivered and they dont review it on time

[ShGKme]

Rebased onto master with fixtup, no other changes