nextcloud-vue
nextcloud-vue copied to clipboard
[NcActions] doesn't fully support changing type during open state
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.
- 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.
- 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 inNcPopover. - 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:
- Add
focusTrapsetting change support toNcPopoverso we can enablefocusTrapfor existeddialog - Always unpause the focus trap in
NcActionson close if it was paused before, not matter if was expected.
See also: https://github.com/nextcloud/contacts/issues/3812