nextcloud-vue icon indicating copy to clipboard operation
nextcloud-vue copied to clipboard

[NcActions] doesn't fully support changing type during open state

Open ShGKme opened this issue 1 year ago • 0 comments

NcActions can have a different type: navigation (expanded list), application menu, form dialog. It not only changes attributes for a11y but also keyboard navigation and focus-trap integration.

But it doesn't work well when it is changed during menu usage.

Example — renaming an address book in Contacts app.

  1. Initially it is a menu without a focus trap. Opening this menu pauses the global focus trap (e.g. current modal). It is needed because in a DOM menu is rendered outside the modal with a focus trap, and otherwise modal's trap breaks navigation in actions. It is supposed to be unpaused on close. image
  2. On "Edit" click it, this menu item is replaced with input. With a form, this popup is no longer a menu but a dialog form. Dialog is supposed to have its own focus trap. But it doesn't, because a focus trap should have been enabled initially in NcPopover. image
  3. When the dialog is closed, the global focus trap is not unpaused. Because it is not needed for the dialog. So the focus trap of modal is broken now.

A solution could be:

  1. Add focusTrap setting change support to NcPopover so we can enable focusTrap for existed dialog
  2. Always unpause the focus trap in NcActions on close if it was paused before, not matter if was expected.

See also: https://github.com/nextcloud/contacts/issues/3812

ShGKme avatar Mar 01 '24 11:03 ShGKme